Figma's Dev Mode MCP Server lets Claude, Cursor, and Copilot read design files directly

Figma's MCP server, currently in free beta, exposes variables, components, and layout data from design files to AI agents inside the code editor. The promise is to end manual handoff, but the result depends on how well the design system is named and governed.

Editor's note: this article was built from Figma's official documentation (Help Center) on the Dev Mode MCP Server, without independent testing of the features described by the editorial team. Details such as the limits of the future usage-based billing model and permission controls when multiple agents write to the same file have not yet been disclosed by Figma, and claims about productivity gains reflect the vendor's own positioning.

Figma's MCP server, currently in free beta, exposes variables, components, and layout data from design files to AI agents inside the code editor. The promise is to end manual handoff, but the result depends on how well the design system is named and governed.

Figma's MCP server, currently in free beta, exposes variables, components, and layout data from design files to AI agents inside the code editor. The promise is to end manual handoff, but the result depends on how well the design system is named and governed.

Figma maintains, in its Help Center, an official guide to the Dev Mode MCP Server: a server that implements the Model Context Protocol and lets AI agents access Figma Design, FigJam, and Figma Make files directly from inside the code editor. There's no longer a need to export specs, copy hex color values, or take a screenshot of a component for Claude Code to understand what was designed: the agent reads the file.

The feature has been available since the free beta phase, according to the documentation. Figma itself warns that, in the future, it will become a usage-based paid feature, but for now it is free for anyone with access to the server. It's worth separating the two modes: the remote server, hosted at mcp.figma.com/mcp, is available to all seats and plans; the desktop server, which runs locally via the Figma app, requires a Dev or Full seat on all paid plans.

What the server exposes, in practice

Figma's MCP Server isn't a single channel: it's a collection of tools that the agent invokes depending on the request. The guide lists five core capabilities, each with a different scope of access to design data.

• Generate code from selected frames: the developer picks a frame in Figma, copies the node link, and asks the agent to implement that specific piece.
• Extract design context: variables, components, and layout data go straight into the IDE, useful mainly in design-system-based workflows.
• Retrieve FigJam assets: diagrams, flows, and architecture maps come in as code context, without the developer having to describe the flowchart in text.
• Retrieve Figma Make assets: prototype artifacts made in Make become context for the LLM, making the handoff from prototype to production application easier.
• Write back to the canvas: with the remote server, the agent can create and update frames, components, variables, and auto layout directly in the Figma file, using the existing design system as the source of truth.

This last capability, writing to the canvas, reverses the traditional flow. Instead of only reading the design to generate code, the agent can also change the design file from a natural-language prompt, which raises a new governance question: who reviews what the AI wrote back into the source file.

Live UI capture: the reverse path

Besides reading design to generate code, the remote server allows the opposite path: capturing the rendered interface of an app in production, staging, or localhost and turning it into editable layers inside a Figma Design file. The flow described in the guide is conversational. The developer asks the MCP client (for example, in Cursor) to "start a local server for the app and capture the UI in a new Figma file," the agent opens a browser window or provides a link, and a capture toolbar lets you select specific pages, elements, and states of the interface.

This feature solves a recurring problem in product squads: the divergence between what Figma shows and what is actually in production after weeks of fine-tuning done only in code. Capturing the live UI and bringing it back into Figma closes this alignment loop, but for now it's restricted to specific MCP clients, not the entire supported catalog.

Not every MCP client has the same level of access

The guide includes a compatibility table that is, in practice, more important than it seems at first glance. It lists a wide range of clients, such as Amazon Q, Android Studio, Augment Code, Claude Code, Claude Desktop, Codex, Copilot CLI, Cursor, Factory, Firebender, Gemini CLI, Kiro, Openhands, Replit, VS Code, Warp, and Xcode, but support for the desktop server, remote server, canvas writing, and skills varies from client to client. Before promising a squad that "the AI will generate the component directly in Figma," it's worth checking the official MCP Catalog to see whether the chosen client supports that writing, because not every client does.

Skills, in this context, are a Figma-specific concept: instruction packages that tell the agent which MCP tool to use, in what order, and how to apply the result. They don't add new capability to the protocol, only reduce trial and error. The guide cites as examples of skill-guided workflows the connection of Figma components to code components via Code Connect, the generation of design-system rules aligned with the codebase, and the translation of designs into production-ready code.

Why this puts pressure on naming and token governance

Here's the point that matters to whoever decides the design system's architecture, not just to whoever presses the shortcut in the editor. When an AI agent reads "variables, components, and layout data straight from the file," it is reading exactly the names the design team gave to each token, each component, each property. A token named cor-primaria-botao carries intent; a token named Color/Blue/500 carries a value with no semantic context at all.

The guide explicitly mentions that the quality of the generated code improves when Code Connect keeps Figma components synced with the actual code components, allowing the agent to "reuse real components" instead of recreating something similar from scratch. This means that naming discipline is no longer just aesthetics or a good internal organization practice: it has become a direct input into the quality of AI-generated code. A poorly named, ambiguous, or duplicated variable across two different files now propagates errors directly into the implementation, with no human in the middle to catch the inconsistency beforehand.

In short: squads that already treat the design system as a product, with a documented naming convention and maintained Code Connect, tend to reap the MCP Server as a real speed gain. Squads that still have Figma files with loose, duplicated, or inconsistently named tokens will feel this problem amplified, because now it's the AI, not an experienced developer who knows the project's history, that interprets those names.

What remains open

Figma itself warns, in more than one part of the guide, that the canvas-writing feature "is under continuous improvement" and that issues should be reported via the Fig support chatbot or by email (for paid plans). This is a sign that the two-way writing layer, the most ambitious of the listed capabilities, doesn't yet have the same maturity as simple design-context reading.

The published material also doesn't detail usage limits for when the usage-based billing model takes effect, nor how permission control will work when multiple agents from different squads write to the same shared design file. For anyone evaluating adopting the server now, the practical recommendation is to test the reading flows first (generating code from a frame, extracting variables) before enabling canvas writing on production design-system files.

Source

Official guide to the Dev Mode MCP Server (Figma Help Center): https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server.