Figma's Dev Mode MCP Server connects generative AI to your design system

The problem is familiar to any squad that has ever asked an AI to "turn this Figma screen into code": the model delivers something that looks right, but with invented component names, hardcoded tokens (#4A90E2 instead of color.primary), and a variant="big" prop that never existed in the design system. The result is a Frankenstein that's visually close but structurally useless, because it ignores everything the team built to maintain consistency.

Figma's Dev Mode MCP Server tackles exactly this gap. According to the official guide on the Help Center, it exposes Figma content through the Model Context Protocol, the standard that lets AI agents talk to external data sources. In practice, it's the bridge between the design system living in Figma and the agent writing code in your editor.

What MCP is and why it changes the game

MCP (Model Context Protocol) is a standardized interface for AI agents to access data. Instead of the model "guessing" a screen's structure from a screenshot or a snippet of description, the MCP server delivers structured context: the variables, components, layout data, and auto layout that make up that node in the file.

The difference is the source of truth. Without MCP, the design system is, at best, a reference the dev pastes into the prompt. With the MCP Server turned on, the agent pulls directly from Figma which components exist, which tokens are defined, and how the layout is organized. It's the difference between asking someone to copy a screen by looking at it from afar and handing that person the source file.

How to connect in the editor your squad already uses

Figma offers two ways to connect, with clear trade-offs:

| Mode | Endpoint | Recommended use | |---|---|---| | Remote (preferred) | https://mcp.figma.com/mcp | Broadest set of features, including canvas writing | | Desktop | runs locally via the Figma app | Specific organization and enterprise cases |

The remote server is available on all plans and seats; the desktop version requires a Dev or Full seat on paid plans. On the client side, the list of supported editors is long and covers what Brazilian teams actually use:

• Cursor, VS Code, Claude Code, Windsurf (via catalog), Codex, Gemini CLI, Warp, Kiro, among others.

It's worth noting an important column in the guide's table: write to canvas only works on the remote server and only in some clients, such as Cursor, Claude Code, VS Code, Codex, and Copilot CLI. In other words, generating code from a design is widely supported; letting the agent create and modify frames, components, and variables inside Figma is a more restricted feature still in beta.

The concrete flow: link-based, not screenshot-based

Extracting design context is link-based, and that detail matters. The path proposed in the guide is straightforward:

1. In Figma Design, select the desired layer or frame.
2. Right-click and choose Copy link to selection.
3. Paste the URL into the MCP client and ask it to implement the design.

The agent doesn't navigate to the URL. It extracts the node ID from it, the identifier the MCP Server uses to know exactly which object to describe. That's why the result tends to be more faithful: the model isn't interpreting a rendered image, it's reading the node's definition.

Code Connect: the piece that prevents invented props

This is the piece that solves the props Frankenstein. Code Connect maps Figma components to the real components in your codebase. With it set up, when the agent finds a button in the design, it doesn't generate a generic with improvised classes: it reuses your , with the props that actually exist in the repository.

In the material's own words:

Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

>

-- Figma Help Center, Guide to the Dev Mode MCP Server

Without Code Connect, MCP still delivers variables and layout, but the binding to code components is left to the model's inference, which is exactly where ghost props are born. For a mature design system, setting up Code Connect is what separates "code that compiles" from "code that passes code review."

Skills: reducing the agent's guesswork

The guide also introduces Skills, instructions that guide the agent on which MCP tools to use, in what order, and how to apply the result. They don't add new capabilities or replace the MCP connection; they package recommended workflows. One example cited is generating design system rules aligned with the codebase, or translating designs into production-ready code. It's a way to reduce setup and guesswork, especially useful for standardizing how the whole squad interacts with the server.

Beyond generating code: capturing live UI

A less obvious feature, one that reverses the flow, is sending live UI to Figma. Through conversation with the MCP client, you can ask for something like "spin up a local server for my app and capture the UI in a new Figma file." The client opens the browser, offers a capture bar to grab pages, elements, and states, and returns a link to the generated Figma file with editable layers.

In this author's reading, this is interesting for teams whose code is ahead of the design (the classic "Figma never reflects what's in production"): you can bring the real interface back into the design as editable layers, useful for alignment and refinement. The feature depends on the remote server and only works with select clients.

When the MCP Server isn't worth it

Adopting it isn't free, neither in effort nor in risk. Some scenarios where it's worth holding off:

• Immature or nonexistent design system. If there aren't well-defined components or variables (tokens) in Figma, MCP will deliver poor context, and the AI goes back to inventing things. The tool amplifies a good system; it doesn't create one from scratch.
• No Code Connect set up. Pulling variables and layout helps, but without the Figma-component-to-code-component binding, the fidelity gain drops significantly in large codebases.
• Beta and future billing. Figma is explicit: canvas writing and agent support will eventually be a pay-per-use feature, currently free during the beta. Building a critical workflow on top of something "continuously being improved" that will change pricing calls for caution.
• Accessibility doesn't come for free. And here's a warning that isn't in the guide: MCP delivers visual structure and components, but fidelity to the design system doesn't guarantee aria-label, correct focus order, or validated contrast. If these criteria aren't built into your code components (via Code Connect), the AI won't invent them. Accessibility remains part of the definition of done, and human review is still mandatory.

For the Brazilian squad already living in Cursor or Claude Code with an organized design system, the MCP Server is a concrete upgrade in output quality. For those who still have their design system half-built, the honest takeaway is: get your house in order in Figma first, because the AI is only as good as the context you're able to give it.