Are you the author? Sign in to claim
Free, two-way Figma MCP server. Turn designs into framework-aware code, and push code back to the canvas. Works with Cla
Where Playwright drives the browser, Figwright drives Figma.
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).
Write — author and edit the canvas directly: frames, text, auto-layout, styles, variables, components, whole screens.
Everything runs on your machine and talks to Figma through a plugin, so it needs no Figma Dev Mode seat and no paid tier.
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.
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.
Activity — every call, with timing and a jump to the nodes it touched · Payload — exactly what the model received · Debug — health, versions, and a one-click diagnostic bundle
And it follows your Figma theme, light or dark.
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 — no global install needed.
The plugin isn't on the Figma Community marketplace yet, so install it from the latest release:
manifest.json.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.
The skills make agents reach for Figwright at the right moment and follow the grounded workflows:
npx skills add awdr74100/figwright/skills
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.
Agent skills orchestrate Figwright's tools. They're 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/mcpserver connected — on their own they have no tools to drive.
Figwright exposes 112 MCP tools in three groups:
batch tool to apply many edits at once.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 — that's always the authoritative, up-to-date catalog.
npx, as its own process, so this is independent of the Node version your project builds with. (This is the modern-Node baseline; Node 18/21 and 22.0–22.11 aren't supported.)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 it.
Loopback is not on its own a boundary — a web page you visit can still reach a local port — so the relay gates every request on two headers a page cannot forge: Host, which must name loopback (this is what stops DNS rebinding), and Origin, which admits the plugin's sandboxed handshake and refuses browsers everywhere else. The leader's HTTP endpoints additionally require a media type that cannot be sent without a CORS preflight. See MCP Security Best Practices for the wider picture, and SECURITY.md for Figwright's threat model, what is in and out of scope, and how to report a vulnerability privately.
Figwright is not a substitute for reviewing what your agent does. Its write tools change your Figma file and its export tools write files to paths the agent chooses; an agent acting on a malicious design or a prompt-injected instruction can misuse both. Your MCP client's tool-approval controls are the boundary that matters.
command not found, or it fails / disconnects with -32000 ("Connection closed").Both come down to how your MCP client launches the server: it spawns the command directly, not through your interactive shell, so it inherits none of what your shell sets up. That bites hardest when Node is managed by a version manager (fnm, nvm, asdf, volta, mise), since those configure PATH and npm from shell hooks that only run in a real terminal. It isn't specific to Figwright — it affects any npx-launched MCP server. There are two symptoms, with two different fixes.
command not found — the client can't find npx / node on its PATH.
Use an absolute path. In a normal terminal run which npx (or which node) and use that full path as command:
{
"mcpServers": {
"figwright": {
"command": "/Users/you/.local/share/fnm/node-versions/v24.x.x/installation/bin/npx",
"args": ["-y", "@figwright/mcp@latest"]
}
}
}
Or pass PATH through env. If your client supports a per-server env, add your version manager's bin directory to env.PATH.
-32000 / "Connection closed" / it just never connects — npx runs, but the server exits before the handshake.
npx … @latest re-resolves the package from the registry on every launch. In a directly-spawned environment that step can fail or stall — empty or different npm config, a corporate proxy or private registry that isn't configured there, or no network — so the process dies before MCP connects and the client reports the connection as closed. (A missing node for the binary's shebang lands here too.)
The fix is to install the package so launch needs no registry fetch:
As a project dependency — the quickest unblock. Install it, then drop @latest from your config. The @latest tag is what forces the registry round-trip; without it, npx uses the copy already in node_modules (a project-scoped config like Claude Code's .mcp.json runs from your project root):
pnpm add -D @figwright/mcp # or: npm i -D @figwright/mcp
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": ["-y", "@figwright/mcp"]
}
}
}
Or globally, pinned to the binary. Install once, then point command straight at it — no npx, no per-launch resolution. Use the absolute path from which figwright-mcp:
npm i -g @figwright/mcp
which figwright-mcp
{
"mcpServers": {
"figwright": {
"command": "/absolute/path/to/figwright-mcp"
}
}
}
The server is launched by your MCP client, so it only runs while that client is open. Check that:
ping);127.0.0.1);No. Figwright talks to Figma through a plugin, so the free tier is enough — no Dev Mode seat or paid tier required.
Yes. Several MCP servers can share a single plugin via leader/follower election — one leads, the others follow, with a graceful handoff if the leader goes away.
Contributions are welcome. See CONTRIBUTING.md for how to get set up and open a pull request, and AGENTS.md for the architecture, repo layout, tech stack, and conventions.
figwright follows the -wright tradition — an old English word for a maker or craftsman: a playwright writes plays, a shipwright builds ships, a wheelwright, wheels. The name is a nod to Playwright, which automates the browser. Where Playwright drives the browser, Figwright drives Figma — a maker of designs that both reads the canvas and crafts work back onto it.
MIT © Roya
Run Claude Code as an MCP server so any agent can delegate coding tasks to it
@microsoft✓ OfficialBrowser automation using accessibility snapshots instead of screenshots
@googleapis✓ OfficialGoogle's universal MCP server supporting PostgreSQL, MySQL, MongoDB, Redis, and 10+ databases
@github✓ OfficialOfficial GitHub integration for repos, issues, PRs, and CI/CD workflows