Figma's Dev Mode MCP Server connects approved AI agents to the design file
Figma's official documentation details the Dev Mode MCP Server, which delivers variables, components, and layout for AI agents to generate code. The promise only holds if the design system behind the file is well organized.
Figma published a dedicated guide in its developer documentation for the Dev Mode MCP Server, a server that exposes design files to AI agents using the Model Context Protocol (MCP), the open standard that connects language models to external data sources. In practice, this means that an AI agent running in an approved MCP client can query a Figma file before generating code, instead of relying only on what the developer describes in text.
The proposal tackles an old problem in the bridge between design and engineering: the AI agent that generates UI from a prompt usually invents spacing, color, and component names, because it has never seen the actual file. With the MCP server, the context comes straight from the source.
What the server delivers today
According to Figma's documentation, the Dev Mode MCP Server enables five main capabilities:
- Write to the canvas: the agent creates and modifies native Figma content (frames, components, variables, auto layout) using the team's design system as the source of truth.
- Generate code from selected frames: the developer selects a frame in Figma and asks the agent to turn it into code, useful for iterating on screens that are already designed.
- Extract design context: variables, components, and layout data go straight into the code editor, which Figma points out as especially useful for design systems and component-based workflows.
- Retrieve Figma Make assets: the server also fetches code assets from files made in Make, to help the transition from prototype to production application.
- Keep consistency with Code Connect: by mapping Figma components to real components in the code, Code Connect ensures that the generated code reuses the pieces the team already has, instead of recreating a button from scratch.
This last capability is what most sets the MCP server apart from a simple 'take a screenshot and describe it.' Without Code Connect, the agent knows a button exists with a certain border radius and padding; with Code Connect, it knows that button IS the Button that already exists in src/components/Button.tsx, and generates the correct import instead of duplicating the style.
Remote or desktop: how to connect
Figma recommends the remote server as the first choice. It connects directly to the endpoint hosted by Figma, without requiring the desktop app to be installed, and offers the most complete set of features. Installation follows the steps described on the remote server's installation page, cited in the documentation itself.
There is also a desktop version, which runs locally and addresses specific needs of organizations and enterprises. Figma for Government, for example, only supports the desktop version, with tool limitations that the documentation lists separately. For those without that requirement, the official guidance is clear: start with remote.
If the workflow involves writing back into Figma, turning on the server is not enough. The guide also recommends installing Figma's "skills" for the MCP client being used, which help the agent use the write tools reliably and follow the correct flow when creating or updating content in the file.
Not every AI client gets in
A restriction that goes unnoticed on first read: only clients listed in Figma's MCP catalog can connect to the server. It is not an open API for any tool that speaks the MCP protocol. Developers of new clients interested in integrating need to join a waitlist with Figma.
In practice, this means that before integrating an AI agent into this flow, it's worth checking Figma's official catalog to confirm whether the chosen client is on the list of accepted clients, instead of assuming that any AI assistant automatically has access to the server.
Where this breaks: a disorganized design system
Here comes the point the documentation doesn't spell out explicitly, but that follows directly from how the tool works: the MCP server doesn't create order, it exposes the order (or the mess) that already exists in the file.
If color variables are named Color 1, Color 2, Dark blue (copy), the agent receives exactly those names as context and propagates them into the generated code. The same goes for components: a button duplicated three times with small variations, without becoming a variant of a single component, turns into three different implementations in the code, because the agent has no way of knowing they should be the same thing.
In short: the Dev Mode MCP Server widens the gap between teams with a mature design system and teams without one, instead of narrowing it. Those who already have tokens named by function (not by value), components with well-defined variants, and Code Connect mapped get consistent code generation. Those who don't get the same mess, just automated faster.
| Design system situation | Result with the MCP server |
|---|---|
| Tokens named by function, few duplicates | Generated code uses the right variables, little manual correction |
| Components with clear variants and Code Connect mapped | Agent reuses real components from the code, doesn't recreate |
| Generic names, duplicated components, no Code Connect | Context arrives poor, agent propagates the inconsistency |
This changes the work of whoever maintains the design system: documenting naming conventions and keeping Code Connect up to date stops being an optional best practice and becomes a technical prerequisite for the integration to work.
What the documentation doesn't cover: accessibility annotations
This piece expected to find, in the Dev Mode MCP Server guide, a mention of extracting accessibility annotations, the Figma feature where designers mark reading order, intended ARIA labels, and expected contrast directly in the file. The official documentation consulted doesn't list that extraction among the server's capabilities: what it explicitly describes is the extraction of variables, components, and layout data.
This is a relevant gap for those who work with inclusive design. If the AI agent generates code from the frame but doesn't receive the accessibility annotation the designer left right there, the generated code reproduces the visual structure without reproducing the semantics the design team intended. Until Figma officially confirms this capability, teams that depend on accessibility annotations to correctly generate semantic HTML should treat this step as mandatory manual review, not something the MCP server solves on its own.
For those deciding to adopt it now
The path recommended by the documentation starts with the remote server, not the desktop one, and requires installing the skills for the chosen MCP client before trusting write flows on the canvas. Before that, it's worth auditing variable naming and Code Connect mapping: it's this behind-the-scenes work, not the server configuration itself, that determines whether the generated code comes out usable or turns into one more PR to undo.
Source: Figma Developers, Guide to the Dev Mode MCP Server (https://developers.figma.com/docs/figma-mcp-server/)
Translated from the Brazilian Portuguese original · Read the original
How Meta designed Muse to not feel like an AI app
In an interview with the How I AI podcast, Muse's design director explains why he avoided the AI-assistant aesthetic and built an interface that serves the same screen to his mother and to an engineer.
