Setup Guide — Claude Code
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
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 | bashroute
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 ~/.zshrcrocket_launch
4. Launch Claude Code & authenticate
A browser window will open — complete the OAuth flow to link your Anthropic account to the CLI.
$
claudeelectrical_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/mcptask_alt
6. Verify MCPs are registered
Both figma and figma-desktop should appear in the output.
$
claude mcp listbrush
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.
handyman Learn about tools and how it works
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
