Figma MCP Claude Code: The Complete Setup Guide for Design-to-Code Workflows

What Is the Figma MCP Server?

The Figma MCP Server is an official integration built by Figma that connects your design files directly to AI coding agents via the Model Context Protocol (MCP), the open standard created by Anthropic that allows AI tools to communicate with external data sources and services. If you are interested in building custom MCP servers to extend your own tools, the same protocol powers both.

In practical terms, it means Claude Code (and other AI agents like GitHub Copilot and Cursor) can now:

• Read design data directly from your Figma files
• Access your design tokens, variables, and component mappings
• Generate production-ready code that matches your actual designs
• Maintain consistency with your existing component library

According to Figma's own AI report, 68% of developers are now using AI to write code, but only 32% of designers and developers say they trust the output. The design gap is real: AI-generated code often drifts from the intended UI. The Figma MCP Server is specifically designed to close that gap by grounding AI code generation in your actual design data.

Remote vs Desktop: Two Ways to Connect

Before setting up the Figma MCP Server, you need to decide which deployment mode fits your workflow.

Remote MCP Server

The Remote MCP Server is hosted by Figma and requires no Figma desktop app installation. It connects directly to the Figma cloud API and works with any MCP-compatible AI tool.

Best for:

• Teams working across different machines
• Developers who prefer not to run the Figma desktop app
• CI/CD workflows where no desktop app is available

Desktop MCP Server

The Desktop MCP Server runs locally through the Figma desktop application. It provides direct access to your open Figma files and enables selection-based workflows, meaning you can select a frame or component in Figma and immediately prompt Claude Code to generate code for that exact selection.

Best for:

• Active design-to-code sessions where you iterate rapidly
• Workflows that rely on live selection context
• Generating code from frames while designing

Figma MCP Server Setup with Claude Code

Here is how to configure the Figma MCP Server for use with Claude Code. The process takes about five minutes. If you want a step-by-step video walkthrough of this entire workflow, check out the dedicated course on using the Figma MCP Server for design-to-code workflows.

Step 1: Get Your Figma Access Token

1. Open Figma and go to Settings → Account → Personal Access Tokens
2. Click Generate new token
3. Give it a descriptive name (e.g., "Claude Code MCP")
4. Copy the token, you won't see it again

Step 2: Configure Claude Code

Add the Figma MCP Server to your Claude Code configuration. Open or create the file at ~/.claude/claude_desktop_config.json (for Claude Desktop) or update your MCP settings in Claude Code:

{
 "mcpServers": {
 "figma": {
 "command": "npx",
 "args": ["-y", "figma-developer-mcp", "--stdio"],
 "env": {
 "FIGMA_ACCESS_TOKEN": "your-figma-access-token-here"
 }
 }
 }
}

For the Remote MCP Server, use the Figma-hosted endpoint instead:

{
 "mcpServers": {
 "figma-remote": {
 "type": "http",
 "url": "https://mcp.figma.com/v1/sse",
 "headers": {
 "Authorization": "Bearer your-figma-access-token-here"
 }
 }
 }
}

Step 3: Verify the Connection

Restart Claude Code and check that the Figma tools are available. You can verify by prompting:

Use the Figma MCP whoami tool to confirm the connection is working.

Claude Code should return your Figma account identity, confirming the integration is live.

The Complete Figma MCP Tool Reference

The Figma MCP Server exposes 13 distinct tools. Understanding what each one does helps you write better prompts and build more efficient workflows.

Design Context and Code Generation

get_design_context is the tool you'll use most often. It returns framework-specific code for a selected Figma frame or layer. By default it generates React + Tailwind, but you can specify Vue, plain HTML + CSS, or iOS Swift.

generate my Figma selection as a React component using Tailwind CSS

generate my Figma selection in Vue using the components from src/components/ui

generate_figma_design (Remote only) works in the opposite direction, it generates Figma design layers from a description. You can output to a new file, an existing file, or the clipboard. This tool works with Claude Code, Codex, and VS Code, and can even inject into live web apps via Playwright.

get_screenshot captures a screenshot of your current selection to preserve visual fidelity. Use this when you want Claude Code to have a pixel-accurate reference alongside the structural design data.

Design System Integration

get_variable_defs returns all design variables and styles used in your selection, colors, spacing, typography, border radius, and more. This is critical for code that actually matches your design system rather than hardcoding arbitrary values.

get_code_connect_map returns mappings between Figma node IDs and your actual codebase components. If you have a Button component in Figma and a <Button> component in your React codebase, this tool tells Claude Code they are the same thing.

add_code_connect_map lets you add new mappings between Figma nodes and components. Use this to teach the MCP Server about your component library over time.

get_code_connect_suggestions automatically detects potential component mappings by analyzing your Figma file and suggesting which nodes correspond to which code components.

send_code_connect_mappings confirms and saves Code Connect mappings after you've reviewed the suggestions.

create_design_system_rules generates a rules file that captures your design system conventions. The file is saved to a rules/ or instructions/ path in your project, so Claude Code automatically applies these conventions in future sessions.

File and Metadata Tools

get_metadata returns a sparse XML representation of large designs, useful when you need a structural overview without pulling all the design data at once.

get_figjam returns XML metadata for FigJam files. Use this to pull in information architecture diagrams, user flows, or planning boards.

generate_diagram converts Mermaid syntax into FigJam diagrams. Supported types include flowcharts, Gantt charts, state diagrams, and sequence diagrams.

whoami (Remote only) returns your Figma user identity, handy for verifying authentication in automated workflows.

Practical Workflows: Figma Design to Code with AI

Here are four concrete workflows you can start using today.

Workflow 1: Generate a Component from a Figma Selection

This is the most common use case. Open your Figma design, select a frame or component, then switch to Claude Code and prompt:

Use the Figma MCP get_design_context tool to generate a React component
for my current selection. Use Tailwind CSS and match the spacing and
colors from the design variables.

Claude Code will call get_design_context, receive the React + Tailwind output from Figma, and produce a component that mirrors your design, with actual token values rather than hardcoded approximations. For complex projects, pairing this with Claude Code's Plan Mode before writing any code helps you map out the component architecture before generation begins.

Workflow 2: Map Your Design System to Your Codebase

Before generating code at scale, set up Code Connect mappings so Claude Code knows which Figma components correspond to which code components:

Use get_code_connect_suggestions to detect which components in my Figma
file match the components in src/components/ui, then confirm the mappings.

Once mappings are established, any code generation will automatically reference your existing components rather than generating new ones from scratch.

Workflow 3: Create Design System Rules for Consistent Code

Run this once per project to generate a persistent rules file:

Use create_design_system_rules to analyze my Figma design and generate
a rules file for this project. Save it to the instructions/ directory.

Claude Code will use these rules in every subsequent session, ensuring generated code stays consistent with your design system conventions.

Workflow 4: Capture a Live App and Create a Figma File

This workflow runs in reverse, you have a running web app and want to create a Figma representation of it:

Start a local server for my app at localhost:3000 and capture the UI
in a new Figma file using the generate_figma_design tool.

This is useful for documentation, design audits, or when you're inheriting a codebase without design files.

Why the Figma MCP Server Matters for AI Coding Workflows

According to industry data from Index.dev, 84% of developers now use AI tools that collectively write 41% of all code. The productivity gains are real, but so is the quality risk when AI generates UI code without access to the actual design intent. For a broader look at how these tools stack up, the Claude Code vs Cursor comparison covers which AI coding tool fits which workflow.

The Figma MCP Server is the missing connection between design and implementation. Instead of describing your design to an AI agent through screenshots and manual spec copying, you give the AI direct access to the source of truth. The result is code that uses the right tokens, references the right components, and respects the structural decisions your design team made.

As Jake Albaugh, Developer Advocate at Figma, put it when announcing the MCP server: "Design context is critical for going from design to code."

For teams using Claude Code in their daily workflow, this integration removes one of the biggest friction points in the design-to-development handoff, and it does so without requiring any change to how designers work in Figma.

Tips for Getting the Best Results

Be explicit about your framework. The default output is React + Tailwind. If you use a different stack, specify it in your prompt: "generate in Vue 3 with SCSS" or "generate in plain HTML using CSS custom properties."

Use Code Connect before generating at scale. Setting up component mappings first means Claude Code will reference your existing <Button>, <Card>, and <Modal> components rather than generating duplicates.

Pair get_screenshot with get_design_context. For complex layouts with subtle spacing, adding a screenshot gives Claude Code a visual reference alongside the structural data, improving fidelity especially for responsive layouts.

Create design system rules early. Running create_design_system_rules at the start of a project sets the foundation for consistent code across the entire codebase. Store the rules file in version control so the whole team benefits.

Use FigJam for architecture diagrams. The generate_diagram tool lets you convert Mermaid syntax to visual FigJam diagrams. This is particularly useful for documenting user authentication flows, data models, or API architecture directly in Figma. Before committing to a new Figma plan tier, it is also worth reviewing the Figma AI credits guide to understand how AI feature usage is metered.

Start Building Faster with Figma MCP and Claude Code

The Figma MCP Server represents a genuine shift in how design and development collaborate. When your AI agent can read your design system directly, not interpret a screenshot, not guess from a description, but actually read the variables, tokens, and component mappings, the output quality improves dramatically.

The setup takes five minutes. The productivity gains compound over every project that follows.

If you want to go deeper on using Claude Code for vibe coding workflows, including how to structure your projects, write effective prompts, and build production-ready apps faster, the best next step is to master Claude Code for your full development workflow with the complete course curriculum.