How to Connect Figma to Claude Code (Figma MCP Guide)

Most vibe coders describe their Figma designs in chat and hope Claude interprets them correctly. You paste a screenshot, write "make this look exactly like my design," and get something close — but not quite. Colors are off, spacing is wrong, the component hierarchy doesn't match.

The Figma MCP fixes this at the root. It gives Claude Code direct access to your Figma file, so instead of guessing from a screenshot, Claude reads the actual design specs — layer names, colors, spacing, typography, component structure — and generates code that matches.

This guide walks through the full setup from scratch. If you've never configured an MCP before, that's fine — you'll have it running in under ten minutes.

What Is the Figma MCP?

MCP stands for Model Context Protocol — it's how you connect external tools and data sources to an AI model like Claude. If you want a conceptual introduction, see our what is MCP explainer.

The Figma MCP is an official server from Figma that exposes your design files to AI agents via that protocol. Claude Code can call it to read design specs for any node (frame, component, layer) you point it at. The server also supports writing directly to the Figma canvas — creating and modifying native Figma content from Claude — though write access is currently in beta and requires a Dev or Full seat on a paid Figma plan.

The MCP is free to use for read workflows. You need a Figma account — a Figma Pro plan is not required for read-only access. Note that on Figma's free Starter plan (and on View or Collab seats on paid plans), read access is capped at 6 MCP tool calls per month; a Dev or Full seat on a paid plan removes that limit.

What You Need Before Starting

• Claude Code installed and working on your machine. If you haven't done that yet, install it with:

npm install -g @anthropic-ai/claude-code

• A Figma account — a free Starter account works for read access, but it's capped at 6 MCP tool calls per month (a Dev or Full seat on a paid plan removes the cap). Write-to-canvas features require a Dev or Full seat on a paid plan.
• A browser — you'll authenticate via OAuth in your browser during setup. No personal access token needed.

Step 1 — Have Your Figma Account Ready

The official Figma MCP uses OAuth to authenticate — you'll sign in through a browser prompt during setup, so there's no token to generate upfront. Just make sure you're logged into Figma in your browser before you start.

If you ever need a personal access token for other Figma API use (not required for the MCP), you can generate one at: Account menu (top-left) → Settings → Security tab → Personal access tokens → Generate new token.

Step 2 — Add the Figma MCP to Claude Code

The official Figma MCP is a remote HTTP server hosted by Figma at https://mcp.figma.com/mcp. There is no npm package to install — you connect to it directly using the claude mcp add command.

Run this in your terminal from any directory:

claude mcp add --transport http figma https://mcp.figma.com/mcp

By default this adds the server at local scope (available only to you in the current project). If you want it available across all your projects, add the --scope user flag:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

The user-scoped version is the more practical choice — you only need to set it up once.

What this does under the hood

Running claude mcp add writes the server configuration to your Claude Code settings automatically. For reference, the project-level config lives in .mcp.json in your project root, and the user-level config lives in ~/.claude.json. You don't need to edit these files by hand.

Authentication

The remote Figma MCP uses OAuth — not a personal access token. You'll authenticate after restarting Claude Code in the next step.

Step 3 — Restart Claude Code and Authenticate

Close any open Claude Code sessions and reopen your terminal. When Claude Code starts, it will detect the Figma MCP server.

Before you can use it, you need to authenticate with Figma via OAuth. In Claude Code, type:

/mcp

This opens the MCP panel. Select figma, then choose Authenticate. A browser window will open asking you to allow Claude Code access to Figma. Click Allow Access. Back in Claude Code you should see: Authentication successful. Connected to figma.

To confirm it's working, ask Claude directly:

What MCP tools do you have available?

You should see figma listed in the output. If it doesn't appear, run /mcp again to check the server status and look for any error messages.

Step 4 — Get Your Figma File and Node URL

To let Claude read a specific design, you need either the file URL or a node-specific URL from Figma.

In Figma, right-click any frame or component and select Copy link. The URL will look like this:

https://www.figma.com/design/XXXXXXXXXXXXXXXX/My-Design?node-id=123-456

The part after node-id= is the node ID. You can pass either the full URL or just the node ID to Claude — it accepts both.

Step 5 — Generate a Component from Your Design

Here's where it comes together. With the Figma MCP connected, try this prompt in Claude Code:

Using the Figma MCP, read the design at this URL and generate a matching React component with Tailwind CSS:
https://www.figma.com/design/XXXXXXXXXXXXXXXX/My-Design?node-id=123-456

Claude will call the MCP to fetch the node's design data — layer structure, fill colors, spacing values, text styles, and any component properties — then write a component that reflects those values directly instead of approximating them from a description.

For a card component, you'd typically get back something that has the correct border radius, exact hex colors, and the right padding hierarchy. Not perfect, but dramatically more accurate than screenshot-based prompting.

Tips for Better Results

• Name your Figma layers clearly. Claude uses layer names as hints when generating code. A layer named card-body produces better output than Rectangle 12.
• Point at the right level. If you link to a top-level page, Claude gets a lot of noise. Link to a specific frame or component instead.
• Ask for the design system too. If you have a styles panel with colors and typography defined, you can ask Claude to also fetch those and use them as variables in the generated code.
• Follow up iteratively. Ask Claude to read a node, generate the component, then ask it to adjust specific details. The MCP stays active for the whole session.

What the Figma MCP Can and Can't Do

It can:

• Read any file or node you have access to via your Figma account
• Fetch component sets, variants, and properties
• Read fills, strokes, spacing, typography, effects
• Access published styles and design tokens (if set up in Figma)
• Write to the canvas — create and modify frames, components, variants, variables, and styles directly in Figma (requires a Dev or Full seat on a paid plan; currently in beta, free during beta)

It can't:

• Write to files outside your drafts with a Dev seat — Dev seat holders get read-only access
• Read Figma Prototype interactions or animation settings
• Access files in organizations you don't have read permission on
• Replace design judgment — it translates specs, not intent

Troubleshooting Common Issues

MCP doesn't appear in Claude's tool list Run /mcp to check the server status. If it shows as failed, try removing and re-adding the server: claude mcp remove figma then claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp.

"Unauthorized" or authentication errors Your OAuth session may have expired. Run /mcp in Claude Code, select the figma server, and re-authenticate. This is a known issue with the current OAuth implementation — re-authentication may be required each new session until Figma resolves it.

MCP server shows as failed on startup The remote server requires an active internet connection. Check your connection and run /mcp to retry the connection manually.

Claude reads the file but the output code looks wrong This usually happens when the node is too large (a full page) or has very deep nesting. Narrow the scope — link to a specific component rather than the whole file.

Next Steps

Once you're comfortable with the basic flow, there's more you can do:

• Combine the Figma MCP with other MCP servers — for example, pair it with the filesystem MCP so Claude can both read a design and write the generated component directly into your project.
• Set up Figma variables as design tokens in your codebase so the generated components reference token names instead of hardcoded values.
• Use the MCP during a full design handoff — instead of writing a spec document, point Claude at your Figma file and let it ask questions about the design before generating code.

The Figma MCP doesn't eliminate the gap between design and code entirely, but it closes most of it. For vibe coders who spend real time in Figma, this is one of the highest-leverage MCP setups available.