Feed real design data to your coding assistant — layout, tokens and components straight from Figma files.
Screenshot-driven design-to-code has a low ceiling: the model squints at pixels and guesses paddings. The Figma MCP server raises it by handing your assistant the design's actual structure — frames, auto-layout rules, spacing values, fills, typography and component hierarchy — pulled from the Figma API and simplified into something a model can act on precisely.
The Framelink server (the most widely used community implementation) works link-first: paste a Figma file or frame URL into your coding assistant, and it fetches that node's layout tree and styles, translating "this looks like a card" into 16px padding, 8px gap, 12px radius, #0F172A at 600 weight. The gap between generated UI and the design shrinks dramatically because the numbers are no longer guesses — they're read off the file.
It's read-focused by design: layout extraction plus image/icon export for the assets your build needs. That's the right scope for design-to-code; you're not asking the assistant to edit designs, just to implement them faithfully. (Figma has since shipped its own official Dev Mode MCP server inside the desktop app — worth a look if you're on a paid Dev seat; Framelink remains the simplest API-token route that works everywhere.)
Two practical tips. First, link to the specific frame you're implementing rather than a whole file — smaller payloads, better results. Second, well-named layers and components in Figma translate directly into better generated code; the model reads your layer names, so "Button/Primary" beats "Rectangle 47" every time.
node-id. Without it the server fetches the entire page and the response balloons past anything useful.public/icons folder lives before asking for SVGs.Generated components use the file's real spacing, colors and type — not pixel guesses.
Pull the icons and images a build needs, at the right formats, without manual exporting.
Compare what the design system says against what the Figma file actually uses.
| Tool | What it does |
|---|---|
| get_figma_data | Fetch simplified layout, styles and component info for a file or specific node |
| download_figma_images | Export images and icon assets (SVG/PNG) referenced by a design |
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": { "FIGMA_API_KEY": "your-figma-personal-access-token" }
}
}
}Create the token in Figma → Settings → Security → Personal access tokens (read scopes suffice).
A Figma account and personal access token with read scopes. Node.js 18+.
| Variable | Description | Required |
|---|---|---|
| FIGMA_API_KEY | Figma personal access token with file read accesse.g. figd_... | Yes |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.