Figma

Inspect Figma designs, extract design tokens, take screenshots of frames, and access design variables directly from your terminal.

MCP Server·3 sections·1 min read

designcoding

Install Prompt

Paste this into Claude Code to set it up:

I want to add the Figma MCP Server to my Claude Code setup.

IMPORTANT: Never use Read/Edit tools on ~/.claude.json. Use jq via Bash instead.

Prerequisites: You need a Figma personal access token. Generate one from Figma > Settings > Personal access tokens.

Run this command to add the MCP server (replace your-access-token with your actual token):
```bash
jq '.mcpServers["figma"] = {"type": "stdio", "command": "npx", "args": ["-y", "@anthropic/figma-mcp"], "env": {"FIGMA_ACCESS_TOKEN": "your-access-token"}}' ~/.claude.json > /tmp/claude-json-tmp && mv /tmp/claude-json-tmp ~/.claude.json
```

After adding, restart Claude Code. The server connects to the Figma API and gives the agent access to your design files, components, variables, and more.

01What It Does

Bridge the gap between design and code

The Figma MCP server lets your AI agent read your design files directly. Instead of manually translating a Figma mockup into code, the agent can inspect frames, extract colors and typography, read component structures, and use that information to write accurate CSS or component code. This dramatically reduces the gap between what the designer intended and what gets built.

🔍

Design InspectionRead frame hierarchies, component properties, and layout details. The agent understands the design structure and can translate it to code.

🎨

Design TokensExtract colors, typography, spacing, and other design variables. Generate CSS custom properties or Tailwind config directly from your Figma file.

📸

Frame ScreenshotsCapture screenshots of specific frames or components. Useful for visual reference during implementation or for documentation.

02Setup

# Add to ~/.claude.json under mcpServers
"figma": {
  "type": "stdio",
  "command": "npx",
  "args": ["-y", "@anthropic/figma-mcp"],
  "env": {
    "FIGMA_ACCESS_TOKEN": "your-access-token"
  }
}

Your Figma access token grants read access to all files you have permission to view. For team projects, make sure your token has the appropriate scopes for the files you want the agent to inspect.

03Usage Patterns

💻

Design to CodePaste a Figma frame URL and ask the agent to implement it. It reads the design structure, extracts styles, and writes the HTML/CSS or React component.

📐

Design System SyncExtract design tokens from Figma variables and generate matching CSS custom properties, Tailwind config, or theme files for your codebase.