Figma Context MCP — Use Cases, Install & Live Demo

Why use it

Key features

Returns Figma data in a token-efficient YAML/JSON shape, not the raw API monster
Resolves component instances and their overrides
Surfaces design tokens (colors, text styles, spacing) by name
Image export of selected nodes for visual reference
Read-only — never writes back to your Figma file

Live Demo

What it looks like in practice

figma.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add figma -- npx -y figma-developer-mcp

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Figma Context

Generate React/SwiftUI/Tailwind code from a Figma frame

👤 Frontend devs implementing a designed screen ⏱ ~30 min intermediate

When to use: You have a Figma frame for a screen/component and want the first 80% of code generated faithfully.

Prerequisites

Figma personal access token — figma.com → Settings → Personal access tokens; scope to file_read
Figma file URL — Copy the URL from the Figma file; the MCP can extract file key and node id

Flow

Pull the frame data

Get the Figma node at <paste figma URL with node-id>. Return its layout, text content, colors, and child structure.✓ Copied

→ Hierarchical node data with real values — not 'unable to fetch'
Generate code grounded in the data

Generate a React + Tailwind component that matches this exactly. Use the actual hex colors and pixel values from the Figma data, not approximations.✓ Copied

→ Code that references real values, e.g. bg-[#1A2B3C] not bg-blue-500
Cross-check with an export

Export the same frame as a PNG. Compare to your generated component's expected render and call out any differences.✓ Copied

→ Specific diffs (missing icon, wrong padding) rather than 'looks similar'

Outcome: A pixel-faithful first draft you can refine instead of rebuild.

Pitfalls

Auto-layout vs absolute positioning maps differently to flex/grid — Tell Claude to prefer flexbox when the Figma frame uses auto-layout; absolute when it doesn't
Vector icons come back as SVG paths Claude inlines verbatim — Have it extract icons separately to /icons/*.svg and reference them as components

Combine with: filesystem · github

Sync Figma design tokens into your codebase

👤 Design-system maintainers ⏱ ~20 min intermediate

When to use: Designers updated palette/typography in Figma and you need the token JSON updated to match.

Flow

Pull the published styles

From Figma file <key>, list every published color style, text style, and effect style. Group by category.✓ Copied

→ Complete token list with names and values
Diff against the codebase

Read /design-tokens/tokens.json. Show me which tokens changed in Figma since this file was last synced (added, removed, value changed).✓ Copied

→ Per-token diff with old/new
Apply and open PR

Update tokens.json to match Figma. Open a PR titled 'sync: design tokens YYYY-MM-DD' with the diff in the description.✓ Copied

→ PR opened with reviewable diff

Outcome: Code-side tokens stay in lockstep with Figma; no more 'why is the brand color slightly off' tickets.

Pitfalls

Renamed tokens look like delete+add — Have Claude detect rename heuristically (same value, similar name) and call it out for human review

Combine with: filesystem · github

Extract dev specs (spacing, sizing, copy) from a Figma file

👤 Engineers triaging a Figma handoff without Dev Mode ⏱ ~15 min beginner

When to use: You don't have Figma Dev Mode but you need pixel specs for a screen.

Flow

Get the screen

For Figma node <id>, give me a flat list of every leaf element with its absolute position, size, and any text content.✓ Copied

→ Tabular dump of elements with x/y/w/h
Ask for a spec doc

Turn that into a developer-facing spec: section by section, with spacing values (margin/padding) inferred from positions.✓ Copied

→ Spec doc with concrete CSS-equivalent values
Verify edge cases

What happens when a text exceeds the designed width? Does the design specify wrap behavior, truncation, or growth? If unspecified, flag for the designer.✓ Copied

→ Open questions list, not silent assumptions

Outcome: A buildable spec without buying a Dev Mode seat for everyone.

Pitfalls

Designer used arbitrary spacing (13px, 17px) instead of token values — Ask Claude to round to the nearest token value but log the deviation, so designers can clean up

Combine with: filesystem

Combinations

Pair with other MCPs for X10 leverage

figma + filesystem

Generate code from Figma and write it directly to your component file

Pull Figma node <id>. Generate a React component matching it exactly, write it to src/components/Card.tsx using filesystem MCP.✓ Copied

figma + github

Open a PR with the new component plus a Figma link in the description for reviewers

Generate the Card component from Figma <url>, commit, push, and open a PR with both the code change and the source Figma link.✓ Copied

figma + chrome-devtools

Build, render in browser, screenshot, and visually compare against the Figma export

Build the new component. Render it at localhost:3000/preview/card. Take a screenshot. Compare visually against the Figma PNG export and list any visual differences.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
get_figma_data	fileKey: str, nodeId?: str, depth?: int	Pull a frame or whole file in agent-friendly form	1 Figma API call (free tier: 1500/min)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	Export design assets (icons, illustrations, screenshots) locally	1 Figma render call per node

Cost & Limits

What this costs to run

API quota: Figma free plan: 1,500 requests/min. Plenty for interactive use.
Tokens per call: Compact mode keeps payloads to ~1-5k tokens per frame. Full files can balloon — restrict by nodeId.
Monetary: MCP is free. Figma API access is free with any Figma account.
Tip: Always pass a nodeId when you can — fetching a whole file is wasteful.

Security

Permissions, secrets, blast radius

Minimum scopes: file_read

Credential storage: Personal access token in env var FIGMA_API_KEY. Never commit.

Data egress: All calls to api.figma.com

Never grant: file_write — the MCP doesn't need it; using a write-capable token risks accidental edits

Personal access tokens are powerful — use a token scoped to read-only and rotate periodically.
Figma file contents (your designs) ship to your LLM provider as context. If the file is sensitive, prefer node-scoped fetches over whole-file.

Troubleshooting

Common errors and fixes

403 Forbidden

Token doesn't have access to that file. Check whether the file is in a team/workspace your token can see. For shared community files, use a different token.

Verify: curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

Use the format https://www.figma.com/file/<KEY>/... or https://www.figma.com/design/<KEY>/.... Pass fileKey explicitly if URL parsing fails.

Response is enormous and blows context

Pass nodeId to scope to a frame, or depth: 2 to limit traversal.

Image export fails with 'unsupported node type'

Some node types (sections, slices) can't be exported. Select an actual frame or component instead.

Alternatives

Figma Context vs others

Alternative	When to use it instead	Tradeoff
Figma official Dev Mode MCP (beta)	You have Figma Dev Mode and want the official integration	Newer, requires Dev Mode subscription; deeper Figma feature support over time
Figma REST API directly via shell	You want full API surface (variables, branches, comments)	Raw API responses are huge and hard for an LLM to digest

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills