figma-view-mcp

A read-only Model Context Protocol server that exposes Figma to an AI agent in a token-efficient, tool-call-optimized way.

Built for two use cases:

1. View Figma designs — render screens/frames to image URLs you can embed anywhere.
2. Develop components and pages with AI — hand the model a distilled design structure (auto-layout → flexbox, colors → hex, typography, styles/tokens, Code Connect links) that fits in a context window, so it can generate accurate front-end code.

Why not just proxy the Figma REST API? Raw Figma file JSON is regularly 100k+ tokens — it blows the model's context and buries the signal. Every tool here returns a compact, purpose-built payload instead of raw nodes. That is the whole point of this server.

Quick start

No clone, no build. Point any MCP client at it via npx and add your Figma token:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-view-mcp@latest"],
      "env": {
        "FIGMA_TOKEN": "figd_your_token_here"
      }
    }
  }
}

That's it. The server is fetched and run on demand.

Claude Code (one-liner)

claude mcp add figma --scope user \
  -e FIGMA_TOKEN="figd_your_token_here" \
  -- npx -y figma-view-mcp@latest

# verify
claude mcp list        # look for:  figma: … ✔ Connected

Get a Figma token

You supply your own Figma personal access token — it only ever sees files your Figma account can open. Nothing is hardcoded or shared.

1. Figma → your avatar → Settings → Security → Personal access tokens
2. Generate new token, tick these scopes:
   • file_content:read
   • file_metadata:read
3. Copy it (shown once) and paste it into the FIGMA_TOKEN field above.

Design Variables are intentionally not covered — that API is Enterprise-plan-only. Shared styles (colors/type/effects) are covered via figma_get_styles and work on any plan.

Features

| Tool | What it does | Primary use case | |------|--------------|------------------| | figma_extract_ref | Parse a pasted Figma URL → { fileKey, nodeId } (no network call) | Both | | figma_get_file_summary | Compact map of a file: pages → top frames (id, name, size) | Discovery | | figma_get_node | Distilled node tree for a frame/component (layout, fills, type, text, style refs), depth-bounded | Develop with AI | | figma_render_images | Render nodes → PNG/JPG/SVG/PDF URLs | Embed / preview | | figma_get_components | List components & component sets (variant groups) | Develop with AI | | figma_get_styles | List FILL/TEXT/EFFECT/GRID styles → design tokens | Develop with AI | | figma_get_dev_resources | Dev Mode links (design ↔ code / repo / PR / Storybook) | Develop with AI | | figma_get_comments | Comments on a file (feedback / intent) | Context | | figma_list_project_files | Files in a project (name + key) | Discovery | | figma_list_team_projects | Projects in a team (id + name) | Discovery |

All tools are read-only (readOnlyHint: true) and accept either a full Figma URL or a bare file key — URLs are parsed automatically (node-id and 1-2 ↔ 1:2 handled for you).

Usage

Point the agent at a Figma link (from the browser). Typical flow:

1. figma_get_file_summary on the URL → see pages and top-level frames, grab the node ID of the screen/component you want.
2. figma_render_images on that node → get a PNG/SVG URL to preview or embed.
3. figma_get_node on that node (start depth: 3) → distilled structure to generate the component/page in code.
4. figma_get_styles / figma_get_components → keep the generated code consistent with the design system.
5. figma_get_dev_resources → reuse any already-linked code instead of writing from scratch.

Example prompts

• "Here's a Figma link <url> — summarize what's in the file."
• "Render the 'Checkout' frame as PNG."
• "Build the 'Pricing Card' component from Figma as a React + Tailwind component."
• "List the color and text styles in this file and turn them into CSS variables."

What "distilled" means (figma_get_node)

The raw Figma node for a card might be thousands of lines. This server returns something like:

{
  "id": "1:2",
  "name": "Card",
  "type": "FRAME",
  "props": {
    "width": 320, "height": 200,
    "layout": { "direction": "column", "gap": 8,
                "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
                "align": "CENTER", "justify": "MIN" },
    "fills": ["#ffffff"],
    "borderRadius": 12
  },
  "children": [
    { "id": "1:3", "name": "Title", "type": "TEXT", "text": "Hello",
      "props": { "fills": ["#1a1a1a"],
                 "font": { "family": "Inter", "weight": 600, "size": 18, "lineHeight": 24, "align": "LEFT" } } }
  ]
}

Auto-layout is mapped to flex semantics, colors to hex, and typography to a compact font object — exactly what a model needs to write CSS/Tailwind/React. When the depth limit is hit, a node reports childCount so the agent knows to drill deeper with another call.

Run from source (optional)

If you'd rather build it yourself instead of using npx:

npm install
npm run build
FIGMA_TOKEN="figd_your_token_here" npm start

You can also set the token via a git-ignored .env file:

cp .env.example .env
# edit .env and paste your token

Project layout:

src/
  figma.ts    # REST client, URL parsing, error mapping, node-compaction helpers
  index.ts    # MCP server + all 10 tool definitions
dist/          # compiled output (git-ignored)

Dev scripts:

npm run watch      # tsc --watch
npm run inspect    # build + open the MCP Inspector against this server

Troubleshooting

| Symptom | Cause / fix | |--------|-------------| | FIGMA_TOKEN is not set | Token missing from the environment. Set it in the env block or via -e. | | Figma API 403 … Access denied | Token lacks access to that file, or a scope is missing. Also: Variables need Enterprise. | | Figma API 404 … Not found | Wrong file key or node ID — re-check with figma_get_file_summary. The REST API can only read files the token's user can open. | | Figma API 429 … Rate limited | Too many/large requests. Wait, or request fewer nodes / lower depth. | | Node render URL is blank | That node type can't render in the chosen format; try PNG, or a parent frame. |

Security notes

• The token is read-only and carries the access of the user who created it. For shared use, consider a token from a dedicated Figma account invited only to the files it needs.
• Tokens are passed via environment variable (or a git-ignored .env) — never hardcoded in source or committed.
• Rotate the token if it was ever shared.

License

MIT