Figma Dev Mode MCP Server lets code agents read the design file directly, skipping manual handoff

The Dev Mode MCP Server from Figma exposes frames, variables and components to the developer's code editor. The promise is to kill the mismatch between prototype and implementation, but what it doesn't see in the file matters as much as what it does.

The problem MCP tries to solve

Anyone who has bridged design and engineering knows the ritual: the designer finishes the prototype in Figma, exports specs, writes comments explaining spacing and hover states, and hopes the developer won't have to guess the rest. The industry usually calls this bottleneck handoff, and that's exactly what the Dev Mode MCP Server targets, according to Figma's official documentation on the feature.

MCP stands for Model Context Protocol, an open standard that lets AI agents communicate with external data sources in a structured way. Figma's server implements this protocol to expose the content of a design file (frames, components, variables, layout) to any compatible MCP client, from Cursor to Claude Code, including VS Code and Android Studio.

How the workflow works in practice

Access is link-based, not a free search through the file. The developer opens Figma Design, right-clicks the frame or layer they want to implement, and selects "Copy link to selection." That link is pasted into the MCP client's prompt, which doesn't open the URL directly: it extracts the node ID the server uses to identify which object to return.

There are two connection modes, with differences that affect who can use what:

• Remote server (recommended by Figma itself): connects directly to the endpoint hosted at mcp.figma.com/mcp, without needing the desktop app, and concentrates the broadest set of features.
• Desktop server: runs locally through the Figma app and requires a Dev or Full seat on Professional, Education, Organization, Government or Enterprise plans, geared toward specific organizational needs.

Government accounts use a separate endpoint (mcp.figma-gov.com/mcp) and have a different toolset than commercial Figma, according to the documentation.

What the agent can do

The list of capabilities goes beyond "generating code from a frame." The guide describes six use cases:

1. Generate code from selected frames, useful for product teams building new flows or iterating on an existing feature.
2. Extract design context: variables, components and layout data directly in the code editor, especially valuable for teams working with design systems.
3. Write back to the canvas: the agent creates and updates frames, components, variables and auto layout in Figma Design, FigJam or Figma Slides, using the design system as the source of truth. This feature requires a remote server and a Full seat to write outside one's own drafts.
4. Generate design from live UI: capture pages, elements or entire flows from an app in production, staging or localhost and turn them into editable layers in Figma, available only in select clients.
5. Retrieve assets from FigJam and Figma Make, bringing ideation diagrams and code prototypes into the implementation workflow.
6. Keep consistency with Code Connect, mapping generated components to the team's real source-code components.

In short: the MCP Server isn't just a specs reader, it's a two-way street between canvas and code, with write-back still in an early stage and subject to plan restrictions.

Skills, Code Connect and Figma Specs: the part that avoids mess

Exposing the file's data is only half the job. Without guidance, an agent can misread a design system component and generate code that diverges from what the team actually uses. That's what Figma's skills are for: they combine calls to MCP tools with detailed instructions on when and how to use them.

Skills don't replace the MCP connection or add new capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.

Figma's official documentation, Dev Mode MCP Server guide

Code Connect acts as a layer of truth: instead of the agent inventing a component structure from scratch, it reuses the real component from the codebase, keeping generated code aligned with what's already in production. The figma-spec skill, in turn, lets the agent read, create and update the team's specs, so that requirements are shared before the agent starts building, and decisions made during the work flow back into the document. The feature is in open beta, and writing to a spec requires a remote server and edit access to the file.

What the MCP Server doesn't solve

The documentation details well what the server exposes: variables, components, layout, FigJam content, Make assets. What it doesn't promise is semantic accessibility context. Variables and auto layout don't equate to screen-reader reading order, ARIA labels or image alt text, because those attributes don't always exist as structured metadata within the Figma file itself.

This is my own reading, not a claim from the source: an agent that generates code from a frame tends to faithfully reproduce the visual hierarchy and design tokens, but the responsibility for checking contrast, keyboard focus and HTML semantics remains human, because Figma doesn't store that information as first-class data in the file. Treating MCP output as production-ready code, without that check, reintroduces through the automated canvas the same accessibility risk that already existed in manual handoff.

Who it's worth it for and today's limits

The canvas write feature is free during the beta period, but Figma itself warns it will "eventually become a paid, usage-based feature." Generating design from live UI requires a remote server and is available only in select clients, according to the documentation, which doesn't mention pricing for this specific feature. That changes the cost calculus for teams considering adopting the canvas write workflow as a permanent part of the process, not a one-off experiment.

Support varies by MCP client: Figma's compatibility table lists dozens of integrations (Cursor, Claude Code, VS Code, Android Studio, Gemini CLI, among others), but not all of them support desktop server, remote server, canvas write and skills at the same time. Before promising the full workflow to the team, it's worth checking Figma's official MCP client catalog, because the combination of available features changes from tool to tool.

For those bridging design and engineering, the real gain isn't eliminating the conversation between the two areas, it's eliminating the bureaucratic part of it: copying spacing values, guessing variable names, manually rewriting what already exists structured in the file. The part that requires human judgment, readability, accessibility, interaction coherence, remains outside what the protocol promises to deliver.