AI can read your Figma. Figwright lets it build there, too.

TL;DR — Figwright is a free, open-source MCP server + Figma plugin that gives any AI agent a two-way door into Figma. It reads designs into code that reuses your components and tokens, and it writes back onto the canvas — frames, text, auto-layout, styles, variables, whole screens. 92 tools. Any MCP client. No Dev Mode seat.
npx -y @figwright/mcp@latest

---

Here's a Tuesday I've lived more times than I'd like.

It's 3pm. A designer drops a Figma link in Slack — "can you build this screen? should be quick 🙏" — and I make the mistake of believing "should be quick." I point my AI agent at the frame and ask for the code. Thirty seconds later I'm staring at a 180-line component that's really just a wall of <div style={{ ... }}>, with #2563EB hardcoded in six places. That blue is literally bg-primary in our config — the AI just has no way to know that. The Button I shipped last month? Reinvented from scratch. My Tailwind tokens? Never heard of them. So I spend the next hour find-and-replacing hex codes like it's 2015, swapping the AI's generic markup for the components we already have. The tool "saved me time" by handing me homework.

Then the designer follows up, breezy as ever: "oh, can you also drop a pricing section into the Figma file so I can tweak the spacing?" And my AI just… shrugs. It'll describe the canvas to me all day. It can't put one frame back on it.

And the official Figma Dev Mode MCP — the thing that does the reading half? It wants a paid Dev Mode seat. For a side project, that's where the conversation quietly ends.

I got tired of every part of that Tuesday, so I built Figwright: a free, open-source MCP server (plus a Figma plugin) that gives any AI agent — Claude Code, Cursor, whatever speaks MCP — a two-way door into Figma. Let me walk you through how it fixes that exact day.

Where Playwright drives the browser, Figwright drives Figma.

Problem 1: "The AI ignores everything I've already built"

Generic tools fail for one reason: they hand the model a flattened picture of the design and zero knowledge of your repo. Of course it reinvents a button — it doesn't know you have one.

Figwright does the opposite. Before it writes a line, it does what I call grounding: it reads your real stack (React / Vue / Svelte / Next… + Tailwind / CSS / CSS-in-JS) and then joins the Figma design to your codebase with three tools that are the heart of the project:

• component_map — sees a card in the design, knows you already ship <Card>.
• token_map — sees your brand blue, emits bg-primary, not #2563EB.
• icon_map — sees an icon and reuses the actual SVG from your repo (with the right currentColor / fixed-fill contract), instead of re-drawing a blob.

All of it rides on get_design_context, which gives the model faithful, de-duplicated context — layout, typography, variables, components — instead of a screenshot it has to guess from.

So the same request that used to spit out <div> soup:

// ❌ generic tool: hardcoded values, your design system nowhere in sight
<div style={{ display: 'flex', padding: 16, borderRadius: 8, background: '#2563EB' }}>
  <span style={{ color: '#fff', fontSize: 14, fontWeight: 600 }}>Get started</span>
</div>

…now comes back as code I can actually merge:

// ✅ Figwright: reuses the component and tokens I already have
<Button variant="primary" size="md">
  Get started
</Button>

No afternoon of cleanup. That's the whole point: don't be a compiler that flattens the design — surface honest context and let the model write code that fits the repo it's living in.

Problem 2: "It can only look, never touch"

This is the half nobody else does. When the designer asks me to push a section into Figma, I now just… do it:

Build a 3-tier pricing section in Figma from this spec.

Figwright authors the canvas directly — and it reuses the file's design system instead of dropping flat rectangles. Real auto-layout, your text and color styles, your variables bound to the right nodes, your components instantiated. Under the hood that one prompt fans out into real tool calls:

create_frame → set_auto_layout → create_text → apply_style_to_node
→ bind_variable_to_node → create_instance → resize_nodes → ...

Scaffold a whole screen, fix one component, or generate design-system assets — from a prompt or a chunk of code. Turn a React component into a Figma component. Recreate a landing page on the canvas. The symmetry is the magic: the same agent that implements your designs can also build them.

Problem 3: "Why am I paying for a seat just to read my own file?"

Figwright talks to Figma through a plugin, so the free tier is enough — no Dev Mode seat, no paid tier. And it isn't married to one editor: any MCP-capable client works the same way.

Here's the honest comparison with the official option:

	Official Dev Mode MCP	Figwright
Reads a design → code	✅	✅
Writes back to the canvas	❌	✅
Reuses your components & tokens	partial	✅ provider-first
Works in any MCP client	Dev Mode clients	✅
Cost	paid Dev Mode seat	free

The official Dev Mode MCP is genuinely good — but it's read-only and behind a paid seat. Figwright is the one that also writes back, reuses your codebase, and runs for free.

The stuff you only learn from real, messy files

A demo is easy. Trusting a tool on a 2,000-layer client file is where it gets real — and a few scars shaped how Figwright works:

• Run two agents at once. I keep Claude Code and Cursor open. They used to fight over the plugin socket, so Figwright runs a leader/follower election: one owns the connection, the others forward over HTTP, and if the leader quits a follower takes over — sub-second, no manual reconnect.
• "Busy ≠ dead." A big export would look like a dropped connection — a heavy, synchronous step starved the heartbeat and the relay cut the line. Cranking the timeout up doesn't help; the heartbeat has to survive the work. Now it does.
• Screenshots never come back empty. I once exported a logo and got a 1×1 transparent pixel because it lived inside a clipped carousel. Figwright bypasses ancestor clipping, so a screenshot returns the real thing — not a blank.
• Binary on the wire. The plugin↔server protocol is msgpack, not JSON — faster and smaller for the chunky payloads design data throws around.

None of it is flashy. All of it is the difference between a demo and a tool you reach for on a deadline.

92 tools, three groups

The count isn't the point — coverage is:

• Read — selection, document/node inspection, styles, variables, components, fonts, reactions, screenshots, even PDF export.
• Write — create and edit frames, text, shapes, auto-layout, effects, styles, variables, components, pages, reactions… plus a batch tool to apply many edits at once.
• Grounding — get_design_context, component_map, token_map, icon_map — the join layer that ties Figma to your code.

Your MCP client lists every tool at connect time, so that's always the source of truth.

Skills do the orchestrating

Raw tools are low-level. Figwright ships two model-invoked skills that encode the grounded workflows, so your agent reaches for the right tools at the right moment:

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

npx skills add awdr74100/figwright/skills

Quick start

1. Add the server to your MCP client (.mcp.json for Claude Code; other clients use the same shape):

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

2. Install the plugin from the latest GitHub release: unzip it, then in the Figma desktop app → Plugins → Development → Import plugin from manifest… and pick the manifest.json.

3. Connect. Open the plugin in Figma — it auto-connects and shows Connected. Ask your agent to run ping to confirm.

4. Try it. With a frame selected: "Code this Figma selection as a React component." …or the other way: "Build a pricing section in Figma from this spec."

FAQ

Do I need Figma Dev Mode or a paid plan?
No. It's a plugin, so the free tier is enough — no Dev Mode seat, no paid tier.

Which agents work?
Anything that speaks MCP — Claude Code, Cursor, and other MCP clients all work the same way.

Can multiple agents use the same plugin?
Yes — leader/follower election shares one plugin across several servers, with a graceful handoff.

Is it actually local?
Yes. The relay is 127.0.0.1-only; nothing leaves your machine.

Why "Figwright"?

figwright follows the old -wright tradition — a maker or craftsman. A playwright writes plays, a shipwright builds ships, a wheelwright builds wheels. It's 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.

Try it — and tell me what breaks

It's MIT-licensed, open to contributions, and already carries an A quality score on Glama.

• ⭐ Repo: https://github.com/awdr74100/figwright
• 📦 npm: @figwright/mcp

I built Figwright because I was tired of AI tools that could only look at my designs — and that handed me homework every time they did. If you've felt the same wall, give it a spin on a real file and tell me how the two-way loop holds up. Star the repo if it's useful, open an issue if it isn't, and I'd genuinely love to see what you build (or break).