awdr74100/figwright

Free, two-way Figma MCP server. Turn designs into framework-aware code, and push code back to the canvas. Works with Claude Code, Cursor, Codex, and any MCP client.

Figwright

Connect AI coding agents to Figma via a free, bidirectional MCP server + plugin. Let agents read designs as code and write designs directly to the canvas — no paid Dev Mode seat required.

What it is

A Model Context Protocol (MCP) server (@figwright/mcp) that pairs with a companion Figma plugin. Together they give AI agents (Claude Code, Cursor, Codex, any MCP client) two-way access to Figma files:

  • Read a Figma selection → generate framework-aware code (React, your styling system, reusing existing components/tokens/icons).
  • Write to the canvas → create/edit frames, text, auto-layout, styles, variables, components, pages, even Motion animations.

121 MCP tools cover both directions, plus grounding tools (get_design_context, component_map, token_map) that feed the agent faithful design context.

Why it stands out

  • Free tier – the official Dev Mode MCP requires a paid seat; Figwright runs on Figma’s free plan.
  • Bidirectional – not read-only; agents can build and edit designs.
  • Provider‑first codegen – detects your actual stack and reuses your existing components and styles instead of emitting generic markup.
  • Multi‑agent – multiple agents can work on different Figma files simultaneously via leader/follower election.
  • Privacy – everything runs locally: server, relay, plugin; designs never leave your machine.

How it works

  1. Your MCP client launches the server over stdio.
  2. The server relays to the Figma plugin over a local WebSocket (127.0.0.1:3055).
  3. The plugin executes Figma Plugin API calls inside the editor.

Security gates (Host/Origin headers) prevent web pages from reaching the local relay.

Who it’s for

Developers and designers using AI coding agents to implement designs or generate UI code, especially those who want free, two-way Figma integration without Dev Mode subscriptions.

Related

  • Project
    figma/mcp-server-guide

    Documentation for Figma’s MCP server – an HTTP service that lets AI coding assistants read design data (components, variables, layout) from Figma, generate placeholder images, and (in beta) write back to the canvas. Includes setup for VS Code, Cursor, Claude Code, Gemini CLI, rate‑limit info, and best‑practice tips for prompting agents to turn frames into code.

  • Project
    grab/cursor-talk-to-figma-mcp

    An MCP integration that allows AI agents like Cursor to read and programmatically modify Figma designs via a WebSocket server and plugin.

  • Project
    gethopp/figma-mcp-bridge

    Figma MCP Bridge is an open‑source bridge that lets AI agents talk to the Figma desktop app via a persistent WebSocket, bypassing the free‑tier API limit. It provides a rich set of read‑only and optional write tools (e.g., get_document, create_frame, set_text_content) and supports multiple files simultaneously. Install the plugin in Figma, add the server to an AI tool’s MCP config, and start prompting the AI to read or edit design files in real time.

  • Project
    southleft/figma-console-mcp

    A Model Context Protocol server that turns Figma design systems into an API, enabling AI assistants to create designs, sync tokens, and audit design-code parity.

  • Project
    microsoft/playwright

    Playwright is a comprehensive framework for browser automation and testing that provides a unified API for Chromium, Firefox, and WebKit, now extended with specialized tools for AI agents to interact with the web.