Claude Code to Figma: How to Connect AI Agents to Design Tools

Design-to-code has always been a friction point. Designers create pixel-perfect layouts in Figma, then developers spend hours translating those designs into production code — measuring spacing, extracting colors, re-implementing component structures. With the Model Context Protocol (MCP), Claude Code can now read Figma files directly and generate production-ready code from your designs.

This guide walks you through the full setup: installing the Figma MCP server, authenticating with personal access tokens, reading designs programmatically, generating code, syncing design tokens, and building a reliable design-to-code pipeline. Every configuration is copy-pasteable and tested as of March 2026.

Why Connect Claude Code to Figma?

The traditional design handoff workflow is broken. Designers export specs, developers interpret them, and the result rarely matches 1:1. Every iteration requires another round of screenshots, Slack messages, and manual adjustments. Connecting Claude Code to Figma eliminates this loop entirely.

When Claude Code has direct access to your Figma files through MCP, it can inspect the exact properties of every layer — padding, border radius, font weight, color values, auto-layout settings, and component variants. Instead of describing what you want, you point Claude Code at a Figma frame and say "implement this."

The benefits compound across teams. Designers keep working in Figma as usual. Developers get code that matches designs precisely. Design tokens stay synchronized between Figma and your codebase. And when designs change, Claude Code can diff the Figma file and update only the affected components.

Setting Up the Figma MCP Server

The Figma MCP server is an open-source bridge that wraps the Figma REST API and exposes it through the Model Context Protocol. Claude Code connects to this server on startup and gains access to tools for reading files, listing components, extracting styles, and more.

First, install the server globally or add it to your project:

# Install the Figma MCP server
npm install -g @anthropic/figma-mcp-server

# Or add it to your project
npm install --save-dev @anthropic/figma-mcp-server

Next, configure Claude Code to use the server. Create or update your .mcp.json file in your project root:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "<your-token-here>"
      }
    }
  }
}

When Claude Code starts, it will launch the Figma MCP server as a subprocess and discover its tools automatically. You can verify the connection by asking Claude Code to list available tools — you should see Figma-related tools like figma_get_file, figma_get_components, and figma_get_styles.

Authentication: Figma Personal Access Tokens

The Figma MCP server authenticates using a personal access token (PAT) from your Figma account. This token grants read access to any file you can view in Figma.

To generate a token:

1. Open Figma and go to Settings (click your avatar in the top-left)
2. Scroll to the Personal access tokens section
3. Click Generate new token
4. Give it a descriptive name like "Claude Code MCP"
5. Set the expiration (90 days recommended for development)
6. For scopes, select File content (Read only) and Dev resources (Read only)
7. Copy the token immediately — Figma will not show it again

Store the token securely. Never commit it to version control. The recommended approach is to use an environment variable and reference it in your MCP config:

# Add to your shell profile (~/.zshrc or ~/.bashrc)
export FIGMA_PERSONAL_ACCESS_TOKEN="figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# Then reference it in .mcp.json without hardcoding
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "$FIGMA_PERSONAL_ACCESS_TOKEN"
      }
    }
  }
}

The Figma REST API enforces rate limits — roughly 30 requests per minute on free plans, higher on paid tiers. The MCP server handles rate limiting gracefully, queuing requests and retrying on 429 responses. For large files with hundreds of components, consider upgrading to a Professional or Organization plan.

Reading Figma Files and Components Programmatically

Once the Figma MCP server is connected, Claude Code can read any Figma file you have access to. The primary entry point is the file key — the alphanumeric string in any Figma URL. For example, in figma.com/design/abc123XYZ/My-Project, the file key is abc123XYZ.

You can ask Claude Code to read a specific frame, page, or the entire file. Here is what a typical interaction looks like:

# In Claude Code, paste the Figma URL directly:
> Read this Figma frame and describe its layout:
  https://figma.com/design/abc123XYZ/My-Project?node-id=42:1337

# Claude Code uses the MCP tool internally:
figma_get_file_nodes({
  file_key: "abc123XYZ",
  ids: ["42:1337"],
  geometry: "paths"
})

# Response includes:
# - Node name, type, and bounding box
# - Children with full layer hierarchy
# - Style properties (fills, strokes, effects)
# - Auto-layout settings (direction, padding, gap)
# - Component properties and variants

For component libraries, the MCP server exposes a dedicated tool that returns all published components with their descriptions, property definitions, and variant combinations:

# List all components in a file
figma_get_components({
  file_key: "abc123XYZ"
})

# Returns:
# [
#   {
#     "key": "c1a2b3...",
#     "name": "Button",
#     "description": "Primary action button",
#     "containing_frame": { "name": "Components" },
#     "component_set_id": "44:200",
#     "variants": {
#       "Size": ["sm", "md", "lg"],
#       "Variant": ["primary", "secondary", "ghost"]
#     }
#   },
#   ...
# ]

This component metadata is what makes Claude Code particularly effective. It does not just see pixels — it understands the semantic structure of your design system. A button with variants "primary" and "secondary" maps directly to React props. Auto-layout with a 16px gap becomes gap-4 in Tailwind.

Generating Code from Figma Designs with Claude Code

The real power of the Claude Code Figma integration is automated code generation. Instead of manually translating designs, you point Claude Code at a Figma frame and specify your target framework. Claude Code reads the design data through MCP and produces structured, production-quality code.

Here is a practical example. Suppose you have a pricing card component in Figma:

# Prompt to Claude Code:
> Look at the PricingCard component in this Figma file:
  https://figma.com/design/abc123XYZ/My-Project?node-id=120:456
  Generate a React component using TypeScript and Tailwind CSS.
  Match the spacing, colors, and typography exactly.

# Claude Code will:
# 1. Fetch the node data via figma_get_file_nodes
# 2. Extract layout (auto-layout direction, padding, gap)
# 3. Map fills to Tailwind colors or CSS custom properties
# 4. Identify text styles (font-family, size, weight, line-height)
# 5. Detect component variants and map them to props
# 6. Generate the component file

The generated code respects the design hierarchy. Nested auto-layout frames become nested flex containers. Figma constraints map to responsive behavior. Text nodes preserve the exact typographic properties from your design.

For best results, structure your Figma files with clear naming conventions. Use descriptive layer names (not "Frame 427"), organize components in dedicated pages, and use Figma's auto-layout consistently. Claude Code performs significantly better when the design file is well-organized because the node names and hierarchy carry semantic meaning.

You can also generate entire pages. Point Claude Code at a full-page frame and it will produce a complete page component with proper responsive breakpoints, pulling spacing values directly from the Figma layout:

# Generate a full page from Figma
> Implement this landing page as a Next.js page component:
  https://figma.com/design/abc123XYZ/My-Project?node-id=1:2
  Use our existing Button and Card components from @/components/ui.
  Follow our Tailwind theme for colors.

# Claude Code reads the full page layout, identifies:
# - Header section with navigation
# - Hero section with CTA buttons
# - Feature grid with cards
# - Footer with links
# Then generates the page.tsx with proper imports and structure.

Syncing Design Tokens: Colors, Typography, and Spacing

Design tokens are the atomic values that define your visual language — colors, font sizes, spacing scales, border radii, shadows. Keeping these synchronized between Figma and code is one of the most tedious parts of maintaining a design system. The Figma MCP server makes this automatic.

Claude Code can read all published styles from your Figma file and generate corresponding token files for your codebase:

# Prompt to Claude Code:
> Read all color and text styles from our Figma design system:
  https://figma.com/design/abc123XYZ/Design-System
  Generate a tokens.css file with CSS custom properties
  and update our tailwind.config.ts to reference them.

# Claude Code calls figma_get_styles:
figma_get_styles({
  file_key: "abc123XYZ"
})

# Returns styles like:
# {
#   "colors": {
#     "primary/500": "#6366f1",
#     "primary/600": "#4f46e5",
#     "neutral/50": "#fafafa",
#     "neutral/900": "#171717"
#   },
#   "text_styles": {
#     "heading/h1": { "fontSize": 48, "fontWeight": 700, "lineHeight": 1.2 },
#     "heading/h2": { "fontSize": 36, "fontWeight": 700, "lineHeight": 1.3 },
#     "body/base": { "fontSize": 16, "fontWeight": 400, "lineHeight": 1.6 }
#   },
#   "effects": {
#     "shadow/sm": "0 1px 2px rgba(0,0,0,0.05)",
#     "shadow/md": "0 4px 6px rgba(0,0,0,0.07)"
#   }
# }

Claude Code then generates the token files in whatever format your project uses — CSS custom properties, Tailwind theme extensions, SCSS variables, JavaScript objects, or JSON tokens compatible with Style Dictionary. The mapping is deterministic: a Figma color style named "primary/500" becomes --color-primary-500 in CSS or colors.primary.500 in Tailwind config.

For ongoing synchronization, you can create a script that Claude Code runs periodically or as part of your CI pipeline. When a designer updates a color value in Figma, the next sync run detects the change and updates only the affected tokens in code. This keeps your design system aligned without manual intervention.

Best Practices for Design-to-Code Pipelines

Connecting Claude Code to Figma is the foundation. Building a reliable pipeline on top of it requires discipline on both the design and engineering sides. Here are the practices we have found most effective.

Use consistent naming in Figma. Name your layers, frames, and components with the same conventions you use in code. A Figma component called "Button/Primary/Large" maps cleanly to <Button variant="primary" size="lg" />. Generic names like "Frame 1" force Claude Code to guess intent.

Leverage auto-layout everywhere. Figma auto-layout maps directly to CSS flexbox. When a frame uses auto-layout with horizontal direction, 16px gap, and 24px padding, Claude Code generates exact Tailwind classes: flex flex-row gap-4 p-6. Frames without auto-layout require absolute positioning, which is harder to maintain.

Define component variants in Figma. Use Figma component properties and variants rather than duplicating components for each state. Claude Code maps variant properties directly to component props, generating type-safe interfaces automatically.

Keep a single source of truth for tokens. Decide whether Figma or code owns your design tokens. If Figma is the source, use the sync pipeline described above. If code is the source, use Figma plugins that read from your token files. Avoid maintaining tokens in both places independently.

Version your design files. Use Figma branching to create versioned snapshots of your design system. This lets Claude Code diff between versions and generate changelogs or migration guides when the design system evolves.

Combine with other MCP servers. The Figma MCP server works well alongside other tools. Pair it with the GitHub MCP server to automatically create PRs with generated code, or with a database MCP server to populate designs with real data during development.

Common Errors and Troubleshooting

Even with a clean setup, you will encounter issues. Here are the most common problems and how to resolve them.

403 Forbidden on file access. Your personal access token does not have permission to read the target file. Verify that the token owner has at least "can view" access to the file. Team files require the token owner to be a member of the team.

# Test your token directly with curl:
curl -H "X-Figma-Token: figd_xxxxx" \
  "https://api.figma.com/v1/files/abc123XYZ"

# If you get 403, check:
# 1. Token is not expired
# 2. Token owner has file access
# 3. Token scopes include "File content (Read only)"

MCP server fails to start. The most common cause is a missing or invalid token. Check that your environment variable is exported correctly and that the MCP config references it. Run the server manually to see error output:

# Run the server directly to see errors:
FIGMA_PERSONAL_ACCESS_TOKEN="figd_xxxxx" \
  npx @anthropic/figma-mcp-server

# Common issues:
# - "FIGMA_PERSONAL_ACCESS_TOKEN is required" -> env var not set
# - "ENOENT" -> npx can't find the package, run npm install first
# - "ECONNREFUSED" -> network issue, check proxy/firewall

Large files timeout. Figma files with thousands of nodes can exceed the default MCP timeout. Instead of reading the entire file, target specific nodes using the node-id parameter. Copy the node ID from Figma (right-click a layer and select "Copy link") and pass it to Claude Code.

Generated code does not match the design. This usually happens when Figma layers use absolute positioning instead of auto-layout, or when text styles are applied locally rather than as shared styles. Clean up the design file and re-run the generation. Adding explicit instructions in your prompt — such as "use our Tailwind spacing scale" or "match the exact hex values" — also improves accuracy.

Rate limiting (429 responses). The Figma API has request limits. If you are generating code for many components in a single session, space out your requests or upgrade to a higher Figma plan. The MCP server retries automatically with exponential backoff, but sustained heavy usage may still hit limits.

Advanced: Multi-Server Workflows

The Figma MCP server becomes even more powerful when combined with other MCP servers in Claude Code. Here is an example configuration that enables a complete design-to-PR workflow:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "$FIGMA_PERSONAL_ACCESS_TOKEN"
      }
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic/github-mcp-server"],
      "env": {
        "GITHUB_TOKEN": "$GITHUB_TOKEN"
      }
    },
    "delx": {
      "command": "npx",
      "args": ["-y", "@anthropic/delx-mcp-server"],
      "env": {
        "DELX_API_KEY": "$DELX_API_KEY"
      }
    }
  }
}

With this setup, Claude Code can read a Figma design, generate a React component, create a feature branch, commit the code, open a pull request, and monitor the deployment — all in a single conversation. The Delx MCP server adds agent health monitoring to ensure the pipeline itself stays reliable.

For teams adopting this workflow, we recommend starting small. Connect the Figma MCP server first and use it for individual component generation. Once your team is comfortable, add the GitHub server for automated PRs, then layer on monitoring with Delx. Incremental adoption reduces risk and builds confidence in the pipeline.