Is the Figma MCP server free?

The remote server works on every plan and seat type, but reads are rate limited. According to Figma's documentation on 4 October 2026, the Starter plan gets up to 20 tool calls per month. Dev and Full seats on paid plans get daily limits instead.

What is the command to add Figma MCP to Claude Code?

Figma recommends installing its plugin: claude plugin install figma@claude-plugins-official. The plugin bundles the MCP server settings and Agent Skills. Afterwards, type /mcp in Claude Code, select figma and choose Authenticate.

Can I ship the code that Figma MCP returns as is?

I wouldn't. get_design_context returns a React and Tailwind representation of your selection. Figma itself treats it as a description of the design and recommends translating it into your project's own components, tokens and conventions.

Do I need Code Connect?

No, but it helps. Code Connect maps Figma components to your real code components so generated code reuses them. Figma's help center lists it for Organization and Enterprise plans with a Full or Dev seat.

Figma MCP with Claude Code: getting tokens and components into code

The Figma MCP server lets Claude Code read a Figma file directly: the variables, components, layout and a screenshot of whatever you select. Install it with claude plugin install figma@claude-plugins-official, sign in to Figma through /mcp, and paste a frame link into Claude Code. Claude then writes tokens and components that follow your project's conventions.

This post belongs to the Claude Code for designers series. My angle is the design system side: how to keep what comes out of Figma inside the token rules you already have. Commands and limits were checked against Figma's and Anthropic's documentation on 4 October 2026. The token examples come from this site's own repository.

What is the Figma MCP server?

MCP (Model Context Protocol) is an open standard that lets AI tools call outside data and actions. The Figma MCP server is Figma's implementation of it. Connected to Claude Code, it gives Claude a set of tools for working with your Figma files.

Figma offers two servers:

Remote server. Connects to Figma's hosted endpoint and doesn't need the desktop app. Figma recommends it and it has the broadest feature set.
Desktop server. Runs locally through the Figma desktop app. Figma's help center says it needs a Dev or Full seat on a paid plan.

The three read tools I lean on for design-to-code:

Tool	Returns	Use it for
`get_variable_defs`	Variables and styles used in the selection: colour, spacing, type	Tokens
`get_design_context`	A structured representation of the selection, React and Tailwind by default	Components
`get_screenshot`	An image of the selection	Checking the result against the design

The full list also covers tools that write back to the canvas, Code Connect tools, and a prompt called create_design_system_rules. The link is in the sources.

How do you install it in Claude Code?

If Claude Code isn't installed yet, start with installing Claude Code. Then:

Install the Figma plugin from Anthropic's official marketplace. It includes the MCP server settings plus Agent Skills for common workflows.
```
claude plugin install figma@claude-plugins-official
```
Restart Claude Code if it was running.
Sign in to Figma. Type /mcp, select figma, choose Authenticate, and click Allow Access in the browser.
Confirm the connection. Run /mcp again; figma should show as connected.

For a manual setup without the plugin, Figma documents this command:

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

Add --scope user to make the server available in every project instead of only the current folder.

Install plugins and MCP servers only from sources you trust. The official marketplace is named claude-plugins-official, and its Figma plugin points at the figma/mcp-server-guide repository on GitHub.

Which Figma plans work, and what are the limits?

Limits apply to tools that read data from Figma. This table is copied from Figma's rate limits page as of 4 October 2026, and Figma notes the numbers may change.

Plan and seat	Limit
Starter plan	Up to 20 calls per month
View or Collab seat on a paid plan	Up to 6 calls per month
Dev or Full seat, Professional	Up to 200 per day, 10 per minute
Dev or Full seat, Organization	Up to 200 per day, 15 per minute
Dev or Full seat, Enterprise	Up to 600 per day, 20 per minute

Twenty calls a month is enough to try a few frames. Daily use realistically needs a Dev or Full seat on a paid plan.

How do you pull tokens out of Figma?

Copy a link to the frame: right-click a frame or layer and choose Copy link to selection. Paste it into Claude Code with an explicit request:

Read the variables used in this frame with get_variable_defs.
List names and values, then match them against the tokens in app/globals.css.
If a variable already maps to a token, just report the match. Don't add a new one.
If it doesn't, propose a name following our raw, alias, semantic layers.

The last two lines matter most. Without them, Claude tends to paste hex values straight into components. Figma's own guide gives similar advice: if you get raw values instead of tokens, ask for the variable names and values explicitly.

On this site, tokens flow through three layers. This is a real chain from app/globals.css:

--gray-600: #717171;                     /* raw: a value, no meaning */
--neutral-600: var(--gray-600);          /* alias: a role on the ramp */
--subtle-foreground: var(--neutral-600); /* semantic: what components use */

When Claude reads a Figma variable, its job is to find which layer that value already belongs to. Components may only touch the semantic layer. Design tokens explained covers why the middle layer matters.

How do you turn a frame into a component?

get_design_context returns the selection as React and Tailwind. Figma describes this as a starting point that the agent should translate into your framework, components and tokens. My routine:

Select small. One card, one header, one filter row. Figma's guide warns that large selections slow the tools, cause errors and return incomplete results.
Name the destination. Which file, which existing components to reuse. For example: "Use Button from components/ui-shadcn/button.tsx and put the new component in components/work/."
Grab a screenshot too. get_screenshot gives Claude a reference to check its own output against.
Read the diff. Look for hex codes, stray pixel values, shadow- classes, anything that breaks the system's rules.

If your team is on Organization or Enterprise, Code Connect maps Figma components to the real ones in your codebase. Figma calls it the number one way to get consistent component reuse.

What rules should Claude have before it touches Figma?

Figma suggests project-level rules, written like onboarding notes for a new developer. In Claude Code that place is CLAUDE.md, and Figma's create_design_system_rules prompt can draft a first version.

This is the block I would add to this repository, built from rules already in its AGENTS.md:

## Figma MCP
- Call get_design_context for the exact node requested, then get_screenshot.
- Treat the React and Tailwind output as a design description, not final code.
- Colours come from semantic tokens only: background, foreground, muted, border.
- No box-shadow. Elevation is a 1px hairline border or a bg-muted fill.
- Type uses weight 400 or 500; hierarchy comes from size, colour and tracking.
- Reuse components in components/ui-shadcn before creating new ones.

Most of these lines already exist in the site's AGENTS.md and DESIGN.md. The block only gathers them in the order Claude needs them during Figma work.

What usually goes wrong?

Symptom	Likely cause	Fix
No Figma tools available	Not authenticated, or Claude Code not restarted	Run `/mcp`, check `figma`, authenticate again
Rate limit reached	Starter plan or a View/Collab seat	Use smaller selections, or move to a Dev/Full seat
Hex codes everywhere	Variables not bound in Figma, or the prompt never mentioned tokens	Bind variables in the file and ask for `get_variable_defs`
Layout breaks when resized	Frame isn't built with auto layout	Rebuild with auto layout and stretch the frame before calling
Existing component rewritten	Claude doesn't know it exists	List component paths in your rules, or use Code Connect

For a real system this applies to, the Joyme case study shows the 50+ component library I designed for its first version. If you want to talk about design systems or design-to-code workflows, the about page has my contact details.

Sources

Figma, Remote server installation
Figma, Tools and prompts
Figma, Rate limits and access
Figma, Structure your Figma file for better code
Figma, Guide to the Figma MCP server
Figma, Code Connect: who can use it
Figma, mcp-server-guide on GitHub
Anthropic, Discover plugins

Install commands, tool names and rate limits were checked against these pages on 4 October 2026.