Figma to code MCP: the agent reads, then writes the code
Figma to code MCP works in two parts. FigmaMCP lets Claude Code or Codex read the design in your open Figma file: layers, variables and a picture. Then the agent writes the code in your project. FigmaMCP does not generate code itself.
What FigmaMCP gives the agent
FigmaMCP does not generate code. It gives your agent two ways to read a design, and the agent writes the code. In a Figma to code MCP setup, that split matters: FigmaMCP reads and your agent writes.
| It needs | Tool | What it gets |
|---|---|---|
| The layer tree | page_info, node_info | Pages, layers, names and types. Ask for only the properties it needs, such as size, fills or text. |
| Text content | node_info with a text filter | The words in every text layer of a frame. |
| Design tokens | variable_list, node_info with boundVariables | Local variables, and the variables a layer is bound to. |
| How it looks | node_export_visual | A PNG or SVG of the layer. |
| Layout | node_info | Auto layout and size properties, when the agent asks for them. |
Download for Mac Version 0.1.10
Figma to code using MCP: the steps
Open the file
Open it in the Figma desktop app. You can paste a link to a layer. The server accepts the layer ID from a Figma URL as it is.
Name the target
Ask for one frame, not the whole file. Say which framework you use and where the code should go.
The agent reads
It reads the layer tree, the tokens and a picture of the frame.
The agent writes
It writes the code in your repo with its own file tools.
You compare
Run the code and compare it with the design. Ask the agent to export the frame again if it needs a second look.
Why read the tokens, not just the picture
A picture shows a blue button. The layer data can show which variable that blue is bound to. Code can then use the variable name instead of a copied hex value. Ask the agent to read the bindings first, and to say when a layer has none. Local variables come from variable_list. Variables from a shared library are read from the layer that uses them.
Figma to code MCP Claude: example requests
| You ask | What the agent does |
|---|---|
| “Build this card as a React component.” | Reads the card, then writes the component file. Your agent picks the structure. |
| “Use our variables for color and spacing.” | Reads the bound variables on each layer and uses their names in the code. |
| “List all text in this screen.” | Reads the text layers, so the copy can go into a file or a translation table. |
| “Show me the frame, then write the CSS.” | Exports a picture first, then writes styles from what it read. |
Figma MCP design to code: what to check
Review the code like a colleague’s work. FigmaMCP does not run or test it. It also does not use Figma’s Dev Mode. For the reverse direction, see code to design. To read variables on their own, see Figma MCP variables. For setup, see Figma MCP setup, and for Claude Code see Figma MCP for Claude Code.
