To go from Figma to Claude Code, you have two honest paths in 2026: connect the official Figma MCP server so Claude can read your frame (layout, colors, type, auto layout) and write code against it, or skip the round trip and hand Claude a clean, already-designed reference. Both work. The catch nobody tells you up front: Claude Code cannot see, so whichever path you pick, the quality is decided by how much real design context you feed it, not by the prompt.
That is the whole game here. Claude Code is a superb front-end engineer and a blind designer. Point it at a tidy, variable-driven Figma file and it builds something close. Point it at a vague prompt or a messy file and it fills the gaps with its training-data average: Inter, a purple gradient, a centered hero. So this guide is two things: the accurate setup for the Figma MCP path, and the faster path when you do not have a clean file to begin with.
What "Figma to Claude Code" means
It means getting a Figma design into working React or Tailwind through Claude Code, either by feeding Claude the design data directly (the Figma MCP server) or by handing it a visual reference it can reproduce. Claude does the engineering. Your job is to give it enough design context that it does not have to guess. There is no button that turns a frame into shippable code untouched, the same honest answer from our Figma to code pillar applies here.
The gap: Claude Code is blind
Claude Code writes correct, accessible, responsive CSS, and it has no idea what the result looks like on screen. It is reasoning about your UI from text and structure, not from pixels. That single fact explains every frustration in this workflow: spacing that is technically valid but visually off, a layout that reads fine in code and looks generic rendered, a mobile breakpoint nobody asked for. We go deep on this in designing UI with Claude Code. The fix is always the same shape: give it a real reference and a feedback loop, never just a better adjective.
Path 1: the Figma MCP server
The accurate way to import Figma into Claude Code is the official Figma MCP server, which Figma shipped bidirectional support for with Claude Code in February 2026. It lets Claude read a frame you point it at (layer structure, colors, fonts, spacing, auto layout settings) and generate code that matches, and it can push a UI you built back to the canvas as editable Figma layers.
Setup is one command, then a browser auth:
claude mcp add --transport http figma https://mcp.figma.com/mcp
# then, inside Claude Code:
/mcp # select figma, Authenticate, Allow Access
Once connected, the workflow is four steps:
Figma to Claude Code over MCP
Select the frame and copy its link
In Figma, select the frame you want to build and copy its link.
Paste the link into Claude Code
Paste it with a plain request, like "build this screen in React and Tailwind, reuse our existing components."
Let Claude read the design context
Over MCP it calls a tool like get_design_context to pull the frame's layout, variables, and structure, then writes the code against it.
Wire up Code Connect
Optional but worth it: Code Connect maps Figma components to your codebase, so Claude reuses your real components instead of rebuilding them as nested divs.
Two honest caveats. Heavy Figma MCP usage needs a paid Dev or Full seat (the remote server is broadly available, but full use sits behind a plan), so confirm yours. And the MCP path is only as good as the file behind the link: a clean, variable-and-auto-layout file gives Claude clean tokens to work with, a loose one gives it w-[37px] to copy. If your goal is Tailwind specifically, the Figma to Tailwind guide covers how file structure decides output quality.
No MCP, no paid seat? Screenshot the frame and paste the image into Claude Code. Its vision is good enough to read a layout and reproduce its structure. You lose the structured data (real component names, exact tokens, responsive intent), so it guesses more, but for a single screen it is a legitimate, free fallback.
Path 2: design on a canvas first
The faster path for developers is to do the seeing yourself: design the UI visually first, get it right, then hand Claude Code a clean structure to build. This flips the problem. Instead of asking a blind engineer to interpret a file or invent taste from a prompt, you give it a finished decision to implement. This is also the answer to "figma to cursor," the same logic applies in any coding agent, see Cursor for design.
This is where Superdesign fits, and it runs as a skill inside Claude Code, so the design step lives where you already work:
npm install -g @superdesign/cli@latest
superdesign login
npx skills add superdesigndev/superdesign-skill
Trigger it with /superdesign and a plain request. It learns your project first (it creates a superdesign folder with a design-system file plus replicas of your real pages), opens a canvas where it explores several directions at once instead of one linear guess, and when you pick one, you copy the full design prompt or ask the agent to fetch it and plan the build. Claude Code then writes the code against a design you have already seen and approved. The three pieces that matter for this workflow: parallel variants so you compare before committing, a persistent design-system file so the look does not drift screen to screen, and a clean handoff so Claude gets structure, not a screenshot to reverse-engineer.
You can also skip the design step entirely when the pattern already exists in a browser: Superdesign's free Chrome Component Grab captures any live component into clean Tailwind you paste straight into Claude Code. More on that in how to clone a website's design.
Which path to use
Pick by what you start with:
| Route | How it works | Needs a clean Figma file? | Best for |
|---|---|---|---|
| Figma MCP server | Paste a frame link, Claude reads the design data and writes code | Yes, paid seat for full use | Teams whose source of truth is Figma |
| Screenshot paste | Paste an image, Claude's vision reproduces the layout | No | A quick single screen, free |
| Design on a canvas first | Design and iterate visually, hand clean structure to Claude | No | Developers who want code, not a file |
- You own a clean, variable-driven Figma file and design in Figma as a team: use the Figma MCP server with Code Connect.
- You have a frame but no MCP or seat: paste a screenshot. Good for one screen, expect to refine.
- You opened Figma only to mock up something you can already picture: skip it. Design on a canvas first, then hand the structure to Claude Code. The file was never the point.
Whatever path you choose, keep the loop: after Claude writes the UI, screenshot the rendered result, paste it back, and give specific feedback ("the card padding is inconsistent, the heading is too small"). Claude cannot grade its own output, so a real screenshot beats asking it "does this look good?" The Claude Code UI design guide breaks that loop down in full.
The honest takeaway
Claude Code is the engineer, not the designer. The Figma MCP server is a real, accurate bridge when Figma is your source of truth and your file is clean. When it is not, stop forcing a frame into the loop and give Claude a design you have already seen, from a prompt library pattern, a captured live component, or a canvas you iterated on first. Either way, you are doing the one thing Claude cannot do for itself: looking at the design before it ships.
