Figma MCP: Dev Mode Server Guide for Designers

Figma MCP is the Dev Mode server that lets AI clients like Claude Code, Cursor, Windsurf, and VS Code read a Figma file as structured tokens, layout, and component references rather than as a flat screenshot. It runs locally on the Figma desktop app at port 3845, exposes four tools - get_code, get_image, get_variable_defs, get_code_connect_map - and replaces the old hand-off where developers paste a PNG into an LLM and hope the result lines up with the design system. The protocol underneath is the Model Context Protocol, an open standard Anthropic released in November 2024 for connecting language models to external tools and data sources. This guide explains what MCP is, what Figma's implementation does, how to enable it, how designers should structure files so the generated code stays tokenized, and how it compares to alternatives like Framelink, Anima, and Builder.io Visual Copilot.

What MCP actually is

The Model Context Protocol is an open JSON-RPC standard that lets a language model talk to external tools through a uniform interface. Anthropic published it on November 25, 2024 and the MCP specification is now maintained as a community project with SDKs in Python, TypeScript, C#, and Java. A server exposes Prompts, Resources, and Tools; a client - usually an IDE or a chat app - connects over stdio for local servers or HTTP plus Server-Sent Events for remote ones. The point is not the wire format, it is the substitution: instead of every tool inventing its own integration with every LLM, both sides speak MCP and any client can reach any server.

Why a context protocol matters for design

Designers have lived with the consequences of context loss for years. A Figma frame goes to a developer as a PNG plus a Notion link, the developer paste it into an LLM, and the model returns CSS that uses literal hex values, off-by-2px paddings, and component names that nobody on the team uses. The problem was never the model - it was that the model could not see the design system, only an image of one frame. MCP closes that gap by giving the AI a structured channel to the file: variable names, component IDs, layer hierarchy, and references to your real codebase, all without lossy intermediate steps.

How the Figma Dev Mode MCP server works

Figma's official Dev Mode MCP server launched in open beta on June 4, 2025 and is still labeled beta as of mid-2026. It runs as a local server inside the Figma desktop app at http://127.0.0.1:3845/mcp once you toggle it on in Dev Mode. AI clients connect to that endpoint, send a node ID or selection reference, and receive a structured response shaped by whichever tool they invoke. The server is selection-based by design: instead of dumping the whole file into the model context, it scopes each call to one frame, keeping responses small and focused.

The four tools the server exposes

Every Figma MCP call resolves to one of four tools. Knowing which tool returns what makes it easier to write good prompts and to debug when the output drifts from the design.

What context actually looks like

Wiring a Figma MCP server into an IDE is a tiny config change. The example below is the entry an IDE like Claude Code or Cursor adds to its MCP configuration; once Figma's desktop app is running with Dev Mode enabled, that single line is enough for the client to discover the four tools and start invoking them.

How to set it up in 60 seconds

Setup is a four-step process for a designer who already has a Pro plan. There is no separate install: the server ships inside the desktop app and turns on with a toggle. Browser-only Figma users need to install the desktop app first - the local server only runs there.

1. Open the Figma desktop app and load any Design file you have edit access to.
2. Switch to Dev Mode using the toggle in the top-right of the toolbar.
3. In the Inspect panel, find the MCP section and turn on Enable desktop MCP server.
4. Add the http://127.0.0.1:3845/mcp endpoint to your IDE's MCP config and restart the IDE.

Native client support covers VS Code with GitHub Copilot, Cursor, Windsurf, Claude Code, and Zed - the official Figma docs maintain the current list and a known-issues page for client-specific quirks. Plan-wise, the server requires a Dev or Full seat on a Professional, Organization, or Enterprise plan; Starter accounts are limited to roughly six tool calls per month, which is enough to try the feature but not enough to ship.

How designers benefit in practice

The benefit is not faster typing - the benefit is that the code coming out of the AI now references the same names your design system uses. Three concrete shifts show up almost immediately in teams that adopt MCP.

Tokens stay tokens

Without MCP, an AI assistant looking at a screenshot picks colors with an eyedropper and pastes literal hex values into the output. With get_variable_defs available, the model sees that the surface color is surface/elevated aliased to gray/950, and it writes var(--surface-elevated) or the equivalent token reference. The same shift happens for spacing, typography, and radius - the generated code uses your token names, so a future system change still propagates. Pair this with a healthy primitive and semantic token architecture and the AI's output starts looking like code your senior frontend engineer would have written.

Components map to real code components

get_code_connect_map is the tool that earns its weight on a mature codebase. When a Figma component is mapped to its real React or Vue counterpart through Code Connect, the AI no longer rebuilds your Button from scratch on every frame - it imports the component you already wrote, with the right props inferred from the variant. Without Code Connect, the model falls back to building lookalike components, which is the failure mode every senior engineer complains about. Code Connect requires Organization or Enterprise; this is the part of the system that is paywalled, and it is also the part that gives the largest accuracy jump.

Less back-and-forth at handoff

Designers spend less time in the Slack thread that starts with "the padding is wrong" because the AI is working from the same source the designer is editing. The classic translation losses - 16px becoming 13px, text/heading/lg becoming a literal font-size: 24px, or a card built from primitives instead of the existing card component - all shrink. Some drift remains, especially on layouts where auto-layout edges meet absolute positioning, but the baseline quality is high enough that the conversation moves from "this is wrong" to "can you adjust this one detail."

Figma MCP vs other design-to-code tools

Figma MCP is one option in a crowded design-to-code space. Each tool optimizes for a different bottleneck - some lean on fine-tuned models, some replace your IDE workflow entirely, some focus on the component-mapping problem. The table below compares the most common choices on the dimensions a designer typically cares about; treat it as a starting point, not a benchmark.

If you want raw context fed to a general-purpose model in your IDE, Figma's official server or the community Framelink MCP is the right shape. If you prefer an end-to-end pipeline that maps designs to your codebase using a vendor-tuned model, Anima or Visual Copilot are stronger. There is no universal answer; the deciding question is whether you want the AI to reason inside your IDE with your codebase context, or whether you want a turnkey export.

Limitations to know before you ship

• The official server is still labeled beta as of mid-2026; expect occasional protocol changes and document any custom integrations defensively.
• Responses are capped at roughly 20 KB per call - large frames need to be broken down into smaller selections before the AI can reason about them.
• Code Connect is the unlock for component mapping, and it requires Organization or Enterprise plus a Dev seat; Pro accounts get tokens but not real-component imports.
• The remote/hosted MCP variant does not work behind every enterprise auth setup; teams on AWS Bedrock or custom proxies have hit known walls.
• Selection is the unit of work: the server is not a way to dump an entire file into a model, and prompting it that way wastes calls and produces shallow results.

How to design for MCP-friendly output

MCP only ships what the file already contains. A tidy file produces tokenized code; a messy file produces messy code. The single biggest accuracy gain on most teams comes from the design side, not the prompt side - and most of it overlaps with design-system best practices you should be doing anyway.

• Bind every fill, stroke, padding, radius, and text metric to a Variable - the AI cannot quote a token that does not exist. Run Find Untokenized Values before sending a frame to MCP.
• Use real components, not detached groups - get_code_connect_map only matches what is exposed as a component in the library.
• Annotate non-obvious behavior in Dev Mode - the model reads annotations into context.
• Keep the selection focused - one frame at a time outperforms whole-page selections, both for accuracy and for the 20 KB response cap.
• Audit accessibility before code generation, not after - run Contrast Audit so the design the AI is reading is already AA-clean.

Where MCP fits with the rest of your design system

MCP is the live channel into the file; it does not replace the discipline that makes the file worth reading. Variables, semantic tokens, components, dark-mode mode parity, and contrast all exist upstream of the AI. The teams getting the most out of Figma MCP also tend to maintain a real design-to-code parity workflow, where the same token names ship in Figma and in the code, so the AI's output drops in cleanly. The Anthropic MCP introduction and the Figma developer documentation are the most reliable references for the protocol itself; the rest is system hygiene.

Final verdict - Figma MCP

Figma MCP is not a magic design-to-code button - it is the missing channel that lets a general-purpose AI reason about a design the way a senior engineer would, by reading tokens, components, and structure instead of pixels. The output quality scales with the file: a tidy, fully-tokenized file with Code Connect mapped to real components produces production-grade scaffolds; a loose file with hardcoded values produces tokenized noise. Treat MCP as a forcing function for system hygiene, not as a replacement for it, and the design-to-code handoff becomes one of the cleanest parts of the workflow.