Figma's Dev Mode MCP Server lets AI agents read variables and components directly from the file

Figma published a detailed guide in its Help Center about the Dev Mode MCP Server, the channel that connects AI agents directly to design files. The core idea is simple to state and complex to operate: instead of the agent "guessing" how to implement a screen from a screenshot or a loose description, it reads the actual structure of the Figma file (variables, components, auto layout) and uses that as context to generate code, always starting from a link to a specific frame or layer.

MCP (Model Context Protocol) is the standard that enables this exchange. Instead of each AI tool inventing its own integration with Figma, the protocol defines a common interface for agents to query external data sources. Figma's server implements this standard by exposing the design file as a context source that any compatible MCP client, listed in the official catalog, can query.

Two ways to connect, with different consequences

The guide distinguishes two installation paths, and the choice isn't just technical, it's about permissions and feature surface.

• Remote server (recommended): connects directly to the endpoint hosted by Figma (mcp.figma.com/mcp), without needing the desktop app. According to the Help Center, it offers "the broadest set of features" and is the recommended choice for most users.
• Desktop server: runs locally through the Figma desktop app and is aimed at specific organization and enterprise needs. It requires a Dev or Full seat on Professional, Education, Organization, Government, or Enterprise plans.

Government accounts use their own endpoint (mcp.figma-gov.com/mcp) and have a different toolset from commercial Figma, with limited parity in plugins and skills. This matters for anyone evaluating adoption in a regulated context: you can't assume that everything that works in commercial Figma is available there.

What the agent can do in the file

The list of MCP server capabilities goes beyond "generating code for a screen." The guide describes five use cases, each with a distinct application scenario:

1. Writing directly on the canvas: with the right skills, the agent creates and updates frames, components, variables, and auto layout within the Figma file, using the existing design system as the source of truth. This kind of writing outside one's own drafts requires the remote server and a Full seat; it's free during the beta period and, according to Figma itself, will become a pay-per-use feature.
2. Generating design from live UI: captures pages, elements, or entire flows from an app running in production, staging, or localhost and turns them into editable layers in Figma Design. It's the reverse of the traditional flow: instead of design turning into code, code turns into design for exploration and alignment.
3. Generating code from selected frames: the most direct use case, useful for product teams iterating on flows that have already been designed.
4. Extracting design context: pulling variables, components, and layout data into the IDE, especially relevant in design system and component workflows.
5. Pulling in resources from FigJam and Make: bringing diagrams and ideation flows from FigJam, or prototyping files from Make, into the code context, carrying early-stage decisions through to implementation.

In practice, this means a team can ask the agent: "copy the link to this selection and implement this component," and the MCP server translates that link into a node ID that the server uses to fetch the object's structural information, not a static screenshot of the screen.

Code Connect as a consistency check

The most relevant point for anyone maintaining a design system is Code Connect. According to the guide, it "improves output quality by reusing real components," keeping the generated code aligned with the existing codebase instead of reinventing a component that looks similar but is structurally divergent.

This is what separates an AI-generated prototype from a component that actually goes into production without generating technical debt. Without Code Connect, the agent reads the frame's geometry and tries to infer which code component looks most like it; with Code Connect, it knows precisely which real component to use. It's worth noting that Figma for Government only supports the Code Connect CLI, without the visual interface.

Where human curation remains mandatory

Here's the limit that the announcement's technical angle doesn't solve on its own: the MCP server reads what's in the file, but it doesn't decide whether what's in the file is a healthy design system. Poorly named variables, duplicate components, inconsistent auto layout across screens, all of that becomes bad context that the agent inherits and replicates at scale.

In short: the server is only as good as the discipline of whoever maintains the component and variable library in Figma. This reinforces, rather than replaces, the design system governance work that was already necessary before AI entered the equation.

The "figma-spec skill" feature tries to tackle part of this problem from another angle: letting the agent read, create, and update the team's specs, sharing requirements before the agent starts building and logging decisions in the spec itself as the work progresses. It's in open beta, and writing to a spec requires the remote server and edit access to the file. It's an attempt to give the agent product context, not just visual context, but it still depends on someone writing at least minimally structured specs for it to work.

What changes in the workflow for existing Figma users

For design and engineering teams already working with Dev Mode, the practical change is that the bridge stops being manual: instead of the developer opening Figma, inspecting spacing and color values, and copying that into the editor, the AI agent does this reading via the protocol, right in the prompt flow. Skills, which are instruction packages that combine MCP tool calls with recommended steps, exist precisely to reduce the chance of the agent using the wrong tool or skipping a step in the expected flow.

The guide makes clear, however, that "skills don't replace the MCP connection or add new capabilities"; they only package recommended flows. Anyone adopting this on a team needs, then, three things in place at once: a design system clean enough to serve as a source of truth, Code Connect configured for the components that actually matter, and an MCP client from the supported list, since the compatibility table in Figma's catalog still treats features like canvas writing and skills as partial support, client by client.