← all writing
2026-03-26 · 6 min read

Figma MCP + Claude Code: the full setup guide

claude can now build directly inside your figma files — frames, components, variables — and generate code from your designs. here's the exact setup, the prompts that work, and the gotchas.

Connect Figma to Claude Code — Claude can now build designs directly inside your Figma files, generate code from your designs, and capture live UI back into Figma.

What is Figma MCP?

The Figma MCP (Model Context Protocol) server is a two-way bridge between Figma and AI tools like Claude Code.

The big upgrade — Claude can now CREATE inside Figma

  • Write-to-Canvas — Claude creates and modifies native Figma content directly in your file: frames, components, variables, auto layout. You describe what you want, Claude builds it inside Figma. (Free during beta.)
  • Code-to-Canvas — Capture a live web page (production, staging, or localhost) and turn it into editable Figma layers.
  • Design-to-Code — Select a Figma frame, Claude generates production-ready code from it.
  • Design Context Extraction — Pull variables, components, and layout data into your IDE.
  • Code Connect — Reuse your actual codebase components based on Figma component mappings.
  • FigJam Diagrams — Create flowcharts, Gantt charts, and diagrams from natural language.

Prerequisites

  • Figma account — the remote server works on all seats and plans
  • Figma seat — Full/Dev seat on a paid plan recommended for higher rate limits. Starter/View/Collab seats get 6 tool calls/month
  • Figma file — a Figma Design, Figma Make, or FigJam file with edit or view-only access
  • Claude Code — installed on your machine (terminal-based)
  • Internet — required; the remote MCP server is hosted by Figma

Step 1: Install Claude Code

If you don't have Claude Code installed yet:

npm install -g @anthropic-ai/claude-code

Verify it's installed:

claude --version

Launch Claude Code:

claude

You'll need an Anthropic account. Follow the on-screen prompts to authenticate the first time.

Step 2: Install the Figma Plugin

The recommended way to connect Figma is through the official Figma plugin — it bundles the MCP server config, agent skills, and asset handling rules.

Run this in your terminal:

claude plugin install figma@claude-plugins-official

Then restart Claude Code if it's already running.

Verify the installation

  1. Inside Claude Code, type /plugin and press Enter
  2. Navigate to the Installed tab (right arrow key)
  3. Find the figma server and press Enter
  4. Press Enter again — a browser page opens for authentication
  5. Click Allow access to authorize Claude Code for your Figma account
  6. Return to your terminal
  7. Type /plugin again — verify figma shows as connected

You can also type /mcp inside Claude Code to check all MCP server statuses.

Alternative (manual setup): If you prefer not to use the plugin, you can add the MCP server directly: claude mcp add --transport http figma https://mcp.figma.com/mcp — but the plugin method is preferred because it includes agent skills and rules that improve output quality.

Step 3: Authenticate with Figma

Authentication happens through the plugin setup flow above:

  1. A browser window opens with Figma's authorization page
  2. Click "Allow access" to grant Claude Code access to your Figma files
  3. Return to your terminal — Claude Code confirms the connection

No API keys. No config files. No tokens to manage. The OAuth token is stored securely and refreshes automatically.

To re-authenticate or check status: type /mcp inside Claude Code.

Step 4: Share Your Figma Files with Claude

The Figma MCP is link-based — you give Claude context by sharing URLs.

How to get the right link

Option A — Address bar:

  1. Open your Figma file in the browser
  2. Select the frame or layer you want
  3. Copy the URL from the address bar — it includes the node-id

Option B — Right-click:

  1. Right-click a layer in your Figma file
  2. Choose "Copy link to selection"

The URL looks like:

https://www.figma.com/design/ABC123/MyFile?node-id=45-678

Claude extracts the node-id automatically.

Key insight: Whatever is in the design file you share becomes context. Whatever page you share (via the URL) is also considered context. Share your design system file link separately if your components live in a different file.

Step 5: Reference Your Design System

Share links from your design system file so Claude uses your actual components, tokens, and variables.

How to do it

Share both links — design system file + the page you're working on:

Design system: https://www.figma.com/design/XYZ789/DesignSystem
Page to implement: https://www.figma.com/design/ABC123/MyFile?node-id=45-678

Use my design system components.

What Claude picks up

  • Variables — color tokens, spacing values, typography scales
  • Components — reusable UI elements (buttons, cards, inputs)
  • Code Connect mappings — direct links between Figma components and your codebase components

Code Connect (optional but powerful)

Maps Figma components directly to code components in your repo. When configured, Claude uses <Button variant="primary"> instead of a styled <div>.

To check existing mappings:

Get the Code Connect mappings for this file: [your design system URL]

Step 6: Prompting for Best Results

The formula

  1. Share the Figma link (specific frame/page)
  2. Share the design system link (from your design system file)
  3. Specify what you want (build a screen, generate code, extract tokens)
  4. Add context (framework, component directory, what the screen is for)

Example prompts

Have Claude BUILD a Figma screen:

Create a settings page in my Figma file based on this design pattern:
https://www.figma.com/design/ABC123/App?node-id=120-456

Use my existing components and variables from the design system.

Generate code from a design:

Design system: https://www.figma.com/design/XYZ789/DesignSystem
Checkout page: https://www.figma.com/design/ABC123/App?node-id=120-456

Generate React + Tailwind code for the checkout page.
Use components from src/components/ui.

Capture live UI into Figma:

Start a local server for my app and capture the homepage UI into a new Figma file.

Extract design tokens:

Get the variables used in this Figma selection:
https://www.figma.com/design/XYZ789/DesignSystem?node-id=10-200

Tips for better output

  • Share a specific frame link, not the whole file
  • Reference your design system file separately
  • Tell Claude where your code components live (e.g., src/components/ui)
  • Name layers semantically in Figma — CardContainer not Group 5
  • Use Auto Layout — communicates responsive intent
  • Add annotations in Figma — Claude reads designer notes and constraints

Quick Reference

Commands

  • Install Figma plugin (recommended): claude plugin install figma@claude-plugins-official
  • Manual MCP add (alternative): claude mcp add --transport http figma https://mcp.figma.com/mcp
  • Check MCP status: /mcp (inside Claude Code)
  • Check plugins: /plugin (inside Claude Code)
  • List all MCP servers: claude mcp list
  • Remove Figma MCP: claude mcp remove figma

Available Tools

  • use_figma — create and modify native Figma content — frames, components, variables, auto layout. The headline feature. (Beta)
  • get_design_context — generate code from selected frames — your main design-to-code tool
  • get_variable_defs — extract variables/tokens (colors, spacing, typography)
  • get_screenshot — screenshot of a Figma selection for visual reference
  • get_metadata — layer structure (IDs, names, types, positions)
  • get_code_connect_map — Figma-to-code component mappings
  • search_design_system — find components/variables in connected libraries
  • create_design_system_rules — generate rule files for consistent code output
  • generate_diagram — FigJam diagrams (flowcharts, Gantt, sequence)
  • whoami — check your authenticated Figma identity and plan

Rate Limits

  • Starter/View/Collab seats: 6 tool calls per month
  • Dev/Full seats (Professional+): per-minute limits matching Figma REST API Tier 1
  • Write operations (use_figma): exempt from rate limits during beta

Troubleshooting

Plugin install fails or server not connecting

  • Make sure Claude Code is up to date: npm update -g @anthropic-ai/claude-code
  • Check internet connection
  • Run /mcp inside Claude Code to check server status
  • Try removing and re-adding: claude mcp remove figma, then reinstall the plugin

Authentication not opening in browser

  • Make sure your terminal can open browser windows
  • Run /plugin → navigate to Figma → press Enter to trigger auth again
  • Or run /mcp and use the authenticate option

Low-quality code output

  • Share a specific frame link, not the entire file
  • Share your design system file link separately
  • Tell Claude which framework and component library to use
  • Use Auto Layout, semantic layer names, and variables in your Figma file

Rate limit hit

  • Starter/View/Collab seats have 6 calls/month
  • Upgrade to a Dev/Full seat on a paid plan for higher limits

Sources: Figma MCP Setup (Official) | Figma MCP Server Guide (GitHub) | Claude Code MCP Docs

next up
How to set up Browser Use CLI (automate any browser task) →