Figma to a coding agent: what the MCP server actually sends

Figma's Dev Mode MCP server changed the shape of design handoff. Instead of an agent inferring layout from a flat screenshot, it receives the component tree, variable values and Code Connect mappings as structured data, over the same protocol it uses to read your repository.

It works. The first screen you generate this way is startling. The second and third are where the interesting problem shows up, and it is not the one the setup guides prepare you for.

What the server actually exposes

The server sends a selection, not a file. You pick a frame or component in Figma, and the agent receives a structured description of it: the node hierarchy, the variables bound to each property, and — where you have configured it — the Code Connect mapping that says "this Figma component is <Button> from @acme/ui".

Two setup paths exist, and the choice matters less than the documentation implies:

• The remote server is Figma's recommended option. It connects to a hosted endpoint, needs no desktop app running, and carries the broadest feature set.
• The desktop server runs against the Figma desktop app locally, and exists for organisation and enterprise requirements that keep the file off a hosted endpoint.

Two constraints are worth knowing before you plan around it. It is free during the beta period, and Figma has said it will become a usage-based paid feature — so the current cost is temporary. And only clients in the Figma MCP Catalog can connect at all, which is a shorter list than "anything that speaks MCP".

Connecting your agent

Every client below is in the catalog. The mechanics are the ones described in MCP for designers — a URL and an auth header in a config file, per client.

Claude Code

Add the server with claude mcp add, using the HTTP transport and Figma's endpoint. Confirm it registered with /mcp in a session; the tools appear under the server's name. Because Claude Code reads CLAUDE.md at the start of every session, this is also the natural place for the one-line instruction that tells it when to call Figma rather than guess — see where design rules belong.

Cursor

Cursor reads .cursor/mcp.json at the repository root. Commit it, and every person on the repository gets the same server without a setup message in Slack. Cursor's rule types matter here: an "Apply to Specific Files" rule scoped to your component directory is a good place to say which local components exist, because the Figma server will not tell it.

Codex

Codex takes MCP servers from ~/.codex/config.toml under an [mcp_servers.*] block. It is user-level rather than repository-level, so it follows you across projects and does not travel with the repository.

Replit

Replit is in the catalog and configures MCP servers in .replit. Keep the token in Replit Secrets rather than in the file — the file is committed, the secret store is not.

Lovable — the exception

Lovable is not in Figma's MCP catalog. Its Figma path runs through the Builder.io plugin instead: export the frame from Figma via the plugin, open the result in Lovable, and continue in prompts from there. Auto Layout is not optional on this route — the plugin infers structure from it, and an absolutely-positioned frame produces absolutely-positioned output.

What determines whether the output is any good

The server is a faithful messenger. Almost everything about output quality is decided before it runs.

File hygiene is the whole ball game. Auto Layout, bound variables, real component instances and honest layer names produce clean code. A frame built with nudged rectangles and layers called Group 47 produces code that describes nudged rectangles, because that is what the file contains. The server cannot infer an intent that was never expressed.

Scope the selection. A large or deeply nested selection floods the context window with node data, and the model spends its attention parsing geometry rather than writing code. One frame at a time, not one page.

Code Connect is the highest-leverage thing you can configure. Mapping Figma components to real code components is what turns "generate a button" into "use ours".

Where it still goes wrong

Here is the part the setup guides skip. Even with a well-built file and Code Connect configured, the output tends to come back subtly off-system. monday.com's engineering team described it precisely:

The generated output didn't use the design system components. Colors were hard-coded. Typography overrode the system defaults. CSS was written manually in places where it shouldn't have existed at all. From a distance, the result looked acceptable; from a system perspective, it was a mess.

This is not a bug, and a better model does not fix it. The server's job is to describe a selection accurately, and it does. But a selection is a result, and the agent is being asked to work from it as though it were a rule.

Consider what the agent receives for a button: fill #E8511E, radius 9, padding 12 and 20, label at 14px semibold. All true, all useless as a generalisation. It cannot tell from that data whether #E8511E is your one accent that means "act here" and is banned from body text, or simply the colour this button happens to be. So when it builds the pricing table you never designed — and it will, because that is the next request — it distributes the orange plausibly and wrongly. Orange headings. An orange link. An orange badge.

Code Connect narrows this for components that are mapped. It says nothing about the margin, the tone of the empty-state copy, or the four things you would never ship. Figma's own framing is the honest one: the MCP server cannot know why a design decision was made, because that reasoning was never in the file.

The division that works

Send the design through Figma. Send the rules separately.

The design is what changes per screen: this layout, this hierarchy, these components in this order. Figma's server is the right and best way to move it, and nothing here argues otherwise.

The rules are what stay constant across every screen, including the ones nobody has designed. Which face owns which size and which sizes it is banned from. What the accent is allowed to touch. The spacing scale, the motion duration, the negative constraints. Who the copy is addressed to. As building a colour palette you can defend argues, the rule is the part that generalises — #E8511E is a hex code, but "#E8511E, primary action, never text" survives contact with a component the agent has never seen.

Those rules are structured data too, and they belong in a source the agent reads alongside the Figma selection rather than in a prompt you retype. A few properties are worth insisting on in anything holding them, and which moodspec's endpoint enforces: it is read-only, so a leaked token exposes taste rather than write access; the token is scoped to one canvas rather than an account; and an agent can only ever propose a change through propose_change, which a human approves. The docs are one block of config, and there are setup guides for Claude Code, Cursor and the rest.

The test

Generate a screen from Figma. Then, in the same session, ask the agent for one that does not exist in the file — a settings page, an empty state, an error.

Compare them. If the second is visibly a different product, the handoff moved your design and not your design system. That gap is not going to be closed by selecting a better frame.

Further reading

• Figma MCP server documentation — setup, remote versus desktop, and the beta terms
• Figma MCP Catalog — the definitive list of clients that can connect
• Guide to the Figma MCP server — Figma's own guidance on file preparation and selection scope
• Model Context Protocol — the specification underneath all of it