fig-mcp

Offline Figma design context for AI coding agents — no Pro plan, no desktop app, no internet required.

Point it at a Figma JSON export. Ask Claude Code to build a screen. Get production-quality React with real design tokens.

---

Quick start

# 1. Install
npm install -g fig-mcp          # or: npx fig-mcp --file ...

# 2. Export your Figma file as JSON (one-time, free API token)
curl -H "X-Figma-Token: YOUR_TOKEN" \
  "https://api.figma.com/v1/files/YOUR_FILE_KEY" \
  -o design.json

# 3. Add to Claude Code  (~/.claude.json or project .mcp.json)
# See "Claude Code setup" below

# 4. Open Claude Code and ask:
# "Build the Dashboard screen as a React component using Tailwind"

---

Getting your Figma token & file key

1. Go to figma.com → Settings → Security → Personal access tokens → Generate (free plan works)
2. Your file key is in the URL: figma.com/design/FILE_KEY/...

---

Claude Code setup

Add to your ~/.claude.json (global) or project .mcp.json:

{
  "mcpServers": {
    "fig-mcp": {
      "command": "npx",
      "args": ["tsx", "/path/to/fig-mcp/src/index.ts", "--file", "/path/to/design.json"]
    }
  }
}

Or if installed globally:

{
  "mcpServers": {
    "fig-mcp": {
      "command": "fig-mcp",
      "args": ["--file", "/path/to/design.json"]
    }
  }
}

---

Available tools

Tool	What it does
get_file_info	File name, pages, frame count
list_pages	All pages with frame counts
list_frames	All screens/artboards (optionally filtered by page)
get_frame	Full layout tree for a named frame — ASCII or JSON
get_component	Layout tree for a named component
get_design_tokens	All colors, typography, spacing, radii, shadows
generate_tailwind_config	Ready-to-use tailwind.config.js
search	Find any node by name

---

What you can ask Claude

"List all the screens in this design"
"Show me the layout of the LoginScreen"
"Build the Dashboard frame as a React + Tailwind component"
"Extract the design tokens and generate a tailwind.config.js"
"Find all Button components in the file"
"What colors does this design use?"

---

File format support

Format	Status
Figma REST API JSON (.json)	✅ Full support
.fig ZIP-based (older exports)	✅ Supported
.fig binary kiwi format (current)	🔜 Roadmap — use JSON export for now

The Figma REST API is free for all plan tiers. You only need to export once; the file works fully offline forever after.

---

What's on the roadmap

• Direct .fig binary parsing (no API token needed at all)
• describe_component — natural language description of a component for prompting
• Component-to-codebase mapping (point at your src/ folder, get matched component names)
• VS Code extension
• Watch mode (re-export JSON automatically when file changes)

---

Why this exists

The official Figma MCP server requires a Professional plan ($15/user/month) and a running Figma desktop app. This tool is the drop-in for everyone else: indie devs, agencies working from handoff files, and anyone who wants their AI agent to understand design without a Figma dependency.