QUICK INFO
| Difficulty | Intermediate |
| Time Required | 20-30 minutes |
| Prerequisites |
|
| Tools Needed |
|
What You'll Learn:
- Connect the Figma MCP server to Claude Code
- Generate production code from Figma design frames
- Capture a working UI from Claude Code back into Figma as editable layers
- Run the full round-trip loop between code and canvas
This guide covers the bidirectional workflow between Claude Code and Figma using the Figma MCP server. You can pull design context from Figma into Claude Code to generate code, and (as of February 2026) push working UIs built in Claude Code back into Figma as editable design frames. The second direction is what Figma calls "Code to Canvas."
You need a Figma account with at least a Pro plan and a Full or Dev seat. Starter plans get 6 MCP tool calls per month, which is not enough to do anything useful. Pro gives you a workable daily limit; Enterprise gives 600 calls per day.
Connecting the Figma MCP Server to Claude Code
Figma offers two MCP server options: a remote server that connects directly to Figma's hosted endpoint, and a desktop server that runs locally through the Figma desktop app. The remote server is simpler to set up and doesn't require the desktop app, so start there unless you have a reason not to.
Remote Server (Recommended)
Open your terminal and run:
claude mcp add --transport http figma https://mcp.figma.com/mcpInside Claude Code, type /mcp and select figma. Choose Authenticate, then click Allow Access in the browser window that opens. You should see "Authentication successful. Connected to figma" back in your terminal. Confirm the connection with /mcp again; the figma server should show as connected with its available tools listed.
Desktop Server (Alternative)
If you prefer working with selections directly in the Figma desktop app (useful when you want to point at specific frames rather than paste URLs), open the Figma desktop app, switch to Dev Mode with Shift+D, find the MCP section in the inspect panel, and click Enable desktop MCP server. The server runs at http://127.0.0.1:3845/mcp. Then add it to Claude Code:
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpThe desktop server only works while the Figma desktop app is running with a file open. Close the app, lose the connection.
Figma to Code: Generating Code from Designs
This is the direction that's been available for a while. Copy a link to any frame or layer in Figma, then prompt Claude Code with something like:
Implement this Figma design as a React component with Tailwind CSS: [paste Figma link]Claude Code extracts the node ID from the URL and calls the MCP server's get_design_context tool, which returns a structured representation of the design: layout, spacing, colors, typography, component hierarchy. The default output format is React + Tailwind, but you can ask for anything. I've gotten decent results asking for plain HTML/CSS, Vue, and Svelte. Swift and native mobile are technically supported through the same pipeline but I haven't tested those enough to comment.
If you're using the desktop server, you can also select a frame directly in Figma and prompt Claude Code to implement "my current selection" without pasting a link.
Getting Better Output
The raw output quality depends a lot on how your Figma file is structured. If your layers are named "Frame1268" and "Group5," Claude gets less context to work with. Rename layers to something semantic like "CardContainer" or "CTA_Button" and the generated code improves noticeably.
The real upgrade comes from Code Connect, which maps your Figma components to actual code components in your codebase. With Code Connect configured, the MCP server tells Claude "this Figma button component corresponds to <Button variant='primary' /> in the codebase," and Claude reuses your existing components instead of generating new ones from scratch. Setting up Code Connect takes some initial effort, but if you have a component library it's worth it.
Two other MCP tools worth knowing about: get_variable_defs extracts design tokens (colors, spacing, typography) from your selection, and get_code_connect_suggestions helps detect mappings between Figma components and your code. You sometimes need to nudge Claude to use a specific tool by name in your prompt, since the agent doesn't always pick the right one automatically.
Code to Canvas: Sending UIs Back to Figma
This is the new direction. Figma calls it "Code to Canvas," and it uses the generate_figma_design tool available through the remote MCP server. You need Claude Code specifically for this; it doesn't work from Cursor or VS Code as of this writing.
The basic flow: you build (or iterate on) a UI in Claude Code, then ask Claude to capture it and send it to Figma. Claude starts a local dev server for your project, opens a browser, injects the capture script, and converts what's rendered into Figma-compatible layers.
Prompt it like this:
Start a local server for my app and capture the UI in a new Figma file.Or, to send it to an existing file:
Start a local server for my app and capture the UI in [paste Figma file URL].If you've already started the dev server yourself, skip the "start a local server" part and just ask Claude to capture the current UI.
Claude will ask which Figma organization or team to use for new files. After the initial capture, a toolbar appears in the browser window with two options: Entire screen captures the full viewport, and Select element lets you capture a specific component. You can capture multiple screens in one session to preserve a flow (onboarding sequence, checkout steps, etc.).
The result lands in your Figma file as actual editable frames. Not screenshots, not flattened images. Real layers you can select, duplicate, rearrange, and modify. Your team can annotate, compare variants side by side, or use the frames as a starting point for further design iteration.
Actually, I should clarify: the fidelity is good but not perfect. Complex CSS effects, certain animations, and some edge cases in layout don't always translate cleanly to Figma layers. For standard UI components and layouts it works well. For a heavily custom interface with lots of SVG or canvas-based rendering, expect to do some cleanup on the Figma side.
The Round-Trip Loop
Where this gets interesting is chaining both directions together. The workflow looks like: design in Figma, generate code with Claude Code, iterate on the code, capture the result back to Figma for review, make design decisions on the canvas, then feed the refined design back into code.
Each cycle uses the MCP server as the shared context layer, so design tokens, component mappings, and layout structure stay consistent across trips. The Muzli blog described this as "the closest thing to a closed loop between design and development," which sounds like marketing but is roughly accurate for simple to medium-complexity projects.
For larger projects with deep component trees, each round trip consumes tokens and time. Multi-screen flows require capturing each screen individually. This is fine for a 5-screen flow but gets tedious at 20+. Budget your token usage accordingly.
Troubleshooting
"figma" server not showing in /mcp: Re-run the claude mcp add command. If using the desktop server, make sure the Figma desktop app is open with a file in Dev Mode and the MCP server toggled on.
Authentication fails or times out: The OAuth flow opens a browser window. If it doesn't appear, check if a popup blocker caught it. You can also try disconnecting and re-authenticating through /mcp > figma > Authenticate.
MCP returns code when you asked for variables: The agent picks the wrong tool sometimes. Be explicit: "Use the get_variable_defs tool to extract the variables from this frame."
Rate limits on Starter plans: 6 tool calls per month is the limit for Starter. Each interaction with the MCP can use multiple tool calls. Upgrade to Pro or get a Full/Dev seat on an Organization plan.
Code to Canvas not available: The generate_figma_design tool requires the remote MCP server and Claude Code. It won't appear if you're only using the desktop MCP server or a different IDE.
The full developer documentation lives at Figma's MCP server docs. For structuring Figma files to get better code output, their guide on structuring files covers the essentials.
