Figma MCP Server

What it does (plain English)

When you paste a screenshot of a design into Claude, it has to guess spacing, colours and component names. The Figma MCP server removes the guessing. It gives Claude the actual design data from your file: frames, auto layout, variables (Figma’s stored values for colour, spacing and type) and components. An MCP server is a plug-in that gives Claude a new ability, and this one is run by Figma.

The main tool, get_design_context, returns a structured React + Tailwind version of whatever you point it at. Figma calls this “a starting point”: Claude then adapts it to your framework. Other tools cover screenshots, metadata, variables, Code Connect mappings, FigJam diagrams, and (on the remote server) writing native Figma content back to the canvas.

There are two versions. The remote server at https://mcp.figma.com/mcp needs no desktop app. The desktop server runs inside the Figma desktop app and lets you work with whatever you have selected in the app.

Is it for you?

Pick it if you design in Figma (or receive Figma files from a designer) and build the front end with Claude. It is especially good when your file uses components and variables; Figma’s own best-practice notes say semantic layer names and auto layout give better code.

Check your plan first. On the Starter plan, or with a View or Collab seat on a paid plan, Figma limits you to 6 tool calls per month, which is enough to try it but not to work with it daily. Dev or Full seats on Professional, Organization or Enterprise plans get per-minute limits instead.

What you can do with it

• Frame to code: copy the link to a frame in Figma, paste it in Claude and say “Implement this design using our components in src/components/ui.” Claude cannot browse the link; the server reads the node ID from it.
• Match your stack: “Generate iOS SwiftUI code from this frame” or “Use Chakra UI for this layout” are prompts straight from Figma’s guide.
• Reuse real components: with Code Connect set up, Claude maps Figma components to the ones already in your codebase instead of inventing new ones.
• Pull tokens: ask for the variables used in a frame and turn them into CSS custom properties.
• Draw a diagram: in claude.ai, ask for a flowchart and refine it in chat before opening it in FigJam.

How to set it up

1. Claude Code, recommended route. Install Figma’s plugin from Anthropic’s official marketplace. It bundles the server settings plus Figma’s skills:

   claude plugin install figma@claude-plugins-official

2. Claude Code, manual route (if you can’t install plugins):

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

   Add --scope user after add to make it available in every project.

3. Authenticate. Start a new Claude Code session, type /mcp, select figma, choose Authenticate, and click Allow access in the browser.

4. claude.ai. Following Figma’s help centre: go to Settings > Connectors, click Browse connectors, select Figma, click Connect, and follow the sign-in prompts.

5. Desktop server (optional). Requires the Figma desktop app and a Dev or Full seat on a Professional, Education, Organization, Government or Enterprise plan. Open a Design file, switch to Dev Mode (Shift+D) with nothing selected, and enable the desktop MCP server in the right sidebar. Then:

   claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Watch out for

• Only approved clients connect. Figma’s docs say only clients listed in its MCP catalog (such as VS Code, Cursor and Claude Code) can connect to the remote server, so a generic custom connector may not work. Use the official paths above.
• Rate limits apply to reads. Tools that read design data count against your limits; Figma says some write tools are exempt and that it may change limits.
• Canvas writing will cost money later. It is free during the beta period and Figma says it will become a usage-based paid feature.
• Image generation uses AI credits. The generate_image tool is meant to ask permission and disclose Figma AI credit usage before running.
• Output is a reference, not final code. Review generated components, especially accessibility and responsive behaviour.

Alternatives

• Canva connector if your work is marketing graphics and social posts rather than app UI.
• Playwright MCP to check the built page in a real browser after Claude writes it.
• Vercel MCP or Netlify MCP to deploy the result.