Figma MCP

What is the Figma MCP?

The Figma MCP (Model Context Protocol) server connects Claude directly to your Figma files. Instead of manually copying hex codes, spacing values, and component specs, Claude can read your Figma designs and extract everything automatically.

This means your code stays perfectly in sync with your designs. When a designer updates a color token in Figma, you can ask Claude to pull the latest values and update your code to match.

The Figma MCP can read:

• Design tokens (colors, typography, spacing, shadows, border radius)
• Component structure and hierarchy
• Component variants and their properties
• Auto layout settings and constraints
• Text content and styles
• Asset URLs for images and icons

Setup

Step 1: Get a Personal Access Token

• Open Figma and click your profile icon in the top left
• Go to Settings
• Scroll down to the Personal Access Tokens section
• Click Generate new token
• Name it something descriptive like “Claude MCP Server”
• Copy the token immediately — you won’t be able to see it again

Step 2: Update Your MCP Config

Add the Figma server to your Claude MCP configuration file:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic/figma-mcp-server"
      ],
      "env": {
        "FIGMA_API_KEY": "figd_your-personal-access-token-here"
      }
    }
  }
}

Replace figd_your-personal-access-token-here with your actual Figma personal access token.

Step 3: Restart Claude

Fully quit and restart Claude. The Figma MCP server will start automatically. You should see Figma-related tools appear in Claude’s tool list.

Getting Your Figma File URL

To point Claude at a specific Figma file or frame, you need the URL from your browser’s address bar when viewing the file in Figma.

File URL

A Figma file URL looks like this:

https://www.figma.com/design/AbCdEfGhIjKl/My-Design-System

The key part is the file key — the random string after /design/ (in this example: AbCdEfGhIjKl).

Node URL (Specific Frame or Component)

When you select a specific frame or component in Figma, the URL updates to include a node ID:

https://www.figma.com/design/AbCdEfGhIjKl/My-Design-System?node-id=123-456

The node-id=123-456 parameter points to the specific element. Share this URL with Claude when you want it to look at a particular component or frame.

Token Extraction Prompts

Once the Figma MCP is connected, you can ask Claude to extract design tokens directly from your Figma files.

Extract All Tokens

Look at my Figma file: https://www.figma.com/design/AbCdEfGhIjKl/My-Design-System

Extract all design tokens and create a tokens.ts file with:
- All colors (organized by category: primary, neutral, semantic)
- Typography scale (font families, sizes, weights, line heights)
- Spacing scale
- Border radius values
- Shadow definitions
- Breakpoints if defined

Format them as a TypeScript object I can use with Tailwind's theme.extend.

Extract a Specific Component

Look at this component in my Figma file:
https://www.figma.com/design/AbCdEfGhIjKl/My-Design-System?node-id=123-456

This is a Button component. Extract:
- All variants (primary, secondary, ghost, danger)
- All sizes (sm, md, lg)
- All states (default, hover, focus, disabled)
- The exact colors, padding, border-radius, and font styles for each combination

Then create a Button.tsx component that matches this design exactly, using Tailwind classes.

Syncing Figma Changes Back to Code

When a designer updates the Figma file, you can ask Claude to sync those changes into your codebase:

The design team updated the Figma file:
https://www.figma.com/design/AbCdEfGhIjKl/My-Design-System

Compare the current Figma tokens with my existing tokens.ts file.
Show me what changed, then update tokens.ts to match the new Figma values.
Don't change anything that hasn't changed in Figma.

Pushing Generated Code Back to Figma

You can also use the Figma MCP to inform designers about what was implemented:

Read my Button component at src/components/ui/Button.tsx.
Compare it against the Button in my Figma file:
https://www.figma.com/design/AbCdEfGhIjKl/My-Design-System?node-id=123-456

Create a summary of:
- What matches the design exactly
- What deviates from the design (and why, if there's a code constraint)
- Any variants or states in Figma that aren't implemented yet
- Any variants or states in code that aren't in Figma

Common Issues