Figma MCP Setup for Claude Code — Complete Guide 2026

The Figma MCP (Model Context Protocol) server connects Claude Code directly to your Figma workspace. Claude can read your design files, inspect components and variables, understand your design system, and generate production-ready code that matches your designs with pixel-level accuracy — all without leaving the terminal.

What Is the Figma MCP?

MCP (Model Context Protocol) is an open standard that lets AI agents communicate with external tools. The official Figma MCP server exposes your Figma files as structured data that Claude can query in real time: node trees, component properties, design tokens, variables, styles, and more.

Why it matters: Instead of pasting screenshots or manually describing layouts, Claude reads the actual design data. The result is generated code that uses your real token names, respects your component hierarchy, and handles edge cases like responsive breakpoints and dark mode.

Prerequisites

Claude Code installed (npm install -g @anthropic-ai/claude-code)
Node.js 18+ installed
A Figma account (Free, Professional, or Org)
A Figma Personal Access Token

Step 1 — Get a Figma Personal Access Token

Open Figma → click your avatar (top-left) → Settings
Scroll to Security → Personal access tokens
Click Generate new token, name it (e.g. claude-code), set expiry
Copy the token — you won't see it again

Scope: The token only needs File content: Read-only for most workflows. Add Variables: Read and write only if you want Claude to update design tokens.

Step 2 — Install the Figma MCP Server

Add the Figma MCP server to Claude Code with a single command:

claude mcp add --transport stdio figma -- npx figma-developer-mcp --figma-api-key=YOUR_TOKEN_HERE

Or add it manually to .claude/settings.json in your project:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "figma-developer-mcp",
        "--figma-api-key=YOUR_TOKEN_HERE"
      ]
    }
  }
}

Keep secrets out of git: Put the token in .claude/settings.local.json (gitignored by default) instead of settings.json.

Step 3 — Verify the Connection

Start Claude Code in your project directory and check the MCP server is active:

claude
/mcp

You should see figma listed as a connected server. If it's missing, check that npx is available and that your token is correct.

Step 4 — Connect to a Figma File

Copy the URL of any Figma file or frame you want to work with, then hand it to Claude:

Implement the card component from this Figma frame:
https://www.figma.com/design/XXXX/MyApp?node-id=12-34

Claude will call the MCP server to fetch the node tree, extract styles and properties, then generate the component code.

What Claude Can Do with Figma Access

Task	What Claude reads
Implement a component	Node tree, fills, typography, spacing, constraints
Extract design tokens	Color variables, text styles, effect styles
Build a full page	Frame hierarchy, auto-layout, component instances
Check code vs design	Compares live styles against your component file
Generate a theme file	All variable collections with light/dark modes

Useful Prompts

Implement a component

"Read the Button component from [Figma URL] and implement it in React with Tailwind. Use the exact color tokens from the Figma variables."

Generate a full design system

"Read all variables from [Figma URL] and generate a tokens.css file with CSS custom properties for both light and dark mode."

Audit code vs design

"Compare the Card component in src/components/Card.tsx against the Figma design at [URL]. List every visual discrepancy."

Build a page from a frame

"Implement the entire Landing page from [Figma URL] as a Next.js page. Use the existing components in src/components/ where possible."

Troubleshooting

MCP server not showing up

Run npx figma-developer-mcp --version directly to confirm the package installs. If it fails, try pinning the version: npx figma-developer-mcp@latest.

Authentication error

Double-check the token has no leading/trailing spaces and hasn't expired. Tokens with a short expiry are a common cause of intermittent failures.

Node not found

Make sure you're using the correct node-id from the Figma URL. In the browser, right-click a frame → Copy link to selection to get the exact node-id.

Claude reads wrong file

Figma URLs that contain /proto/ are prototype links — use /design/ URLs instead, which point to the editable file.

Pro Tips

Use named nodes. Rename your Figma layers clearly — Claude uses node names as hints for variable names and CSS classes.
Organize variables into collections. A clean variable structure (Primitives → Semantics → Component) makes generated token files much more usable.
Scope the context. Link to a specific frame, not the whole file. Large files slow down the MCP response and waste context.
Combine with CLAUDE.md. Add your design system conventions to CLAUDE.md so Claude knows your token naming scheme before reading Figma data.

Frequently Asked Questions

Does this work with Figma Free accounts?

Yes — the MCP server uses the public Figma REST API, which is available on all plans. Variables require a Professional or Org plan to use in Figma, but can still be read if they exist.

Can Claude write back to Figma?

The official Figma MCP server is read-only by default. Write operations (creating/updating nodes, variables) require using the Figma Plugin API, which the MCP plugin bundled in Claude Code supports via /plugin install figma.

Is my design data sent to Anthropic?

Figma data fetched by the MCP server is included in the Claude context window and processed by Anthropic's API under the same data handling policies as your code. Don't connect files containing sensitive PII or unreleased product information if that's a concern.

Does it work with FigJam?

No — the MCP server reads design files only. FigJam boards use a different data format that isn't supported.

Browse all AI design tools at aistro.online · See also: Claude Code Complete Guide · Best AI Tools for Designers 2026