Figma To Code MCP: from Figma layout to code
Figma To Code MCP
Figma to code over MCP: the server gives the agent a layout as compact YAML with CSS property names, resolved variables and SVG exported to disk
- 7 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- A personal Figma token opens read access to your files and libraries, so keep it in an environment variable
- The server calls the Figma API and writes SVG files to the chosen folder on disk
Install
- Works in
Manual install
{"mcpServers": {"Figma To Code MCP": {"command": "npx", "args": ["-y", "@tmegit/figma-to-code-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]}}}The config for macOS and Linux. On Windows the command runs through cmd /c. The token can be passed in the FIGMA_API_KEY variable.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- A personal Figma token opens read access to your files and libraries, so keep it in an environment variable
- The server calls the Figma API and writes SVG files to the chosen folder on disk
This is third-party code. Review the repository files before installing.
What it does
Figma To Code MCP turns a Figma layout into code. You paste a link to a file, frame or group into the chat of Cursor or another agent and ask it to implement the design. The server queries the Figma API and hands the agent a compact interface description: colors, fonts, spacing, effects and text. Figma's internal metadata is left out. Property names come from CSS (`backgroundColor`, `flexDirection`, `fontSize`), styles sit inline in the nodes, and layout is described with flexbox primitives with no absolute positioning. Figma variables are resolved to real values, and repeating interface patterns are collapsed. The author gives an example of a real file shrinking from 65 MB to 128 KB. There are four tools: `get_figma_design` returns the design description and can export SVG to a chosen folder, `get_image_fills` fetches image fill URLs, `render_node_images` renders nodes as PNG and `read_vector_svg` reads a vector node as SVG. The default output format is YAML, and the `--json` flag switches to JSON.
Who it is for. For frontend developers who build from Figma layouts with an agent in Cursor or Claude Code and want to save context when parsing a large file.
Good fit when
- You need to build a screen from a Figma frame link and the raw Figma API response does not fit the agent's context
- The layout is built on Figma variables and the agent needs their resolved values for color and spacing tokens
- You need to export vector icons from the layout into SVG files in the project folder
- You need image fills or nodes rendered to PNG to place into the markup
Not a fit when
- You need to write to Figma, change a layout or create components: the server only reads data
- You need two-way work with design systems and Figma libraries: figma-console-mcp fits that
- You have no personal Figma token: the server will not start without it
- The Figma file is unreachable over the network, for example because of plan limits or Figma API rate limits
Example request
Here is a link to a Figma frame. Build this screen in React and Tailwind, taking color and spacing values from the layout variablesMCP
- Transport
- stdio, http
- Authentication
- API key
Environment variables
FIGMA_API_KEYrequired, secret- A personal Figma token with the file_content:read and library_content:read scopes.
FIGMA_SVG_OUTPUT_DIR- Folder for exported SVG, a temp directory by default.
Limitations
It needs Node.js 18 or newer and a personal Figma token with the `file_content:read` and `library_content:read` scopes. The `file_variables:read` scope reads variables and is available only on the Enterprise plan. Without Enterprise, switch off variable resolution with `resolveVariables: false`.
One `get_figma_design` call makes several Figma API requests: nodes, styles, local variables and libraries. On the Professional plan the limits are 10 requests per minute for the first tier, 25 for the second and 50 for the third. The library cache lives 7 days by default and is used only when library file keys are set.
The server starts locally through npx and calls the Figma API with your token. The last commit in the repository dates from August 2026.
How to disable. Delete the Figma To Code MCP block from your client's MCP config file and restart it. You can revoke the Figma token in your Figma account settings.
FAQ
How do I turn Figma into code with MCP?
Connect Figma To Code MCP with a Figma token, paste a link to a file, frame or group into the agent chat and ask it to implement the design. The agent calls `get_figma_design`, gets a compact description in CSS terms and writes markup from it.
Does Figma To Code MCP need the Enterprise plan?
No, only variable resolution does. On other plans set `resolveVariables: false` and the server returns data without resolving variables.
How does Figma To Code MCP differ from Framelink?
The author calls the project an independent system with a different data model and processing, inspired by Figma Context MCP by GLips. Here styles sit inside the nodes, property names follow CSS and repeating interface patterns are collapsed.
Where does the server save SVG from a layout?
To the folder set by the `--svg-output-dir` flag or the `FIGMA_SVG_OUTPUT_DIR` variable. Without a folder it uses a temporary directory.
How do I run Figma To Code MCP on Windows?
The Windows config launches npx through cmd: the cmd command with the arguments /c, npx, -y, the package name @tmegit/figma-to-code-mcp, then --figma-api-key=TOKEN and --stdio. The token can also be passed with the `FIGMA_API_KEY` variable.
Discussion
No questions or reviews yet.
Related
MCP serversFigma's official MCP server: code from a selected frame, design system variables and components, and writing designs to the canvas
The MCP server of the F2C service: from a Figma node link the agent gets HTML, React or Tailwind markup and local images
A free, two-way Figma MCP server: turns designs into framework-aware code and pushes code back to the canvas
An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot
MCP bridge between an agent (Cursor, Claude Code, Codex) and Figma for reading designs and editing them on the canvas
An MCP server that lets an agent read and edit Figma designs: colors, typography, components and export
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Figma To Code MCP: from Figma layout to code (this entry) | no | API key | 7 | |
| Framelink MCP for Figma | no | API key | 16,097 | the original GLips project with simplified layout data, while this server has a different data model and CSS property names |
| Figma Console MCP | no | API key | 2,623 | a design-system server that reads and writes variables, components and styles, while this one only reads layouts |
| Figma MCP Server | yes | OAuth | 2,128 | the official Figma server: it can also write layouts to the canvas and use Code Connect, while this one only reads layouts over the REST API |
README in short
The description opens with a list of advantages: data compression, CSS property names, complete data for building UI, inline styles, variable resolution, SVG export and pattern collapsing. Tables follow for tools, token scopes, launch options and Figma API calls with rate-limit tiers. Options can be set with flags or environment variables, with the flag winning. At the end the author credits Figma Context MCP by GLips as the source of the idea.