Figma to code with MCP: how an agent reads your design

The Figma MCP server lets an AI agent read frames, variables and components from Figma to write code. How to connect it, prepare your file and its limits.

info Quick Definition

Figma MCP is a Model Context Protocol server that gives an AI agent structured access to your Figma files. With it, the agent can read a frame, its variables and its components, and use them as the basis for writing code. The result is design context the agent must translate to your project, not final code.

What is MCP and what role does Figma play here?

According to its official site, MCP (Model Context Protocol) is an open standard for connecting AI applications to external systems, comparable to a USB-C port: one common way to plug in very different things. To understand the protocol in depth, read MCP explained for designers; to see what else you can connect, useful MCP servers for designers. Here we stay with the concrete Figma-to-code flow.

The server belongs to Figma and exposes tools with concrete names. The main read tools are get_design_context (context and code for a selection), get_metadata (a lightweight XML outline), get_screenshot, get_variable_defs (variables and styles in use) and search_design_system (searches your libraries for components, variables and styles). Instead of copying values by hand from Dev Mode, the agent asks Figma about the frame and receives structure, styles and variables.

How do I prepare my file so the agent understands it?

Your work changes: your names, layers, auto layout and variables are now read by a machine. If a component is called “Frame 1268” or your colors are loose values, the agent has to guess. Figma’s guide to structuring files recommends:

Components for anything that repeats (buttons, cards, inputs, nav items), so the agent reuses a single implementation.
Variables for spacing, color, corner radius and typography, so it uses your tokens instead of hardcoded values. For a refresher, see variables vs styles and token architecture.
Descriptive names on layers and components, instead of “Frame1268” or “Group5”.
Auto layout, which avoids absolute positioning and tends to produce cleaner, more predictable code. Before generating, resize the frame to check it behaves.
Annotations for what cannot be seen, such as how an element should align or respond.
Code Connect, Figma’s feature that links design components to components in your codebase. The guide calls it the most effective way to get the agent to reuse your real components; without it, the agent has to guess which one matches.

All of this rests on a design system with well-named components.

How do you connect it and what is the workflow?

According to Figma’s documentation, there are two paths for Claude Code:

Official plugin: claude plugin install figma@claude-plugins-official. It installs the connection and also Figma’s skills. Then restart Claude Code, open /plugin, pick figma in the Installed tab and authorize access in the browser.
Manual: claude mcp add --transport http figma https://mcp.figma.com/mcp. It does not install the skills. Start a new session, type /mcp, choose figma, select Authenticate and authorize in the browser. With --scope user it is available in all your projects; without it, only in the current one.

Once connected, a sensible flow, following Figma’s sample rules, is:

Copy the link to a frame or component from Figma. With the remote server, your prompt must include that link.
If the design is large, ask for get_metadata first: Figma recommends it because get_design_context can return too much at once.
Ask for get_design_context only on the part you are going to build.
Take a screenshot with get_screenshot as a visual reference.
Implement by translating the output into your project’s conventions, and validate against Figma before calling the work done.

Figma also offers the create_design_system_rules prompt, which drafts a rules file from your codebase so the agent follows your conventions.

What changes between the remote and the desktop server?

	Remote server	Desktop server
Address	`https://mcp.figma.com/mcp`	`http://127.0.0.1:3845/mcp`
Desktop app	Not needed	Yes, up to date, with a design file in Dev Mode
Prompt with your current selection	No: you must paste the frame link	Yes
Write to the canvas	Yes	No
Tools	All, including remote-only ones (such as `search_design_system`)	Those not marked remote-only
Seat and plan	Writing outside your drafts needs a Full seat	Dev or Full seat on Professional, Education, Organization, Government or Enterprise

Writing to the canvas is in beta, free during that period, and Figma says it will eventually become a usage-based paid feature; the FAQ also warns that its output is beta quality and may need review.

Read limits depend on plan and seat. Figma’s page, checked on November 4, 2026, lists for Dev or Full seats 200 calls per day and 10 per minute on Professional, 200 per day and 15 per minute on Organization, and 600 per day and 20 per minute on Enterprise. View or Collab seats get 20 calls per month, and Education gets the same limits as Professional. Prices and limits change: confirm the official page before planning.

When should you NOT use it?

When the design has no structure: unnamed layers, no auto layout and no components. The code that comes out is hard to maintain.
When you expect a result identical to the design with no human review. Figma says it plainly: this is not a one-click way to finished code.
When the project has no design system or tokens. Without them, the agent creates new components instead of reusing existing ones.
When you only have a View or Collab seat and need many queries: 20 a month run out fast.

Example

Illustrative example: a designer has a sign-up form in Figma with four fields, a primary button and error messages. She connects the remote server to Claude Code and writes: “Use get_design_context on this link and build the form with the components in src/components. Reuse Button and TextField if they exist. Generate in my project’s framework, not React with Tailwind.” The agent reads the context, takes a screenshot and looks at the project code. Because the Figma button is linked to Button through Code Connect, it reuses it; the fields had no link, so it proposes a new one. The designer compares the result with the screenshot and notes the spacing differences.

The value is in the review step, not in the generation: without comparing against the design you do not know whether the code respects it.

Common mistakes

Asking for “make it look like Figma” without passing the exact link to the frame or component.
Using get_design_context on a whole page. Start with a component, a section, or get_metadata.
Trusting the code without reviewing accessibility, focus states and responsive behavior. Figma shows one state; your product needs all of them.
Not naming the framework and getting React and Tailwind by default even if your project uses something else.
Expecting the agent to know your conventions without sharing them: Figma states it only knows them if you provide them through Code Connect, variables, rules or your prompt.
Treating the result as production code.

Sources

Frequently asked questions

What is the Figma MCP server?

It is a Model Context Protocol server from Figma that lets an AI client, such as Claude Code, read design context from Figma (code, metadata, screenshots, variables) and, with the remote server, write content to the canvas.

Does Figma MCP generate production-ready code?

No. Figma’s FAQ says its job is to give your agent design context, not production-ready code; the agent writes the final code. By default the output of get_design_context uses React and Tailwind, but you can ask for another framework in your prompt.

How do I connect Figma MCP to Claude Code?

Use the official plugin (claude plugin install figma@claude-plugins-official) or add it by hand with claude mcp add –transport http figma https://mcp.figma.com/mcp. Then authorize access in the browser from /plugin or /mcp, depending on the route you chose.

Do I need the Figma desktop app to use the server?

No. The remote server does not need it, and it is the one Figma recommends. The desktop server does require the app and a Dev or Full seat, but it is the only one where a prompt can use your current selection.

Are there usage limits?

Yes. According to Figma’s page checked on November 4, 2026, Dev or Full seats get 200 calls per day on Professional and Organization and 600 on Enterprise; View or Collab seats get 20 per month. The limits apply to tools that read data from Figma.