Connect Claude to Figma: Figma MCP (Dev Mode) Setup for Claude Code (2026)

The screens you design in Figma can be read by Claude and turned into code. One thing to know up front: this integration runs through the Figma MCP server in Claude Code (terminal) or MCP-capable tools like VS Code and Cursor — not the claude.ai chat. In February 2026 Figma officially announced a bidirectional integration with Claude Code (design to code, code to canvas). This guide covers setup (remote and desktop), what you can do, plans and usage, and the limits.

First — this is Claude Code, not the claude.ai chat

Unlike the Notion and Google connectors, the Figma MCP does not work in the claude.ai web chat. Use it from MCP-capable clients like Claude Code, VS Code, or Cursor (per Figma's official docs and forum). The main use is design-to-code for designers and developers.

What you can do

• Frame to code: turn a selected Figma frame into code
• Extract design context: pull variables, components, and layout data into your IDE (great for design systems)
• Generate FigJam diagrams: create architecture diagrams and ERDs from prompts or code
• Retrieve Make resources
• Code to Canvas: send live UI built in code back to Figma as editable layers (remote server, select clients)

Method 1 — Remote server (recommended)

Recommended for most users and has the broadest features; no desktop app needed.

1. Install Claude Code: npm install -g @anthropic-ai/claude-code
2. Install the official Figma plugin (MCP settings + Agent Skills): claude plugin install figma@claude-plugins-official
3. Restart Claude Code, then /plugin → Installed tab → select figma → start authorization
4. Click Allow access in the browser to authenticate your Figma account → back in the terminal run /plugin again → confirm "connected"

To add it manually instead of the plugin: run claude mcp add --transport http figma https://mcp.figma.com/mcp, then /mcp → select figma → Authenticate → Allow Access.

Method 2 — Desktop (local) server

For specific organization/enterprise cases (Figma recommends the remote server).

1. Update the Figma desktop app to the latest version and open a design file.
2. Switch to Dev Mode (toolbar toggle) → enable the MCP server in the right sidebar (or Figma menu → Preferences → Enable Dev Mode MCP Server).
3. Copy the address it shows: http://127.0.0.1:3845/mcp.
4. Register it: claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

The desktop server only responds while the Figma app is open and the server is enabled.

Turning designs into code — how to use it

• Link method: copy a frame/layer link in Figma and pass it to Claude Code — e.g., "Implement this design as a responsive React + Tailwind component. https://www.figma.com/design/…?node-id=123-456". The client extracts the node-id from the URL to fetch just that object.
• Selection method: (desktop) select a frame in Figma, then ask — this is more precise.

Connect a design system (component library) and use Code Connect to reuse real components for more consistent output.

Plans and usage

The Figma MCP server is part of Figma Dev Mode.

• Starter plan or View/Collab seats: limited to about 6 tool calls per month
• Dev/Full seats on Professional, Organization, or Enterprise: per-minute limits (same as Figma REST API Tier 1)
• Write to canvas (Code to Canvas) is free during the beta — planned to become a usage-based paid feature later

For real work, a Pro plan or above with a Dev/Full seat is recommended. Plans and limits can change, so confirm at figma.com (subject to change).

Troubleshooting / limits

1. Server not in the list: fully restart Claude Code (MCP connections initialize at startup).
2. Authentication: /mcp → figma → Authenticate → browser OAuth.
3. Desktop server: confirm the Figma app is open with the MCP server enabled.
4. Not the claude.ai web app: use an MCP client like Claude Code.

Limits: it is weak at surgical edits to existing code, multi-frame flows need extra work, and the output is a starting point, not finished code (add your own state, events, and edge cases).

Related: How to connect MCP (4 ways), Recommended Claude MCP servers, Connect Claude to Notion, Connect Claude to Google, MCP connector security · Connect Claude to Slack

Sources: official Figma docs (help.figma.com, developers.figma.com), the Figma blog, and github.com/figma/mcp-server-guide. Commands, plans, and limits are as of 2026 and may change. Check the official Figma and Claude Code docs for the latest. usingclaude.com is an unofficial information site.