Every front-end engineer knows the ritual. A frame lands in Figma, you open the inspect panel, and then you start transcribing: this padding is 12px, that heading uses the --text-lg token, this button is the tertiary variant, the gap between cards is 16 not 20. Half an hour later you have markup that mostly matches the mock, plus three magic numbers you'll have to explain in code review. The design was already a precise, structured document — and you retyped it by hand.
Figma's Dev Mode MCP server exists to close that gap, but not in the way the demos suggest. The headline is "design to code," and yes, it produces a component. The part worth your attention is quieter: it exposes the design's structure — variables, component mappings, layout metadata — as tools an AI agent can call. That distinction decides whether you get throwaway markup or code that actually fits your system.
What it actually is
The MCP server is a local process that the Figma desktop app runs and speaks the Model Context Protocol to. Your coding agent — Claude Code, Cursor, VS Code's Copilot, Windsurf — connects to it as a client and gains a set of tools that read the current selection or a specific node from your Figma file. There is no plugin sandbox, no REST polling, no pasted screenshots. The agent asks for context, Figma answers with the real data behind the frame.
Because it runs inside the desktop app, "what to generate" is whatever you have selected on the canvas. Select a card component, ask your agent to build it, and the agent calls the server for that node.
Turning it on
The server is off by default and lives in the desktop client. Open the Figma menu in the top-left, go to Preferences, and toggle Enable Dev Mode MCP server. It starts a local endpoint:
http://127.0.0.1:3845/mcp
Then point your editor at it. In an MCP-aware client the configuration is a few lines — for a project-scoped Claude Code setup, a .mcp.json entry:
{
"mcpServers": {
"figma-dev-mode": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}
Two requirements catch people. It needs the desktop app, not the browser — the server is local. And access requires a Dev or Full seat on a paid plan; a viewer seat won't expose it.
At the time of writing the server surfaces a small, deliberate set of tools. Understanding what each returns is the whole game:
get_code — generates code for the selection. The default output is React plus Tailwind, but that's a prompt-level default, not a hard constraint. Tell the agent "generate this in Vue" or "use plain CSS modules" and it obliges.get_variable_defs — returns the variables and styles the selection uses: colors, spacing, typography. This is the tool that kills magic numbers. Instead of padding: 12px, the agent learns the frame references your spacing-sm token.get_image — a screenshot of the selection, so the agent can preserve layout fidelity that raw node data doesn't fully convey. Keep it enabled unless you're fighting token limits.get_code_connect_map — the one that separates a toy from a tool. It returns the mapping between Figma nodes and the actual components in your codebase.
Selection-based context is the fast path, but you're not limited to it. Right-click any frame and choose Copy link to selection to grab its node ID, then hand that link to the agent — useful when you want to reference something you're not currently looking at, or drive generation from a ticket.
Why Code Connect is the difference between demo and product
Point a generic model at a screenshot and it will happily invent a <Button> — its own button, with its own props, its own class names, unrelated to the Button you shipped last quarter. That's the failure mode of every "AI turns design into code" tool: it produces plausible markup that ignores the system you already built.
get_code_connect_map is the fix. When you've set up Code Connect, each design component points at its real counterpart in your repo. Now when the agent generates the frame, it doesn't guess — it reaches for your Button, imported from your package, with the variant prop that matches the Figma variant. Combined with get_variable_defs feeding real token names, the output stops being a lookalike and starts being something you'd actually merge.
The value isn't the model writing JSX. It's the model writing JSX that uses your components and your tokens, because the server handed it both.
Practical habits that matter
One rule pays off immediately: select small. Point the server at a whole page and you'll get slow, incomplete, or malformed responses — the payload is too large and the model loses the thread. Break the screen into components or logical chunks — a card, a nav bar, a single form — and generate them one at a time. Results come back faster and hold together better.
Two more that save review cycles. State your framework and conventions in the prompt up front rather than correcting React-plus-Tailwind output afterward. And invest in Code Connect before you invest in prompt gymnastics — no amount of clever phrasing substitutes for the map that tells the agent which component is which.
Keep your expectations calibrated, too. This is beta software, and the output is a strong first draft, not a finished PR. It gets structure, spacing, and component references right far more often than hand-transcription does, but you still own the logic, the accessibility pass, and the edge cases the static frame never showed.
The takeaway
If you try the Dev Mode MCP server as a screenshot-to-code button, you'll be mildly impressed and then disappointed. Set up Code Connect and lean on get_variable_defs first, and it becomes something more useful: a bridge that carries your design system's identity into generated code, so the agent builds with your components and your tokens instead of reinventing them. Wire that up before your next feature, and the half-hour transcription ritual is the thing you delete.
Sources: Guide to the Dev Mode MCP Server – Figma Help Center, Introducing our Dev Mode MCP server – Figma Blog, Figma MCP server – Developer Docs