Claude Code to Figma: How the New “Code to Canvas” Integration Works

Published by Muzli on February 17, 2026

Claude Code to Figma (officially called “Code to Canvas”) is a new integration between Anthropic’s Claude Code and the Figma design canvas. Announced on February 17, 2026, it lets developers, designers, and product teams capture a functioning UI built with Claude Code and convert it into a fully editable Figma frame. Not a screenshot. Not a flattened image. A real design artifact that teams can manipulate, annotate, and iterate on.

For years, the design-to-code pipeline moved in one direction. Designers handed off. Engineers interpreted. Context got lost somewhere in between. This integration opens the reverse direction, and it changes how teams evaluate AI-generated interfaces.

What Is Claude Code to Figma? (And Why It Matters Now)

AI coding tools have made it trivially easy to go from idea to working prototype. Claude Code, Cursor, Windsurf. You describe what you want, and you get a functioning interface in minutes. The bottleneck moved. It is no longer “how do we build this?” It is “how do we decide which version to ship?”

That decision process lives on the canvas. It lives in Figma, where teams compare options side by side, leave comments, and align before committing to a direction. Until now, there was no clean way to bring a coded prototype back into that decision space.

Figma’s partnership with Anthropic addresses exactly this gap. The question is no longer whether AI can build interfaces. It is whether teams can evaluate and refine what AI builds, together, in a shared space.

How Code to Canvas Works: The Step-by-Step Workflow

The core workflow has four steps:

Build or iterate on a UI using Claude Code. Local dev server, staging environment, production. Anything running in a browser.
Capture the screen. The integration grabs the live browser state and converts it into a Figma-compatible frame.
Paste into Figma. The captured screen lands on your canvas as an editable design artifact. Not a flat image. A real frame.
Collaborate. Your team annotates, duplicates, rearranges, and compares options directly on the canvas. No code access required.

The power is in multi-screen sessions. You can capture an entire flow (onboarding, checkout, settings) and lay it out on the canvas in a single session, preserving sequence and context. Duplicate frames, test structural changes, compare alternatives. Rejected ideas stay visible for future reference. The canvas becomes a decision-making space for AI-generated interfaces.

Setting Up the Figma MCP Server with Claude Code

The integration runs on Figma’s MCP (Model Context Protocol) Server. MCP is an open standard that allows AI tools to connect with external data sources and applications. Think of it as a universal adapter between Claude Code and Figma’s design environment.

Setup takes three steps:

Enable the MCP server. Open Figma desktop app preferences, turn on “Dev Mode MCP Server.” It runs locally at http://127.0.0.1:3845/sse.
Connect Claude Code. Run a single terminal command: claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
Start working. Reference Figma designs by selecting frames directly in the desktop app, or paste design links into Claude Code prompts.

Requirements: Figma desktop app (not the browser version), a Figma Dev or Full seat, and Claude Code installed via npm.

Once connected, the pipeline flows both ways. You can push code into Figma, and you can pull design context into Claude Code. The MCP server does not just pass screenshots. It reads components, variables, styles, and layout structure. Claude understands your design system semantically.

If you are already working with MCP-connected design workflows, this is the natural next step.

Claude Code to Figma vs. Figma Make vs. Figma MCP: What Is the Difference?

These three tools serve different purposes within the same ecosystem. Here is how they compare:

	Claude Code to Figma (Code to Canvas)	Figma Make	Figma MCP Server
Direction	Code to design	Text/design to code	Bidirectional context layer
Starting point	A working UI in a browser	A prompt or an existing design	Any Figma frame or Claude Code session
Output	Editable Figma frames	Front-end code or prototype	Structured design context for AI tools
Primary user	Developers, technical designers	Designers, non-technical users	Both, as infrastructure
Best for	Bringing AI-built prototypes back to the canvas for team review	Generating code directly from designs or natural language	Connecting design systems to AI coding tools

Figma positioned these as complementary: different starting points, same destination. Figma Make is more accessible to non-engineers. Claude Code to Figma is faster for teams already building full working web apps in the terminal.

What Designers Can Do (Without Writing Code)

Once a coded UI lands on the Figma canvas, designers work in their native environment:

Side-by-side comparison. Place multiple AI-generated variants next to each other. Spot patterns, gaps, and inconsistencies across flows.
Structural exploration. Duplicate frames, rearrange steps, test layout changes. No code required to explore a different information hierarchy.
Annotation and feedback. Leave comments on actual built interfaces, not approximations. PMs, designers, and engineers react to the same artifact at the same fidelity.
Design system alignment. Check whether the AI-generated UI matches your existing components, tokens, and patterns. Flag inconsistencies before they reach production.

The designer’s role shifts. When AI generates five variants in minutes, the bottleneck is choosing. The canvas is where choosing happens.

Canvas to Code: The Return Trip

The reverse direction matters just as much. Select a frame in Figma, prompt Claude Code with a link to it, and Claude generates production-ready code that respects your design system. It reads your components, tokens, and Tailwind variables. Not a rough approximation. Actual code that matches your system.

This creates a true round-trip workflow:

Design in Figma > Generate code with Claude > Capture working UI back to Figma > Refine on canvas > Push updates back to code

Each cycle preserves context. Nothing gets lost in translation because the same system of record (MCP) connects both environments. For teams working with AI design tools, this is the closest thing to a closed loop between design and development.

Known Limitations and Workarounds

This is a powerful integration, but it is not a magic bullet. Some realities to keep in mind:

Terminal-first workflow. Claude Code lives in the command line. Designers unfamiliar with terminal tools will need support during setup. If you are new to this world, our vibe coding guide is a good starting point.
No visual refinement loop. Once you are back in code, adjusting padding or hover states means editing code manually. There is no in-tool visual feedback yet.
Multi-frame complexity. Converting multi-screen flows requires capturing each screen individually, then combining them. This adds time and token overhead for complex projects.
Not a sandbox. Claude Code operates directly in your codebase. Changes affect the same files engineers ship. This requires awareness, not just enthusiasm.
Desktop app required. The MCP server runs through Figma’s desktop application, not the browser version.
Token costs. Larger design files and multi-screen flows consume more tokens. For complex projects, budget accordingly.

What This Means for the Design-to-Dev Handoff

The bigger story is not about one feature. It is about the direction.

Design tools and coding tools are converging, not as competitors, but as parts of the same system. Figma is betting that AI does not replace the canvas. It feeds the canvas with more options, faster. The designer’s role shifts from producing artifacts to curating and refining what AI generates.

For teams already building with AI coding tools and Figma plugins, this integration removes the last major friction point: getting the work back into a shared space where everyone can contribute.

Code is powerful for converging on a solution. The canvas is powerful for diverging, exploring, and deciding. Now they are connected.