How to Use Claude × Figma | Design to Code with Dev Mode MCP

What Can You Do with Claude × Figma Integration?

MCP (Model Context Protocol) is a common standard for connecting AI to external services. Through this MCP, Figma can now be operated directly from Claude.

Until now, the standard workflow was "create a UI in Figma" → "manually rewrite it in React/Tailwind." With MCP integration, you can simply paste a Figma URL into Claude's chat and type "implement this frame in React," and Claude will retrieve the selection's metadata, screenshots, and component information to return code complete with design tokens. Furthermore, the Code to Canvas feature lets Claude write generated components back as editable layers in Figma, dramatically reducing the back-and-forth cost between designers and engineers.

On the other hand, "strict adherence to brand guidelines" and "complex animations" still require manual adjustment. For now, a realistic target is "80% automated as a draft, with the remaining 20% handled by humans."

Three Integration Methods and When to Use Each

There are three main paths for accessing Figma from Claude, each with different strengths and required plans. Note that Figma assigns each user a seat (a type of editing permission): Dev seats and Full seats come with paid plans, while the view-focused Starter seat is free. This distinction directly affects which path you can use, so it's worth checking your seat type first.

1. Remote MCP Server (register https://mcp.figma.com/mcp with your MCP client). Available for all seats and plans; the fastest to set up.
2. Desktop MCP Server (local connection via the Figma desktop app). Requires a Dev seat or Full seat — paid plans only. Write operations are more stable with this method.
3. Code to Canvas (writes Claude-generated code back to Figma as layers). Free during the beta period; expected to move to a pay-per-use model in the future.

The straightforward decision framework, per the official Figma help, is: "Remote if you just want to try it," "Desktop for regular business use," and "Code to Canvas if you want to write code back to design."

How to Set Up the Remote MCP Server

The simplest path. Works even without a paid Figma plan.

1. Open the target file in Figma and confirm that the sharing permissions are set to "View" or higher.
2. Open the MCP settings in Claude Code or Claude Desktop (described below).
3. Register https://mcp.figma.com/mcp as the MCP server URL.
4. A browser window will open prompting you to authenticate with your Figma account via OAuth — approve it.
5. Paste a Figma file URL or frame URL into Claude's chat and instruct it to "implement this frame in React + Tailwind."

Because the Remote version makes calls over the network, responses can slow down when passing very large frames at once. The key is to scope your requests to the specific unit you want to implement (header / card / modal).

Example: Calling Figma MCP from Claude Code

For teams using Claude Code (CLI / IDE extension) as their primary editor, this is the go-to approach. You only need to add one block to the MCP configuration file.

1. Open the mcpServers section of ~/.claude.json (create it if it doesn't exist).
2. Add the Figma MCP entry as follows:

   {
     "mcpServers": {
       "figma": {
         "url": "https://mcp.figma.com/mcp"
       }
     }
   }
   

3. Restart Claude Code and run the /mcp command to verify that figma shows as connected.
4. On first access, a browser OAuth approval screen will open — log in with your Figma account.
5. Launch Claude Code at the project root and instruct it to "implement src/components/Card.tsx based on @figma <URL>."

When using the Desktop version, use the command / args format to launch a local process instead of the url field. See the per-client guides in the official Figma Help Center for details.

Connecting via Connectors in Claude Desktop

For designers and PMs who don't use the CLI, the Connectors UI in Claude Desktop is the quickest option.

1. Open Claude Desktop and navigate to Settings → the Connectors tab.
2. Find "Figma" in the list and click the "Connect" button.
3. A browser window will open — log in with your Figma account and approve read/write permissions for Claude.
4. Once connected, paste a Figma file URL in the chat and instruct it to "export this frame as HTML."
5. If the connection fails, check your Figma seat type (Dev / Full) and, for organizational accounts, verify that the administrator has enabled MCP permissions.

The Connectors version is easy to use interactively, but it is harder to set up automation that spans multiple files compared to the Claude Code version. An increasing number of teams are using both in tandem depending on the task.

When to Use Design → Code (Dev Mode)

According to the official Figma blog, the Dev Mode MCP passes four types of information to Claude: "design system metadata such as variables, components, and styles," "high-level context via screenshots," "interactivity (implementation examples in React/Tailwind)," and "text, SVGs, images, and layer names." This makes it easier to generate code that follows design tokens while keeping token usage in check.

In practice, the following use cases are gaining traction:

1. Automatically generating the skeleton for a new screen in a product with a well-established design system.
2. Having engineers extract a designer's Prototype as a React component template.
3. Having Claude detect naming conflicts with existing components and reconcile them.

Conversely, for Figma files where design tokens are not yet organized, Claude tends to generate a large number of ad-hoc class names. Organizing Variables in Figma before integrating turns out to be the faster path in the long run.

Writing Back to Design with Code → Canvas (Code to Canvas)

The official Figma help describes this as the ability to "convert live UI into editable design layers." This is Code to Canvas — it lets you write Claude-generated components back to the Figma canvas.

1. Use @figma in Claude Code to write a new component (e.g., <PricingCard />).
2. Instruct Claude to "write this back as a layer to the canvas at <file-url>."
3. It will be generated as a Frame in Figma, which the designer can then fine-tune by hand.
4. Pass the adjusted Frame back to Claude to update the code side (iterating back and forth).

As you iterate, the gap between the design and the code shrinks, so design review and PR review effectively become a single workflow. Since it's free to try during the beta period, it's well worth experimenting with on an in-house one-off project first.

Common Pitfalls and Limitations

Here are four points where people commonly get stuck during setup.

1. Desktop MCP requires a Dev seat or Full seat. It cannot be used with a Starter seat or view-only permissions.
2. Bulk conversion of large frames degrades accuracy. Pass frames at the section or component level, not the whole page.
3. Output quality is low for Figma files without organized Variables (design tokens). Organizing the Figma side first is faster in the end.
4. Code to Canvas is expected to become paid in the future. Design your evaluation process so you can make a go/no-go decision for production use during the beta period.

Point 1 — the seat requirement — causes the most trouble. Since the Remote version works even on a free plan, the safe approach is to get a feel for things with Remote first, then switch to Desktop when you want stable, ongoing use.

Summary

The Claude × Figma integration has entered a "practical phase" with the arrival of Figma's official Dev Mode MCP Server. By choosing among the three paths — Remote / Desktop / Code to Canvas — based on your needs, you can consolidate the back-and-forth between design and code into a single workflow. Start by connecting the free Remote MCP at https://mcp.figma.com/mcp and try converting one component from an existing project into React. The more mature a team's design system, the greater the benefit; teams without one in place should organize their Variables first before diving in.