Jonathon's AI Wiki

Figma MCP Server (April 2026)

13 min read

Source: Figma Blog Agents Meet Figma Canvas, Figma Github Mcp Server Guide, Figma Help Schema 2025 Whats New, Reddit R Claudecode Figma Mcp Write Access, Buildmvpfast Figma Claude Code Mcp 2026, Builder Io Claude Code To Figma, Trq212 Figma Mcp Update Tweet

Figma MCP is the bidirectional bridge between Figma files and AI coding tools — read design context into code, write running UI back to the canvas, and let agents execute Plugin API JavaScript directly inside Figma files. As of April 2026, the remote server is generally available on all seats and plans (free tier gets 6 tool calls/month), the desktop server is GA on paid plans with a Dev/Full seat, and the full write-to-Figma stack ships as Figma-authored skills. The Mar 2026 use_figma release turned this from “design context reader” into “agent that writes design systems.”

Key Takeaways

  • Three capability waves: June 2025 beta (read-only design context), Feb 2026 (generate_figma_design — one-way code-to-canvas via web screenshot), Mar 2026 (use_figma — full read/write via Plugin API JavaScript). April 2026 is a GA + tooling-polish moment, not a new-capability moment.
  • Two deployment modes, pick one: Remote server (claude mcp add --transport http figma) is free to start and works on all plans; desktop server requires Dev/Full seat on a paid plan but enables selection-based prompting — no URL needed, the server uses whichever node is currently selected in the Figma desktop app.
  • The MCP exposes ~16 tools. The ones that matter most in practice: get_design_context, get_metadata, get_screenshot, search_design_system, use_figma, generate_figma_design, plus an assets localhost endpoint.
  • use_figma is the write primitive. Everything agents do inside Figma — create nodes, bind variables, swap variants, override text, import library components — runs through use_figma executing Plugin API JavaScript. The figma-use skill is a mandatory prerequisite that encodes all the gotchas.
  • Code Connect is the quality multiplier. Without it, MCP generates generic React + Tailwind. With it, MCP returns your actual component code from your actual codebase. UI-based setup is now GA on Org/Enterprise; CLI still supported.
  • generate_figma_design (code → Figma canvas) is Claude Code + Remote MCP only. If you want to push running UI back to Figma as editable layers, you must use Claude Code with the remote transport. Other clients get design-reading but not design-writing-from-rendered-UI.
  • Figma-published skills ship as markdown files. Seven skills in plugin v2.1.7: figma-use, figma-implement-design, figma-generate-design, figma-code-connect, figma-create-design-system-rules, figma-create-new-file, figma-generate-library. You have all seven installed locally.

Timeline

  • June 4, 2025 — Figma announces MCP server beta. Read-only design context for dev workflows.
  • Jan 26, 2026 — FigJam diagramming via Figma MCP app in Claude.
  • Feb 17, 2026 — generate_figma_design launched: one-way capture from web to Figma editable layers. Claude Code + Remote MCP only.
  • Mar 2026 — use_figma goes live: full read/write access, agents execute Plugin API JS directly. The “canvas is open to agents” announcement.
  • Mar 5, 2026 — Figma Slots in open beta (separate feature, but matters for component architecture).
  • Mar 24, 2026 — Community watershed: @trq212 posts “Today’s Figma MCP update makes it one of the strongest integrations with Claude Code I’ve seen.”
  • Mar 30, 2026 — GitHub figma/mcp-server-guide version bump, Gemini extension added.
  • Apr 7, 2026 — Figma publishes “How to set up Figma remote MCP server [April 2026]” setup video covering Claude Code, Cursor, and Codex.
  • Apr 2026 (ongoing) — Figma MCP now supports: Augment, Claude Code, Codex, Copilot CLI, Copilot in VS Code, Cursor, Factory, Firebender, Warp, Gemini.

Architecture: Remote vs Desktop

Remote server

  • claude mcp add --transport http figma
  • OAuth through /mcp authenticate flow
  • Free tier: 6 tool calls/month on Starter, View, or Collab seats
  • Paid Dev/Full seats on Pro/Org/Enterprise: per-minute rate limits matching Tier 1 Figma REST API
  • Requires passing a Figma URL to tools (fileKey + node-id)
  • Enables generate_figma_design (the code → Figma capture tool is remote-only)

Desktop server

  • Requires Figma desktop app running + Dev or Full seat on a paid plan
  • Selection-based prompting: tools use the currently selected node in the open Figma file. No URL parameter needed.
  • Better ergonomics for repeated interactions with the same file
  • Does not expose generate_figma_design (remote-only)

Core Tools (the 6 you’ll actually use)

ToolDirectionPurpose
get_design_contextFigma → agentStructured React + Tailwind representation of a node. Main read path.
get_metadataFigma → agentHigh-level node tree. Use when get_design_context is too large to return.
get_screenshotFigma → agentRendered PNG of a node. Visual source of truth for validation.
search_design_systemFigma → agentDiscover components, variables, and styles across linked libraries. includeComponents, includeVariables, includeStyles flags.
use_figmaagent → FigmaExecute Plugin API JavaScript in the file. Write primitive for everything.
generate_figma_designweb → FigmaCapture rendered web page as editable Figma layers. Claude Code + Remote MCP only.

Plus: the MCP server exposes a localhost assets endpoint that serves image and SVG assets from the Figma file. Strict rule: use these localhost URLs directly, don’t create placeholders, don’t install new icon packages.

The Seven Figma Skills (installed locally, v2.1.7)

All seven are published by Figma as markdown files, installable as part of the Figma Claude Code plugin:

SkillRole
figma-useMandatory prerequisite for any use_figma call. Encodes Plugin API gotchas: color ranges (0-1, not 0-255), font loading, page context rules, return-is-output-channel, atomicity, layoutSizing ordering.
figma-implement-designFigma → code. 7-step workflow: parse URL → get_design_context → get_screenshot → download assets → translate → pixel-perfect → validate.
figma-generate-designCode → Figma canvas (design system-aware). 6-step workflow: understand screen → discover design system → create wrapper → build sections incrementally → validate → update path. Pairs with figma-use.
figma-code-connectCreate/maintain Code Connect mappings between Figma components and code components.
figma-create-design-system-rulesGenerate project-specific CLAUDE.md / AGENTS.md / Cursor rules for Figma-to-code workflows. Encodes component paths, design token locations, naming conventions.
figma-generate-libraryBuild or update a professional-grade design system in Figma from a codebase.
figma-create-new-fileCreate a new Figma file (entry-point operation).

Core Workflows

1. Figma → Code (figma-implement-design)

User gives a Figma URL. Agent:

  1. Parses URL → fileKey + nodeId
  2. get_design_context(fileKey, nodeId) → structured React + Tailwind data
  3. get_screenshot(fileKey, nodeId) → visual reference, kept throughout
  4. Downloads assets from the MCP’s localhost endpoint (never installs new icon packages, never uses placeholders)
  5. Translates to project conventions — reuses existing components, maps Figma tokens to project design tokens, replaces Tailwind classes with the project’s styling approach
  6. Implements with pixel-perfect parity to the screenshot
  7. Validates against the screenshot (layout, typography, colors, states, responsive behavior, accessibility)

Key principle: Figma MCP output (React + Tailwind) is a representation of design intent, not final code style. The skill’s job is translation to the project’s conventions.

2. Code → Figma Canvas (figma-generate-design + figma-use)

Build a full Figma screen from code or a description, using the published design system rather than hardcoded values:

  1. Understand the screen — read source code, identify sections and components
  2. Discover design system — run search_design_system with broad terms (“button”, “card”, “space”, “color”), also inspect existing screens for authoritative component maps. Critical warning: getLocalVariableCollectionsAsync() only returns local variables; remote library variables require search_design_system with includeVariables: true.
  3. Create page wrapper first (1440px VERTICAL auto-layout, HUG height, positioned away from (0,0) to avoid overlap)
  4. Build sections incrementally, one section per use_figma call. Import components by key, bind variables (not hex colors), apply text/effect styles. Validate each section with get_screenshot.
  5. Full-page validation — screenshot individual sections (not just the full page) to catch cropped text, overlaps, placeholder text, blank images.
  6. Update path — use get_metadata to find existing nodes, surgically modify, swap component variants, remove deprecated sections.

Parallel workflow for web apps with images: Run generate_figma_design alongside use_figma — the capture provides pixel-perfect layout reference AND the imageHash values you need to transfer images into your design-system-linked output. Without this, image frames stay blank because use_figma can’t fetch external image URLs.

3. Running UI → Figma Canvas (generate_figma_design)

Claude Code + Remote MCP only.

  1. Build a feature in Claude Code, preview in browser
  2. Prompt: “Send this to Figma”
  3. Figma MCP captures the browser’s current state as editable Figma layers (preserves structure, auto-layout, component hierarchy)
  4. Team annotates/explores variants in Figma
  5. To bring changes back to code, reference the updated design in a new prompt

The feature captures the live rendered state — production, staging, or localhost. Not a static screenshot; true editable frames.

4. Plugin API Writes (use_figma — the primitive)

Every write to Figma flows through use_figma executing Plugin API JavaScript. Critical rules (full list in figma-use SKILL.md):

  • return is the output channel — console.log is invisible to the agent
  • Atomic — failed scripts don’t execute at all, nothing is partially created
  • Page context resets between calls — always re-set figma.currentPage if targeting non-default page
  • Async-wrapped for you — use top-level await/return, don’t wrap in IIFE
  • Colors 0-1 range — {r: 1, g: 0, b: 0} = red
  • Fonts must be loaded — await figma.loadFontAsync(...) before any text operation
  • layoutSizing = 'FILL' AFTER appendChild — setting before throws
  • Always return node IDs — subsequent calls need them as string literals
  • Never use figma.notify() — throws “not implemented”
  • Incremental work — break large operations into multiple use_figma calls, validate with get_metadata + get_screenshot after each step

Code Connect

Code Connect bridges a repo to Figma’s Dev Mode, mapping Figma components to their real code implementations. Without Code Connect, MCP returns autogenerated code examples. With it, MCP returns the actual component code from the codebase.

Two setup paths:

  • Code Connect UI (GA on Org/Enterprise, Full/Dev seat) — runs inside Figma, connects to GitHub for repo access. Supports one-to-many mappings: one Figma component can map to multiple code implementations (React, SwiftUI, Jetpack Compose, Vue).
  • Code Connect CLI — npx figma connect publish --token=PERSONAL_ACCESS_TOKEN. Still fully supported. Files in the codebase use .figma.tsx pattern.

Both methods feed the same MCP infrastructure. Teams often use a mix — UI for quick setup, CLI for automation.

Pricing and Rate Limits (April 2026)

  • Remote MCP server: free to use on all plans and seat types during beta
  • Starter plan, View seat, Collab seat: up to 6 tool calls per month
  • Dev or Full seat on Pro/Org/Enterprise: per-minute rate limits matching Tier 1 Figma REST API
  • Desktop MCP server: requires Dev or Full seat on a paid plan
  • Code Connect UI: Org and Enterprise plans, Full or Dev seat
  • Variable mode limits: Pro plan = 10 modes/collection; Org plan = 20 modes/collection

“This will be a paid API, but we’ll be offering it for free during the beta period as we learn how to account for agentic behavior in our paid seats.” — Figma blog. Expect paid pricing post-beta.

Competitive Landscape

Figma is not the only design tool building MCP servers in 2026:

  • Paper (Dropbox) — own MCP server. One developer: “Paper MCP >> Figma MCP.” Tighter integration with Dropbox’s design philosophy.
  • Pencil — “Ollama for design-to-code.” Runs locally, powered by Claude Code, converts Figma designs to production code on your machine. Not a cloud MCP — a local pipeline.
  • Anima, Locofy, TempoLabs — traditional Figma → code tools. Generally not MCP-based, pre-date the protocol.

Figma’s bet: be the design destination regardless of which AI tool generates the code. The broad client support (Augment, Claude Code, Codex, Copilot CLI, Cursor, Factory, Firebender, VS Code, Warp, Gemini) reflects this strategy — not winning a single agent, winning the interchange format.

Setup in Claude Code (Full Path)

# Remote server, scoped to current project
claude mcp add --transport http figma
 
# Or globally
claude mcp add --scope user --transport http figma

Then in Claude Code:

  1. Type /mcp
  2. Select figma
  3. Click Authenticate — browser opens for Figma OAuth
  4. Right-click any Figma frame → “Copy link to selection” → paste into Claude Code with a prompt

Confirm skills are available: the seven figma-* skills should appear when you /skills in Claude Code, loaded from .claude/plugins/cache/claude-plugins-official/figma/2.1.7/skills/.

Try It

  • Quick validation run — install the remote server (claude mcp add --transport http figma), authenticate, and run figma-implement-design against one existing Figma frame. Measure: how close to the design does the first-pass code get before manual adjustment?
  • Push a component library to Figma — pick a component set already in code, run figma-generate-library to build the Figma source of truth. Then run figma-create-design-system-rules to lock in the conventions.
  • Code Connect on one repo — set up Code Connect on a codebase you already have, even without Figma files yet. Primes future Figma work to return your components, not generic React.
  • Site redesign workflow — for any client site migration: (1) build new page in Claude Code with Tailwind, (2) “Send this to Figma” for client review, (3) iterate in Figma, (4) pull annotated changes back into code. Replaces the current static-mockup-handoff loop.

Open Questions

  • use_figma real-world throughput — the skill’s incremental-call pattern (one section per call) is correct for reliability but slow. What’s the p50 time to build a 5-section landing page end-to-end? Worth measuring.
  • Code Connect ROI at multi-client scale — with many client sub-accounts, is the one-time Code Connect mapping cost justified per client site? Or only at the shared component-library level?
  • Desktop vs Remote for daily use — the selection-based prompting of desktop is a huge ergonomic win, but requires Dev/Full seat. What’s the cost delta, and does it matter for a single-developer workflow vs team use?
  • How does Figma Slots (Mar 5 2026 beta) change the component model exposed via MCP? Slots affect detaching behavior — MCP’s component property overrides may behave differently on slotted vs non-slotted components.
  • Paper MCP comparison — one developer called Paper MCP better than Figma MCP. Worth testing Paper directly; Paper’s strength (from Dropbox) is around writing/editing flows, not pixel design, which may be complementary rather than competitive.
  • The generate_figma_design capture limits — how large a page can be captured? What breaks at scale (200+ node pages)? No documented limits found.
  • Rate limit math for agentic workflows — Tier 1 REST API limits are per-minute. An incremental 10-section build could hit limits if each use_figma call counts as multiple underlying requests. Unclear whether Figma counts them as one or many.
  • Multi-file operations — Figma MCP examples all target a single file. What’s the workflow for cross-file operations (design system in file A, screen in file B, Code Connect repo targeting both)?

Graph View

Backlinks