Figma Claude Connector: The Complete Guide

The Figma MCP server gives Claude Code structured access to Figma files and tools. Beyond static layouts, it reads components, variables, layout data, FigJam content and Make resources, generates code from selected frames, and uses Code Connect to keep generated code aligned with the real components your design system uses.

• Generate code from selected Figma nodes - a frame, a component, a flow.
• Extract design context from layers - spacing, hierarchy, props.
• Pull in variables and components directly into your IDE - especially useful for design systems.
• Work with Code Connect so outputs reference your real components, not invented ones.

You can work two ways. Selection-based: select any frame or component in Figma, then ask Claude - "Add a button to this card", "Build this hero". Or link-based: copy a Figma link and paste it in your prompt - "Convert this sign-up card design to code: [figma-link]". Either way, Claude is reading the real file, not a description of it.

• Frame to code: select a Figma frame and turn it into working code - great for product teams building new flows or iterating on app features.
• Design-system work: pull variables, components and layout data into your IDE so generated code stays aligned with system tokens.
• Flow capture: capture an entire flow (onboarding, checkout, settings) and lay it out on the canvas in a single session, preserving sequence and context.
• Designer-developer collaboration: reduce the "is this exactly the spacing?" cycle by having Claude read the spec directly from the design.

Figma has shown the reverse direction as well: a Claude Code to Figma flow that turns production code into editable Figma designs. That extends the connector beyond design-to-code into a fuller round-trip loop - useful for catching designs back up to code that has drifted ahead, and for prototyping at higher fidelity inside Figma based on what already exists in the codebase.

The reception has been notably strong from designers and developers alike, with hands-on write-ups from Builder.io, Muz.li, the Figma blog and a stack of designer-developer collaboration pieces on Medium. The recurring praise: code outputs are far more faithful to the design than screenshot-based approaches, because Claude is reading the real structure.

Honest caveats: outputs still benefit from a human pass for accessibility, semantic HTML and complex interactions. The connector compresses a lot of the boilerplate, not the judgement.

There are two servers, and for most people the remote one is the right starting point - it needs no local install and works without the Figma desktop app. The cleanest route in Claude Code is the official plugin, which bundles the MCP server settings plus Agent Skills for common workflows:

claude plugin install figma@claude-plugins-official

Then run /mcp inside Claude Code, choose figma, select Authenticate and click Allow access. The remote server is available on every seat and plan.

The desktop (local) server

If you want the fully on-device path - design files never leave your machine - use the desktop server instead. It requires a Dev or Full seat on a paid plan:

1. Open a Figma Design file in the desktop app and switch to Dev Mode.
2. Enable the MCP server from the Dev Mode panel in the right sidebar.
3. Point your IDE (Claude Code, Cursor, VS Code) at the local server URL per Figma's docs.
4. Select a frame, or paste a Figma link in your prompt, and ask Claude to generate or modify code.

The MCP server runs locally on your device, which means your design files aren't being shipped off to a remote service. The server only operates when Dev Mode is activated within a Figma file. For organisations sensitive about design-IP, that on-device model is a meaningful design choice.

• Desktop server won't connect: the local server only runs while a Figma Design file is open in the desktop app with Dev Mode on. If your IDE can't reach it, confirm the desktop app is running and the toggle is enabled - the browser app doesn't host the local server.
• "No design context" on a selection: Claude reads the currently selected node. If nothing is selected, or you selected a page rather than a frame, the response is thin. Select the specific frame or component, or paste an exact node link.
• Generated code invents components: without Code Connect, Claude guesses component names. Set up Code Connect so outputs reference your real design-system components instead of fabricated ones.
• Desktop server unavailable on your seat: the local server needs a Dev or Full seat on a paid plan. On a Viewer or free seat, use the remote server, which works on every plan.
• Huge frames blow the context window: asking Claude to convert an entire multi-screen flow at once pulls enormous node data. Work frame by frame for cleaner, more faithful output.
• Auth loop in Claude Code: if /mcp keeps asking you to authenticate, the OAuth callback didn't complete - finish the "Allow access" step in the browser before returning to the terminal.

The MCP server is included with Figma - there is no separate charge for the connector. Access splits by server: the remote server is available on every seat and plan, including free, while the desktop (local) server requires a Dev or Full seat on a paid plan. That makes the remote server the practical default for most people, with the desktop server reserved for teams that need design files to stay fully on-device.

On the Claude side, the official Figma plugin works with your normal Claude Code access. Code generation quality scales with the underlying model, so pairing the connector with a strong coding model gives the most faithful output.

• Dev Mode required: the MCP server is gated by Dev Mode in a Figma file.
• Local server: great for privacy, but you need a local set-up; not a zero-config cloud connector.
• Outputs still need review: accessibility, semantic structure and complex interactions benefit from human polish.

Product teams, design-systems engineers and designer-developer pairs. If your work crosses the Figma-to-code boundary regularly, this is one of the highest-leverage connectors in the directory.

What does it let Claude do?

Read design context (components, variables, layout) and generate code from selected frames or pasted links - using Code Connect to align with real components.

Is it just for design-to-code?

No - Figma has shown a Code to Canvas direction too, turning production code into editable Figma designs.

Is my design data uploaded somewhere?

The MCP server runs locally on your device; it operates only when Dev Mode is on in a Figma file.

Who is it for?

Product teams, design-systems engineers and designer-developer pairs.

The Figma connector finally treats designs as structured data Claude can read - components, variables, layouts - instead of screenshots to guess from. The result is code that reflects your real design system, plus a growing two-way loop with Code to Canvas. For teams that live across the Figma-to-code boundary, it is one of the most consequential connectors in the catalogue.

Enable Dev Mode, point your IDE at the local MCP server, and let Claude read your designs the way they were built. Browse more in the complete Claude Connectors Directory.