Reads Figma files, frames, and components through the Figma REST API and returns agent-friendly data. Provides a normalized IR of a node (sections, boxes, design tokens, CSS variables, and a ready Tailwind theme) in summary or flat/lean form, renders reference PNGs of nodes, exports SVG icons/vectors (with batch migration and cache listing), and browses file trees and cached components. Also includes a render-verification tool that renders agent-written HTML in headless Chromium and diffs it against the Figma render (SSIM, pixel-diff percentage, clustered diff regions). Read-only: never writes to Figma files.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@figma-proxy-mcp Get the hero section from this Figma link with a Tailwind theme"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server for Figma → code pipelines. Reads Figma through the REST API and returns agent-friendly data instead of the raw Figma tree:
Tool | What it gives the agent |
| Normalised IR of a node: |
| Reference render of a node (PNG, base64 + image URL) |
| Renders your HTML in headless Chromium and diffs it against the Figma render → SSIM, pixel-diff %, clustered diff regions |
| Icon / vector export |
| File tree and component cache |
Read-only: it never writes to your Figma files.
Node.js 20+ — https://nodejs.org (LTS). Check: node -v
git
A Figma personal access token (next section)
Related MCP server: Figma MCP Server by Bao To
Open Figma (web or desktop) → click your avatar (top-left) → Settings.
Tab Security → section Personal access tokens → Generate new token.
Name: figma-proxy-mcp. Expiration: your choice (90 days is fine).
Scopes: File content → Read-only (enough for everything here). Optionally Dev resources → Read-only.
Click Generate token and copy it now — it starts with figd_ and is shown only once.
The token can read every file your account can open. To work with someone else's file, ask them to share it with your Figma account (view access is enough).
git clone https://github.com/Semmargl/figma-proxy-mcp.git
cd figma-proxy-mcp
npm install
npx playwright install chromium # needed only for verify_render
cp .env.example .env.envOpen figma-proxy-mcp/.env in any text editor (macOS: open -e .env) and replace the placeholder:
FIGMA_API_KEY=figd_your_new_token_here ← before
FIGMA_API_KEY=figd_AbCdEf...your real token ← afterSave. .env is git-ignored — never commit it, never paste the token into code or MCP configs.
(Alternative: set FIGMA_API_KEY in the MCP client's env block or in your shell.)
Check the token:
curl -s -H "X-Figma-Token: $(grep FIGMA_API_KEY .env | cut -d= -f2)" https://api.figma.com/v1/me→ JSON with your email = OK. 403 = wrong/expired token.
Use the absolute path to proxy-mcp.js.
Claude Code (in your project folder):
claude mcp add figma-proxy --scope project -- node /ABS/PATH/figma-proxy-mcp/proxy-mcp.js --stdioClaude Desktop / Cursor (claude_desktop_config.json / .cursor/mcp.json):
{ "mcpServers": { "figma-proxy": { "command": "node", "args": ["/ABS/PATH/figma-proxy-mcp/proxy-mcp.js", "--stdio"] } } }Restart the app. The key is read from .env next to proxy-mcp.js, whatever the working directory.
node proxy-mcp.js # → http://localhost:4444/mcp (JSON-RPC: tools/list, tools/call)curl -s localhost:4444/mcp -H 'content-type: application/json' \
-d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"get_figma_component","arguments":{"figmaUrl":"<link with node-id>","summary":true}}}'Links must contain node-id: in Figma right-click a frame → Copy link to selection.
Start with summary:true, then fetch each section with format:"flat", lean:true. Use relativeBox for layout.
verify_render needs htmlPath (absolute, a self-contained HTML file) + frameWidth (Figma frame width).
Optional env: FIGMA_FILE_DEPTH (default 4), FIGMA_NODE_DEPTH (default 12).
Symptom | Fix |
|
|
| token expired or wrong — generate a new one |
| no access to the file, or wrong |
|
|
| HTTP mode already running (or another app on 4444) |
MIT
Export a specific Figma node as SVG and optionally save it
Inputs: fileId (required), nodeId (required), save, scale, +2 more.
Get previously fetched Figma components data
Inputs: no named parameters.
Get a specific Figma component by name from cached data
Inputs: name (required).
Get a Figma node by URL. Returns a deterministic, pruned + tokenized + componentized IR with a :root{} CSS-variable block, a Tailwind theme, and a component registry. Colors/spacing/fonts are already resolved to $--var references — the caller does NOT need to re-match raw RGBA against :root. For large sections, call with summary:true FIRST to get a compact { cssVars, tailwindTheme, registry, sections[] } object (top-level children with bounding boxes) WITHOUT the full node tree; this replaces manual get_figma_file decomposition. Then fetch individual sections (optionally with maxDepth) to build them.
Inputs: figmaUrl (required), lean, prune, format, +5 more.
Get Figma file data by file ID and transform it for development
Inputs: fileId (required).
List all cached SVG exports
Inputs: no named parameters.
Automatically find and export all SVG icons from a Figma file
Inputs: fileId (required), outputDir.
Export a specific Figma node as PNG and return base64-encoded image data
Inputs: scale, fileId, nodeId, figmaUrl.
Visual verification (MEASUREMENT ONLY): render an HTML file with headless Chromium INSIDE this server (does NOT use the user's Chrome / Control_Chrome) and compare it to the Figma design PNG. Returns SSIM (0-1, higher = closer), pixel-diff %, and clustered diff regions (bounding boxes of disagreement, in logical px). Provide the reference PNG via figmaUrl (auto-fetched), figmaPngPath, or figmaPngBase64. Use after generating HTML to objectively check fidelity, then fix only the reported regions — this tool never changes code. Requires npm install + npx playwright install chromium.
Inputs: htmlPath (required), frameWidth (required), bg, clip, +6 more.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 9 tools
Most tools are clearly distinct by resource and action, such as export_svg vs render_node_png and migrate_all_svgs vs export_svg. The main overlap is between get_figma_file and get_figma_component, though get_figma_component's detailed description and summary-first workflow help clarify its role. Cache tools are also differentiated by whether they list or retrieve by name.
All tool names use consistent snake_case and follow a predictable verb_noun pattern such as list_svg_cache, get_figma_file, export_svg, and verify_render. There are no mixed conventions or confusing abbreviations.
Nine tools is well within the ideal range and each tool appears to serve a distinct purpose in the Figma proxy workflow. The set is neither bloated nor too thin for fetching, exporting, caching, and verifying Figma assets.
The surface covers core workflows: fetching files/components, exporting SVG/PNG, migrating SVGs, using cached components, and verifying renders. Minor gaps exist, such as no explicit cache invalidation or Figma write operations, but these may be outside the server's read-only proxy scope.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Serves your design system and coding standards to coding agents, so they stop guessing.
