Vadym/obsidian
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
obsidian/wiki/claude-code/figma-mcp-guide.md
Vadym Samoilenko 49525fc6c8 vault backup: 2026-05-15 10:29:55
2026-05-15 10:29:55 +01:00

4.7 KiB
Raw Blame History

title aliases tags sources created updated
Guide to the Figma MCP Server
figma-mcp-overview
figma-mcp-server-guide
figma
mcp
design-to-code
code-to-canvas
claude-code
integrations
raw/Guide to the Figma MCP server.md
2026-05-15 2026-05-15

Guide to the Figma MCP Server

High-level overview of Figma's MCP server — what it does, how to connect it, and what clients support which features.

What It Does

The Figma MCP server bridges design and code in both directions:

  • Read designs → code — extract variables, components, layout data, and generated code from Figma frames
  • Write code → canvas — create/modify native Figma frames, components, auto layout, and variables via agent prompts
  • Live UI → Figma — capture running browser UI (localhost, staging, production) as editable Figma layers
  • FigJam / Make access — pull diagrams, flows, and prototype resources into your dev context
  • Code Connect consistency — keep generated code aligned to your actual component library

Two Server Variants

Variant How it runs Key difference
Remote (preferred) Hosted at https://mcp.figma.com/mcp Full feature set: write-to-canvas, code-to-canvas
Desktop Via Figma desktop app, local URL Subset of features; useful for orgs with strict network policies

Write-to-canvas and code-to-canvas are remote-only features.

Client Support Matrix

Client Desktop Remote Write to canvas Code to canvas Skills/Plugin
Claude Code ✓ ✓ ✓ ✓ Figma plugin
Claude Desktop ✓ ✓ ✓ ✓ Figma connector
Cursor ✓ ✓ ✓ ✓ Figma plugin
VS Code ✓ ✓ ✓ ✓ Figma plugin
Copilot CLI ✓ ✓ ✓ ✓ Figma plugin
Gemini CLI ✓ ✓ — — Extension
Codex (OpenAI) ✓ ✓ ✓ ✓ Codex Skills
Android Studio ✓ ✓ — — —
Amazon Q ✓ — — — —
Replit — ✓ — — —

Skills

Skills are agent-level instruction bundles layered on top of MCP tools. They tell the agent which tools to call, in what order, and how to apply the results.

Skills don't add new MCP capabilities — they package recommended workflows. Examples:

  • Connect Figma components to code via Code Connect
  • Generate design system rules aligned to your codebase
  • Translate a selected frame into production-ready code

See wiki/claude-code/figma-mcp-skills for the full list of 8 Figma skills.

Core Usage Patterns

Get Design Context (link-based)

  1. Select a layer in Figma Design
  2. Copy the URL from the browser address bar
  3. Paste into your MCP client prompt: "Implement this design"
  4. The client extracts the node ID and calls get_design_context

Send Live UI to Figma (remote only)

  1. Prompt: "Start a local server for my app and capture the UI in a new Figma file"
  2. Client opens browser window; use the capture toolbar to capture pages/states
  3. Client creates a Figma file and returns the link

Write to Canvas

Requires remote server + a Skills prompt. Agent builds/modifies frames using the design system as the source of truth. Currently free during beta; will become usage-based.

Plans & Access

  • Remote server — all seats and plans
  • Desktop server — Dev or Full seat, all paid plans
  • Write-to-canvas — free during beta period; will become usage-based

Key Takeaways

  • Remote server is always preferred — wider feature set, no desktop app dependency
  • Write-to-canvas and code-to-canvas are remote-only — check client support matrix first
  • Skills reduce guesswork by packaging multi-tool workflows into reusable instructions
  • Design context is URL-based — paste a Figma layer URL and the node ID is auto-extracted
  • Code Connect keeps generated code consistent with your actual component library

Related

Sources