Figma Dev Mode MCP Server defines what AI sees before generating code

The official Dev Mode MCP Server guide shows that the AI agent only sees tokens, components, and specs that are in the Figma file: whatever is missing there becomes invented code, and that changes what the team needs to validate before merging.

The Figma Help Center published the official Dev Mode MCP Server guide, documenting how AI agents connected via Model Context Protocol (MCP) read Figma files to generate code and, in a less discussed direction, write back to the canvas. The current guide describes a broad scope for the feature: design context extraction, spec reading, live UI capture, and native writing to the file.

For those who live on the bridge between design and engineering, the central point isn't that "AI generates code" (that already existed in standalone plugins). It's that the MCP Server formalizes a single interface between the Figma file and any MCP client, from Cursor to Claude Code to VS Code. What changes is the contract: the agent only sees what is structured in the file as a variable, component, or auto layout. Loose design, without tokens, becomes AI interpretation, not extraction.

How the agent sees the file

The flow described in the guide is link-based, not image-upload-based. The developer right-clicks a frame or layer in Figma Design, chooses Copy link to selection, and pastes that link into the MCP client. The client doesn't open the link: it extracts the node ID that identifies that specific object and uses it to query the server.

From there, the agent can pull four types of context, according to the Help Center:

• Variables and components: design system tokens (color, spacing, typography) and reusable components, for those who work with design-system-based workflows.
• Layout data: auto layout structure, layer hierarchy, and frame properties.
• FigJam resources: content from diagrams and flowcharts, so architecture decisions made during brainstorming reach the code.
• Make resources: Figma Make prototype files, useful in the transition from prototype to production.

This matters because it changes the question the product team needs to ask before approving a PR generated by an agent: it's not "does the code match the design visually," it's "is the design system that fed the agent correct and complete." If a color variable is poorly named or a component has no documented variant, the agent will generate something plausible but wrong, and it will generate it with the same confidence as when it's right.

Code Connect as a consistency layer

The guide points to Code Connect as the piece that prevents generated code from reinventing components that already exist in the repository. Instead of the agent creating a new Button from scratch with every prompt, Code Connect maps the Figma component to the actual component in the codebase, and the agent reuses that reference.

In practice, this shifts the validation work: without Code Connect configured, reviewing an AI-generated PR means checking whether the new component diverges from the existing pattern (different prop name, CSS class outside the design token, missing focus state). With Code Connect kept up to date, that check becomes the responsibility of whoever maintains the mapping, not of whoever reviews each PR individually. It's a trade-off: less recurring rework in exchange for more discipline in maintaining the mapping.

The reverse path: the agent writes to the canvas

The part of the guide that most changes handoff dynamics is writing to the canvas. With the remote server and a Full seat, the agent can create and update frames, components, variables, and auto layout directly in the Figma file, using the team's design system as the source of truth. The feature is free during the beta period and will eventually become a usage-based paid feature.

There's also the path of capturing live UI: the MCP client opens a page in production, staging, or localhost, and turns real interface elements into editable layers in Figma. This serves to bring a flow that already exists in code back into design exploration, useful when the team wants to refine something that was implemented quickly and never went through a formal design review.

This reverse flow creates a new question for whoever handles handoff: if design can be born from code and code can be born from design, who is the source of truth at any given moment? The guide doesn't resolve this, and it's reasonable that it doesn't: the answer depends on each team's process, not on the tool.

Figma Specs: context before the agent starts

Another piece of the guide is the figma-spec skill, which lets the agent read, create, and update the team's specs before generating any code. The idea is that requirements and decisions get recorded in the spec and are captured back into it as the agent works, creating a history of why an implementation decision was made.

Figma Specs is in open beta, and writing to a spec requires the remote server and edit access to the file. For those who translate product requirements into technical specifications, this is relevant: the spec stops being just documentation and becomes structured input that the agent consumes before coding, which means poorly written specs now carry a higher cost, feeding wrong code, not just human confusion.

Two ways to run the server, different requirements

Figma for Government only supports the desktop server, with current limitations on available tools. The list of compatible clients (Cursor, VS Code, Claude Code, Amazon Q, among others) is in Figma's own catalog; for the most up-to-date list, you need to check the Figma MCP catalog directly.

What this changes before the merge

In short: validating a PR generated from the MCP Server stops being just "does the visual match" and starts including whether the source that fed the agent, variables, components, and specs, was correct and complete. This pushes QA work back in the chain: before trusting the generated code, someone needs to trust the design system that originated it.

For accessibility, the guide doesn't mention any automatic check for contrast, focus, or semantics in the code generation flow. This means the agent reproduces exactly what's in the design, including any accessibility flaws that already existed in the Figma file. Running an AI agent over a design without a prior accessibility review doesn't create a new problem, but it automates the reproduction of the old problem at a larger scale.

The case where this isn't worth it is reasonably clear: teams without Code Connect mapped, without a consolidated variable-based design system, and without maintained specs will generate plausible, inconsistent code, trading the work of designing manual handoff for the work of reviewing automated handoff line by line. The MCP Server reduces friction in reading the file; it doesn't replace the discipline of keeping the file correct.

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

Guide to the Figma MCP server – Figma Learn - Help Center

Before you start

Who can use this feature

Starter, Professional, Education, Organization, Government, and Enterprise plans

Requires an MCP client listed in the Figma MCP catalog

The Figma MCP server brings Figma into your AI workflow. It gives AI agents the design context they need to generate code from your Figma files, and lets agents write native Figma content back to the canvas. MCP servers use the Model Context Protocol , a standard interface that lets AI agents interact with data sources.

Note: This guide is a high-level overview of the Figma MCP server. For setup instructions and example prompts, see:

Get started with the Figma MCP server

Figma skills for MCP

Tools and prompts

The Figma MCP collection

What you can do with the Figma MCP server

Let your agent write directly to the canvas in Figma Design, FigJam, and Figma Slides

Create and modify native Figma content from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your files, using your design system as the source of truth.

Note: This feature requires the remote Figma MCP server and a Full seat to write outside your drafts. It's free during the beta period and will eventually become a usage-based paid feature.

Learn more about writing to the canvas

Generate designs from the live UI of your web apps and sites

Turn live UI from your browser (production, staging, or localhost) into editable design layers. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement.

Note: This feature requires the remote Figma MCP server and is supported by select clients.

Learn more about generating designs from your interfaces

Generate code from selected frames

Select a Figma frame and turn it into code. This is useful for product teams building new flows or iterating on app features.

Extract design context

Pull variables, components, and layout data into your IDE. This is especially useful for design systems and component-based workflows.

Retrieve FigJam resources

Use content from your FigJam diagrams in your code generation workflow, so early-stage ideas, flows, and architecture maps carry into development.

Retrieve Make resources

Gather code resources from Make files and provide them to your agent as context. This helps as you move from prototype to production.

Keep generated code consistent with Code Connect

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

Learn more about Code Connect

Give your agent project context with Figma Specs

Use the figma-spec skill to let your agent read, create, and update your team's specs. Share requirements before your agent starts building, and have it capture decisions and discoveries back in the spec as it works.

Note: Figma Specs is in open beta. Writing to a spec requires the remote Figma MCP server and edit access to the file.

Learn more about the figma-spec skill

Write to canvas and code to canvas are continuously being improved. If you run into issues, report them using Fig, our support chatbot , or by emailing support (paid plans) . Note: The MCP server and Figma Agent can access fonts uploaded to your account. Learn how to add a font to Figma. Set up the MCP server You can connect to the Figma MCP server in two ways:

Remote MCP server (recommended) : Connects directly to Figma's hosted endpoint at https://mcp.figma.com/mcp , without the Figma desktop app. The remote server offers the broadest set of features and is the best choice for most users. Learn how to install the remote MCP server.

Desktop MCP server : Runs locally through the Figma desktop app . The desktop server is intended for specific organization and enterprise needs. It requires a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan . Learn how to install the desktop MCP server.

For information about usage and rate limits, see Plans, access, and permissions . Note: Figma for Government supports the desktop server only. See Figma for Government for available tools and current limitations. If you plan to write to the canvas, also install Figma's skills for your MCP client.

Skills help your agent use the write tools more reliably and follow the right workflow when creating or updating content in Figma. Connect the MCP server to your editor Follow the instructions for your editor to connect to the remote or desktop server. Some clients also support skills , which add agent-level instructions that help AI tools work more effectively with Figma designs.

Client Desktop server support Remote server support Write to canvas (remote only) Plugin/skills support

Amazon Q ✓

Amp

Android Studio

Augment Code

Claude Code

Figma plugin

Claude Desktop

Figma connector

ClickUp

Codex by OpenAI

Codex Skills

Copilot CLI

Cursor

Dia

Factory

Firebender

Gemini CLI

Extension

Junie by JetBrains

Kiro

Kiro Powers

Linear

Meta Muse

Mistral

Notion

OpenCode

Openhands

Replit

Sarvam Agents

VS Code

Warp

Xcode

Tip: For the latest list of supported clients, see the Figma MCP catalog . If you're a developer who wants to connect a new MCP client, join the waitlist . About skills Skills tell an agent how to complete specific tasks, combining MCP tool calls with detailed instructions. The Figma MCP server exposes individual tools; skills help agents understand which tools to use, in what order, and how to apply the results. Skills can guide agents through workflows like:

Connecting Figma design components to code components with Code Connect

Generating design system rules aligned to your codebase

Translating designs into production-ready code

Reading and updating Figma Specs, so your agent works from your team's requirements

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

Use skills with the Figma MCP server

Note: Skills are also available from the Figma Community and through community contributions in the Figma community-resources repo on GitHub. Prompt your MCP client Once connected, you can prompt your MCP client to work with a specific design node. For a complete list of tools and example prompts, see Tools and prompts . Example: Get design context Getting design context and code from files is link-based. To get design context:

In Figma Design, right-click the frame or layer you want design context for and select Copy link to selection .

In your MCP client, paste the link and prompt your client to help you implement the design.

Your client won't open the link directly. Instead, it extracts the node ID the MCP server needs to identify which object to return information about. Example: Send UI to Figma Note: Requires the remote Figma MCP server and a supported client. See Connect the MCP server to your editor . You send the live UI of your web app or site to Figma through a conversation with your MCP client:

Prompt your MCP client: "Start a local server for my app and capture the UI in a new Figma file."

Follow the steps your client provides. Your client will open a browser window or give you a link to follow.

Use the capture toolbar to capture pages, elements, and states of your web app or site.

Tell your client when you're finished. Your client will give you a link to the new Figma file.