figwright

<div align="center"> <br />

<picture><source media="(prefers-color-scheme: dark)" srcset="./.github/assets/logo-full-dark.svg"><source media="(prefers-color-scheme: light)" srcset="./.github/assets/logo-full-light.svg"><img alt="Figwright" src="./.github/assets/logo-full-light.svg" width="499" height="150"></picture>

<br /> <p align="center"> A free, two-way Figma MCP server for coding agents. <br /> Pairs with a Figma plugin, not a Dev Mode seat. </p>

About · Setup · Skills · Tools · Plugin · FAQ · Contributing

<a href="https://trendshift.io/repositories/68274?utm_source=trendshift-badge&amp;utm_medium=badge&amp;utm_campaign=badge-trendshift-68274" target="_blank" rel="noopener noreferrer"><img alt="Figwright on Trendshift" src="https://trendshift.io/api/badge/trendshift/repositories/68274/daily?language=TypeScript" width="250" height="55"></a>

</div>

About

Figwright connects an MCP server to a Figma plugin over a local WebSocket relay, so an AI agent (Claude Code, Cursor, Codex, or any other MCP client) can work with Figma instead of just looking at it.

It works in both directions:

Read: turn a Figma selection into framework-aware code, grounded on faithful, de-duplicated design context (layout, typography, variables, components).

<p align="center"> <img alt="Figwright turning a Figma selection into code" src="./.github/assets/figma-to-code.gif" width="820"> </p>

Write: author and edit the canvas directly, from frames and text to auto-layout, styles, variables, components, whole screens.

<p align="center"> <img alt="Figwright building a design directly on the Figma canvas" src="./.github/assets/code-to-figma.gif" width="820"> </p>

Everything runs on your machine: the server, the relay, and the plugin. Your designs are never sent anywhere.

Why Figwright

• Not gated: the official Dev Mode MCP is behind a paid Dev Mode seat. Figwright runs on the free tier.
• Bidirectional: not read-only. 113 tools span reading and writing the canvas, so an agent can both implement designs and build them.
• Provider-first codegen: Figwright detects your real stack (framework + styling system) and reuses your existing components, tokens, and icons, instead of emitting generic markup you have to rewrite.
• One agent per file: several agents can work at once, each claiming its own open Figma file. Switching tabs no longer sends one agent's edits into another's design — see working across files.
• Open & extensible: the read/write workflows ship as installable skills you can adopt or fork.

Setup

You need an MCP client (Claude Code, Cursor, …), Node.js 20.19+ or 22.12+, and Figma. The free Figma tier is enough, though the desktop app is needed to import the plugin. The server runs via npx as its own process, so its Node version is independent of the one your project builds with; Node 18/21 and 22.0–22.11 are not supported.

1. Add the server to your MCP client

For Claude Code, add this to your .mcp.json (other clients use the same shape):

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": ["-y", "@figwright/mcp@latest"]
    }
  }
}

npx fetches and runs the published server, so no global install is needed.

2. Install the Figma plugin

The plugin isn't on the Figma Community marketplace yet, so install it from the latest release:

1. Download the plugin zip from the latest GitHub Release and unzip it.
2. In the Figma desktop app: Menu → Plugins → Development → Import plugin from manifest… and pick the unzipped manifest.json.

3. Connect

Open the Figwright plugin in Figma (Plugins → Development → Figwright). It connects to the local server automatically and shows Connected. Ask your agent to run ping to confirm the link.

4. (Optional) Install the skills

The skills make agents reach for Figwright at the right moment and follow the grounded workflows:

npx skills add awdr74100/figwright/skills

5. Try it

With a frame selected in Figma, prompt your agent:

Code this Figma selection as a React component.

or, the other direction:

Build a pricing section in Figma from this spec.

Skills

Agent skills orchestrate Figwright's tools. They are model-invoked: your agent loads one automatically when the task matches its description.

| Skill | What it does | | :------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | | figma‑codegen | Turn a Figma selection into framework-aware code, grounded on your stack and existing components. | | figma‑build | Build a Figma design from code or a description, reusing the file's existing components and styles. |

Install across any supported agent with the skills CLI:

npx skills add awdr74100/figwright/skills      # both
npx skills add https://github.com/awdr74100/figwright/tree/main/skills/figma-codegen  # one

[!NOTE] Skills need the @figwright/mcp server connected. On their own they have no tools to drive.

Tools

Figwright exposes 113 MCP tools in three groups:

• Read: selection, document and node inspection, styles, variables, components, fonts, reactions, motion (animation) state, screenshots, original image-fill assets, PDF export, and video export of animated frames (MP4 / GIF / WebM); plus list_files / use_file for working across more than one open Figma file at once.
• Write: create and edit frames, text, shapes, auto-layout, effects, styles, variables, components (including authoring their boolean/text/instance-swap properties), pages, reactions, and Motion animations (keyframes, animation-style presets, timelines); plus a batch tool to apply many edits at once.
• Grounding: get_design_context for faithful, de-duplicated design context, and component_map / token_map / icon_map, which join Figma data to your codebase so codegen reuses what you already have; plus design_diff, which reports what changed in a design against a saved baseline so you update only the affected code.

[!TIP] Your MCP client lists every tool at connect time, which is always the authoritative, up-to-date catalog.

Plugin

The Figma-side plugin isn't a black box. It shows every call as it happens, lets you inspect the exact payload sent to the model, and surfaces its own connection health.

<p align="center"> <img alt="The Figwright panel: an activity log of tool calls, an expanded call showing the exact payload sent to the model, and a debug tab with connection and call statistics" src="./.github/assets/plugin-panel.png" width="820"> </p> <p align="center"> _{<b>Activity</b>: every call, with timing and a jump to the nodes it touched · <b>Payload</b>: exactly what the model received · <b>Debug</b>: health, versions, and a one-click diagnostic bundle} </p>

And it follows your Figma theme, light or dark.

<p align="center"> <img alt="The same panel side by side in Figma's light and dark themes" src="./.github/assets/plugin-theme.png" width="616"> </p>

The window is yours to arrange. Drag the bottom-right corner to resize it. A taller panel keeps more of the log in view, and the size is remembered next time you open it. Or put it away: Run in background, in the panel header right under Figma's own ✕, hides the panel while the connection stays live, so a long-running agent keeps working. Run the plugin again to bring it back. The ✕ above it closes the plugin instead, connection and all.

<p align="center"> <img alt="The same panel at two sizes: a narrow one showing three calls with its resize corner highlighted, and a wider one showing five, with the run-in-background button highlighted in the header" src="./.github/assets/plugin-window.png" width="602"> </p> <p align="center"> _{<b>Resize</b>: drag the corner, the size sticks · <b>Background</b>: the panel hides, the relay stays connected} </p>

How it works

Your MCP client talks to the @figwright/mcp server over stdio; the server relays to the Figma plugin over a local WebSocket. Several clients can share one plugin (they elect a leader that owns the connection), and the transport is built to ride out dropped sockets:

┌─────────────────────────────────────────────────────────────────────┐
│ MCP CLIENTS  ·  one per agent                                       │
│ Claude Code · Cursor · Claude · any MCP-capable client              │
└─────────────────────────────────────────────────────────────────────┘
                                   │  MCP protocol over stdio
                                   ▼
┌─────────────────────────────────────────────────────────────────────┐
│ @figwright/mcp  ·  your client launches one; they elect a leader    │
│                                                                     │
│ LEADER   (owns the single plugin connection)                        │
│    • WebSocket relay · request idempotency                          │
│    • routes to the most-recently-active file                        │
│    • session resume · "busy ≠ dead" heartbeat                       │
│    • endpoints:  /ws (plugin) · /ping (health) · /rpc (followers)   │
│                                                                     │
│ FOLLOWERS                                                           │
│    • forward tool calls to the leader over HTTP /rpc                │
│    • take over automatically if the leader exits                    │
└─────────────────────────────────────────────────────────────────────┘
                                   │  local WebSocket · msgpack (binary)
                                   ▼
┌─────────────────────────────────────────────────────────────────────┐
│ FIGMA  (desktop or browser)                                         │
│                                                                     │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Figwright plugin                                                │ │
│ │   • UI (Vue 3 iframe): WebSocket client + heartbeat             │ │
│ │   • sandbox: executes Figma Plugin API calls                    │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│                                                                     │
│              │ Figma Plugin API                                     │
│              ▼                                                      │
│            Canvas                                                   │
└─────────────────────────────────────────────────────────────────────┘

By design Figwright is provider-first: rather than a fixed compiler pipeline, the tools surface honest design context and let the model generate code that matches your codebase. The figma-codegen skill encodes this approach.

Security

Figwright runs entirely on your machine: your client launches the server over stdio, the server relays to the plugin over a WebSocket on 127.0.0.1:3055, and nothing is sent anywhere else. The plugin uses only Figma's public Plugin API, so it reaches the file you have open and nothing beyond