Claude ×
Figma MCP
Connect Claude Code to Figma's Model Context Protocol and edit your designs directly from Claude Code — no plugins needed.
warning Pro requiredcheck_circle macOS / Linuxterminal Claude Codepalette Figma Desktop
groups Who this is for
This guide is for designers, developers, and makers who want to connect Claude AI to Figma — even if you've never used a terminal before. No coding experience required. If you can copy-paste, you can do this.
checklist Before you start
check_circle
Anthropic Pro account — Claude Code requires a paid plan ($20/month). Check your plan
check_circle
Figma Desktop app — the browser version won't work for the desktop MCP server. Download Figma
check_circle
macOS or Linux — Claude Code doesn't support Windows yet
info
~10 minutes — that's all this setup takes
menu_book Jargon buster
plain EnglishCLI
Command Line Interface — a text-based way to talk to your computer. Instead of clicking buttons, you type commands.
Terminal
The app where you type CLI commands. On Mac, search "Terminal" in Spotlight (Cmd+Space).
PATH
A list of folders your computer checks when you type a command. Adding something to PATH means making it available everywhere.
Claude Code
A CLI tool by Anthropic that lets you use Claude AI directly from your terminal — it can read, write, and edit code.
MCP
Model Context Protocol — a universal standard that lets AI tools talk to apps like Figma. Think of it like a USB cable between Claude and your tools.
OAuth
A secure login flow. When Claude opens a browser window to sign in, that's OAuth. You're giving it permission without sharing your password.
Remote server
Figma's cloud-based MCP. It can read and write to any Figma file via links — no need to have the file open.
Desktop server
A local MCP that runs on your computer. It talks to your open Figma app and can read your current selection in real time.
help_outline What is MCP?
A universal language that lets AI talk directly to your tools — no copy-paste, no manual handoff.
electrical_services
Open Standard
MCP (Model Context Protocol) is an open-source protocol created by Anthropic. It defines a standard way for AI agents to connect and communicate with external tools and data sources.
sync_alt
Two-Way Bridge
Instead of AI reading only screenshots or pasted text, MCP gives it a live, structured connection — so it can both read from and write back to apps like Figma in real time.
design_services
Design → Code, Directly
Figma's MCP server lets Claude read your actual layers, components, tokens, and variables — then generate code that matches your design system, not just what it looks like.
brush
Figma Design
Layers, tokens, components
arrow_forwardMCP Server
smart_toy
Claude
Reads structured context
arrow_forwardGenerates
code
Your Code
Design-accurate output
settings Installation & Setup
08 stepsdownload
1. Install Claude Desktop & sign inPro required
Download from claude.ai/download and log in with your Anthropic Pro account.
terminal
2. Open Terminal & install Claude Code
Runs the official installer and sets up the Claude Code CLI on your machine.
$
curl -fsSL https://claude.ai/install.sh | bashvisibility Expected: You'll see download progress, then "Claude Code installed successfully" at the end.
route
3. Add Claude Code to your PATH
Makes the claude command available in every future terminal session.
$
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrcvisibility Expected: No output means it worked. If you see an error, make sure you copied the full command including the quotes.
rocket_launch
4. Launch Claude Code & authenticate
A browser window will open — complete the OAuth flow to link your Anthropic account to the CLI. (See the glossary above if "OAuth" sounds unfamiliar.)
$
claudevisibility Expected: Your browser opens a login page. Sign in, then return to Terminal — you'll see a welcome message with your name.
electrical_services
5. Register Figma MCP servers
Add both servers — remote for cloud access, desktop for live in-file editing.
A — Remote server (cloud)
$
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcpB — Desktop server (local)
$
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpvisibility Expected: Each command prints a confirmation like "Added figma MCP server". If you see an error, make sure Claude Code is running first (step 4).
compare_arrows Remote vs Desktop — when to use which?
cloud Remote server
- Works with any Figma file via URL
- Can create and edit designs (use_figma)
- File doesn't need to be open
- Best for: generating designs, batch edits
computer Desktop server
- Reads your live selection in Figma
- Access to variables & tokens
- Figma Desktop must be open
- Best for: design-to-code, inspecting layers
lightbulb We recommend adding both. Claude will pick the right one based on your prompt.
task_alt
6. Verify MCPs are registered
Both figma and figma-desktop should appear in the output.
$
claude mcp listvisibility Expected: A list showing both figma and figma-desktop with their URLs. If one is missing, re-run the add command from step 5.
brush
7. Enable Desktop MCP Server in Figma
Open Figma Desktop → Preferences → toggle on Enable Desktop MCP Server. This exposes your active selection to Claude.
restart_alt
8. Fully quit Claude Desktop & reopenImportant
Press Cmd+Q — don't just close the window. MCPs only load at app startup.
science Test your setup
your first action1
Open a Figma file and select any frame on the canvas.
2
Go to your Terminal and type claude to start a session (if not already running).
3
Type this prompt:
chat"Look at my current Figma selection and describe what you see — layers, colors, and layout."
check_circle If it works
Claude will describe the layers, colors, and layout of your selected frame. Congrats — your setup is complete!
error If it doesn't work
Make sure Figma Desktop is open, the MCP server toggle is on (step 7), and you fully restarted Claude (step 8). Then try again.
handyman Available tools
10 toolscode
get_code
Generates code from your current Figma selection or a shared link. Outputs React + Tailwind by default, but auto-detects your project's framework.
manage_search
get_metadata
Returns a simplified XML of your selection with layer IDs, names, types, position, and sizes. Useful for large selections where get_code would be too heavy.
screenshot_monitor
get_screenshot
Captures a screenshot of your current selection to give the agent visual context alongside code output. Usually called automatically after get_code.
palette
get_variable_defs
Returns all variables and styles used in your selection — colors, spacing, typography tokens. Ideal for syncing new design tokens into your codebase. Desktop server only.
edit
use_figma
The general-purpose write tool for Figma. Create, edit, delete, or inspect any object — pages, frames, components, variants, variables, styles, text, and images. Remote server only.
rule_settings
create_design_system_rules
Generates a rules file giving the agent context about your design system — token naming, component structure, frameworks, icon usage, and asset folder conventions.
account_tree
get_code_connect_map
Maps Figma component IDs to matching components in your codebase. Returns the file location and name so the agent uses existing code instead of generating new ones.
auto_awesome
generate_figma_design
Captures live UI from your web app and sends it to Figma as editable design layers. Great for pushing real screens to the canvas as a starting point. Remote server only.
schema
generate_diagram
Creates FigJam diagrams from Mermaid syntax or natural language. Supports flowcharts, Gantt charts, state diagrams, and sequence diagrams directly on the canvas.
device_hub
get_code_connect_suggestions
Detects Figma components in your selection and suggests mappings to matching code components in your codebase via Code Connect. Usually called automatically by the agent.
person MEET THE DUDE
Mandeep Kumar
Senior Product Designer · Beem
I design products by day and build with AI by night. DudeInDesign is where both sides meet.
Live · Toronto
--:--:--
location_on America/Toronto