Figma MCP + Claude Code: Build Websites From Your Design System

What does the Figma MCP server actually give Claude Code?

Generic AI websites happen because the model has no design context, so it falls back on averages. The Figma MCP server fixes the input rather than the prompt. Figma's tools reference splits the server into read tools that pull design data into your editor and write tools that create content in Figma. get_design_context is the default entry point for design-to-code, and Figma notes its output is React plus Tailwind by default, which you can steer to Vue, plain HTML and CSS or iOS through your prompt.

• •get_design_context: structured design context for a layer or selection, the main tool for implementing a frame.
• •get_variable_defs: the variables and styles used in a selection, such as colours, spacing and typography, which is how your tokens survive the trip into code.
• •get_screenshot: a PNG of the selection so Claude can compare its build with the design; Figma recommends keeping it on unless you are worried about token limits.
• •get_metadata: a sparse XML outline of layer IDs, names, types, positions and sizes, for breaking a very large design into pieces.
• •search_design_system and get_libraries (remote only): find existing components, variables and styles in connected libraries before building anything new.

Remote or desktop: which Figma MCP server should you use with Claude Code?

The remote server, hosted at mcp.figma.com/mcp, needs no desktop app, uses OAuth and has the broadest feature set, including every write tool. The desktop server runs inside the Figma desktop app at 127.0.0.1:3845/mcp once you enable it from the MCP server section of the Dev Mode inspect panel. Figma's docs state that selection-based prompting only works with the desktop server, while the remote server needs a link to a frame or layer. Figma positions the desktop server for specific organisational needs, so for most teams the remote server is the right default. Tutorials using an SSE endpoint at 127.0.0.1:3845/sse describe an older setup, so check dates before copying.

How do you connect the Figma MCP server to Claude Code?

Figma's recommended route is its Claude Code plugin, which bundles the MCP server settings with Agent Skills for common Figma workflows. The manual route is a single claude mcp add command. Both end with the same OAuth sign-in. For a team, --scope project writes the server into a committed .mcp.json file, and Claude Code asks each teammate to approve it once.

What do Figma MCP seats, plans and rate limits mean in practice?

Access depends on plan and seat, with per-minute limits on top of daily or monthly caps for tools that read data. On Starter, and for View or Collab seats on paid plans, the allowance is monthly, and one design-to-code pass calls several tools. Some tools are exempt from the limits, including add_code_connect_map, create_new_file and whoami, and the tools reference says generate_figma_design is exempt too. Writing to the canvas with use_figma needs a Full seat; Dev seats are read-only outside their drafts. Write to canvas is free during its beta and will become usage-based, and Figma may change limits, so recheck before budgeting.

How should you prompt Claude Code to implement a Figma frame?

Figma's guidance is to brief the agent like a teammate: name the framework, component folder, file path and layout primitives. Right-click a frame in Figma, choose Copy link to selection, and paste that link into prompts like the ones below. Work one section or component at a time: Figma's docs warn that large selections slow the tools down, cause errors or return incomplete responses, and Claude Code warns when an MCP result exceeds 10,000 tokens. If you wanted token values and got code back, say exactly which tool you want, for example: Get the variable names and values for this selection.

• •Implement this frame <link> in Next.js using only components from components/ui. Do not create new primitives; if something is missing, stop and list it.
• •Call get_variable_defs on <link> first and map every colour, spacing and radius value to our existing Tailwind theme variables. Report any value that has no matching token instead of hard-coding it.
• •After building, call get_screenshot on <link> and compare it with the running page at 375px and 1440px; list every visual difference before you fix anything.

How does Code Connect stop Claude from duplicating your components?

Figma's file-structure guidance puts it bluntly: linking components to real code with Code Connect is the number one way to get consistent component reuse, and without it the model is guessing. For connected components, the server sends CodeConnectSnippet markers with property values, the import statement, a usage snippet and your custom instructions. On the remote server you can tell Claude to set the clientFrameworks parameter to your Code Connect label, such as React, so it receives the right mapping when one component is mapped to several frameworks. Code Connect is available on Organization and Enterprise plans and needs a Full or Dev seat.

• •Code Connect UI runs inside Figma and connects to GitHub; it generates import statements from the mapped path and component name. Use Add instructions for MCP to record prop patterns, accessibility rules and team conventions.
• •Code Connect CLI runs in your repository and gives richer snippets with prop mappings. Figma now recommends template files (for example Button.figma.ts), and its GitHub README says the framework-specific parsers will no longer receive updates.
• •Start with the components you use most: Button, Input, Card, Nav, Footer. Figma's own best-practice list starts with connecting core components and keeping mappings current when component APIs change.
• •The figma-code-connect skill helps Claude write Code Connect templates from a Figma component URL, and add_code_connect_map is exempt from rate limits, so mapping a library does not burn your read allowance.

How do you turn Figma variables into Tailwind design tokens?

In Tailwind CSS v4, theme variables defined with the @theme directive decide which utility classes exist, so a variable named --color-brand-500 produces bg-brand-500, text-brand-500 and a matching CSS variable. That is a clean landing spot for Figma variables. Alex Bobes, in his CTO guide to Figma MCP, notes that the official server's output can include arbitrary values such as leading-[22.126px] that agents copy verbatim, which is exactly what a token pass is meant to catch. Our guide to design tokens and CLAUDE.md rules covers the rules-file side; this is the Figma half.

Can Claude Code push designs back into Figma?

Yes, in two different ways, and they are easy to confuse. generate_figma_design (code to canvas) captures live UI from a browser, whether localhost, staging or production, and turns it into editable Figma layers in a new file, an existing file or your clipboard. Figma's FAQ calls the result flat layers with no library connection. use_figma (write to canvas) is structured generation: it runs Plugin API JavaScript inside a Figma file so the agent can build frames, components, variants, variables and auto layout using your existing library. Figma opened the canvas to agents in March 2026, and in that announcement Cat Wu, head of product for Claude Code, said skills teach Claude Code how to work directly in the design canvas. Figma recommends the figma-use skill before any use_figma call and testing on a duplicate library during the beta.

• •Round trip: Start a local server for my app and capture the UI in <Figma file URL>. Designers then annotate and rearrange; you bring decisions back with a frame link.
• •Structured build: Using this Figma file <URL>, create a new page and build a settings screen with auto layout using our existing components.
• •Token clean-up: Using this selection <link>, convert these raw values to variables and update the surrounding components to use them.
• •Current limits listed on the write-to-canvas page: a 20kb output response limit per call, and components must be manually published before Code Connect completes. Figma also says custom fonts and image support are being worked on, so check the docs for the current state.

Figma MCP vs shadcn MCP vs Storybook MCP: which source of truth should Claude read?

Figma MCP tells Claude what the design is. The shadcn MCP server lets Claude browse, search and install components from shadcn-compatible registries configured in components.json, including private company registries. Storybook's MCP server, currently in preview, exposes your documented components, writes stories and runs interaction and accessibility tests so the agent can fix what fails. For a marketing site with a Figma design and a shadcn-based codebase, Figma plus shadcn is a sensible pair; teams with a mature Storybook gain a verification step by adding its server.

What usually goes wrong with Figma MCP and Claude Code?

Most failures trace back to the Figma file or the brief, not the model.

What should go in CLAUDE.md for Figma-driven projects?

Figma publishes a create_design_system_rules MCP prompt that generates a rules file for your stack. Its recommended flow is: get_design_context first, get_metadata if the response is too large, get_screenshot for a visual reference, download assets only after both, translate into the project's conventions, then validate against Figma for one-to-one look and behaviour. At Tech Arion we keep a short version of that flow in the CLAUDE.md of website repos that have a Figma source. An example: Figma MCP rules. Always call get_design_context and get_screenshot before writing code. Reuse components from components/ui; never create a new Button, Input or Card. Use theme tokens from styles/globals.css; never hard-code colours, spacing or radius. If the Figma MCP server returns a localhost source for an image or SVG, use it directly and do not add icon packages or placeholders. Validate the result against the screenshot at mobile and desktop widths before marking the task done. For the visual QA step, see our post on the screenshot and Playwright feedback loop in this series.

Frequently asked questions

Short answers to the questions developers and designers ask most about using the Figma MCP server with Claude Code.