Figma Code to Canvas: Turn AI-Generated Code into Editable Designs

On February 17, 2026, Figma and Anthropic jointly announced Code to Canvas — a feature that converts UI built with Claude Code into fully editable Figma frames. Not screenshots. Not flat images. Real, manipulable vector layers with preserved text, spacing, and color properties.

The significance is hard to overstate. Before this, when AI generated a polished front-end interface, designers who wanted to iterate on it in Figma had two options: screenshot and manually rebuild, or wrestle with the code directly. Now, a single command — “Send this to Figma” — transforms running code into something designers can drag, rearrange, annotate, and refine using the tools they already know.

As Figma CEO Dylan Field put it: “When AI can build anything you can describe, your real job becomes finding the best solution.” And the best place to evaluate solutions is not a terminal window — it is a design canvas.

What Is Code to Canvas

Code to Canvas is a deep integration between Figma and Anthropic that does one thing exceptionally well: it captures the rendered state of a browser-based UI and converts it into editable design elements on the Figma canvas.

This is fundamentally different from a screenshot import. A screenshot is a flat bitmap — you cannot edit the text, adjust the layout, or change colors within it. Code to Canvas captures the browser’s rendered state and semantically parses it into Figma’s Frame structure, preserving layers, text nodes, spacing, and color values.

Think of it this way: if a screenshot is a photograph of a house, Code to Canvas gives you the full CAD blueprint imported into architectural software — where you can move walls, resize windows, and redesign the floor plan.

Core Positioning

How It Works: Technical Architecture

The technical backbone of Code to Canvas is MCP (Model Context Protocol). If you have been following the Claude Code ecosystem, MCP should be familiar — it is an open standard that lets AI tools connect to external data sources and applications, essentially serving as a universal adapter between AI agents and the outside world.

For Code to Canvas, Figma provides a locally running Dev Mode MCP Server. This server does more than shuttle data — it semantically reads your Figma component libraries, design variables, style systems, and layout structures. When Claude Code connects via MCP, the two establish a structured, bidirectional communication channel, not a simple data pipeline.

Step-by-Step Workflow

The entire process has four steps:

Step 1: Build UI with Claude Code

Use Claude Code’s conversational interface to build a front-end UI. This can be a brand-new project or an iteration on existing code. Once built, the UI runs in a local dev server, staging environment, or any browser.

Step 2: Enable Figma MCP Server

Open the Figma desktop app (note: the desktop app is required — the browser version does not support this), go to Preferences, and enable “Dev Mode MCP Server.” Once active, it runs a service at http://127.0.0.1:3845/sse.

Step 3: Connect Claude Code to Figma

Run a single command in your terminal to register the Figma MCP Server with Claude Code:

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

This tells Claude Code: “Figma is listening at this address — you two can start talking.”

Step 4: Send to Figma

Type “Send this to Figma” in Claude Code. The system captures the current browser-rendered UI state, converts it into a Figma-compatible Frame, and places it directly on your Figma canvas.

Architecture Overview

Claude Code (Terminal)
    |
    | Build UI, render in browser
    v
Browser (local dev server)
    |
    | Capture rendered state
    v
MCP Protocol (communication layer)
    |
    | Semantic conversion
    v
Figma Dev Mode MCP Server (local 127.0.0.1:3845)
    |
    | Generate editable Frame
    v
Figma Canvas (editable design)

Notably, this workflow also supports the reverse direction: select a Frame in Figma, send its link to Claude Code, and Claude generates production-ready code that respects your design system (components, tokens, Tailwind variables, etc.). This creates a closed loop between design and development.

Key Features

1. Side-by-Side Design Comparison

This is one of Code to Canvas’s most practical capabilities. In a traditional workflow, comparing three different UI approaches means building each one separately, taking screenshots, pasting them side by side, and manually annotating differences. Now you can have Claude Code generate multiple variants and send them all to the Figma canvas, laying them out like cards on a whiteboard.

Designers can immediately spot pattern differences, information hierarchy changes, and visual consistency issues without switching between browser tabs.

2. No-Code Structure Exploration

Once a design lands on the Figma canvas, designers can explore and iterate using familiar tools:

• Duplicate Frames, rearrange step sequences, test different information architectures
• Adjust layout spacing and evaluate different typography approaches
• Modify text content to check copy-design alignment

The entire process requires zero code. For designers unfamiliar with terminal workflows, this dramatically lowers the barrier to participating in AI-assisted design.

3. Team Annotation and Collaboration

PMs, designers, and engineers can annotate and comment on the same Figma Frame. The difference is that they are commenting on an actually built, full-fidelity interface rather than a static mockup. This eliminates the classic collaboration pain point of “the mockup looks different from the real thing.”

4. Design System Alignment Checks

If your Figma project has a defined design system (component library, color variables, typography rules), the MCP Server passes this information to Claude Code. This means AI-generated code will attempt to follow your existing design system rather than building from generic UI frameworks. When the generated interface transfers back to Figma, designers can quickly verify consistency with the established system.

Use Cases and Workflows

Rapid Prototyping

A product manager has an idea for a new feature. The traditional flow: write a PRD, designer creates mockups, developers build it, team reviews. With Code to Canvas, this compresses to:

1. Describe the feature requirements in natural language within Claude Code
2. Claude generates a working UI prototype
3. “Send this to Figma” pushes it to the canvas
4. The team discusses and iterates directly in Figma

From idea to a discussable high-fidelity prototype in minutes, not days.

Design Exploration

During concept exploration, designers need to diverge across multiple directions quickly. Have Claude Code generate 5-6 interface variants based on different design philosophies and send them all to the Figma canvas. The designer’s role shifts from “creating each option one by one” to “curating and refining from multiple options” — moving from creator to curator.

Design Fidelity Review

After development is complete, send the actual running interface to Figma via Code to Canvas and place it alongside the original design comp. PMs and designers can compare pixel by pixel and annotate every discrepancy that needs adjustment. This is far more efficient than the traditional “open a browser and eyeball it” approach.

Design Review for AI-Generated Code

With AI-assisted coding becoming mainstream, much of today’s UI code is AI-generated. But AI-generated interfaces often lack visual polish. Through Code to Canvas, designers can pull AI-generated UIs into Figma, apply their professional design judgment, refine the visuals, and feed the updated designs back to development.

Comparison with Other AI Design Tools

The current landscape includes several AI-powered design and development tools, each with different positioning and capabilities.

The core difference is directionality. v0, Bolt, and Lovable all start from text or requirements and generate runnable code or applications — they solve the “build from zero” problem. Code to Canvas solves what happens after code generation: how to bring designers into the loop and enable visual-level team collaboration and decision-making.

In other words, Code to Canvas is not a competitor to these tools — it is a downstream complement. You can use v0 to generate code, then use Code to Canvas to send the result to Figma for design review.

Meanwhile, Figma’s own Figma Make (formerly Figma AI) moves in the opposite direction — generating code from text or designs. Code to Canvas and Figma Make are complementary: one goes from code to design, the other from design to code, forming a bidirectional loop within the Figma ecosystem.

Current Limitations

Despite its compelling vision, Code to Canvas has notable constraints in its current release:

The most significant limitation is the lack of automatic visual sync. Currently, when a designer adjusts spacing or colors in Figma, those changes do not reflect back in the codebase — manual synchronization is still required. True closed-loop integration would mean “edit in Figma, code updates automatically.” That is not here yet.

Impact on Designers and Developers

For Designers

Code to Canvas does not replace designers — it amplifies their role. When AI can generate multiple UI options in seconds, the scarcity of “creating a design” decreases, but the ability to judge which design is best becomes more valuable. The designer’s role shifts from producer to curator — instead of spending hours crafting each option by hand, you select, combine, and refine from AI-generated alternatives.

This aligns with a broader trend in AI-assisted creative work: AI reduces the execution cost of creation but raises the bar for aesthetic judgment and design decision-making.

For Developers

Developers finally have a frictionless way to show designers their work. Previously, after completing a front-end implementation, designer feedback typically meant “the spacing is off here” or “that color is wrong,” requiring constant context-switching between code and design files. Now, developers can send their implementation directly to Figma, where designers annotate feedback in their native tool. Communication efficiency improves dramatically.

For Product Teams

Product teams gain a faster decision-making tool. Getting from “idea” to “visual discussion material” used to take days or weeks — now it can happen in hours. A PM can have AI generate several design concepts before a weekly meeting, send them to Figma for team discussion, and accelerate both the speed and quality of decisions.

The Bigger Picture: Design and Dev Tools Are Converging

Code to Canvas reflects a deeper industry trend: design tools and development tools are converging — not as competitors, but as two halves of the same system.

For the past decade, design and development ran on parallel tracks. Designers worked in Figma and Sketch; developers worked in VS Code and terminals. The two intersected at a single handoff point called “design delivery.” The information loss and communication overhead at that handoff has been a persistent pain point for countless teams.

AI is redrawing that boundary. When Claude Code can generate high-quality UI code and Code to Canvas can convert that code into editable designs, “design” and “development” are no longer sequential phases but parallel, interleaving, iterative processes.

Figma’s strategic intent is clear: in the age of AI coding tools, the design canvas has not become obsolete — it has become more important. When AI can rapidly generate countless options, you need a visual workspace to compare, filter, and decide — and that is precisely what the Figma canvas delivers.

Conclusion

Code to Canvas is Figma and Anthropic’s pragmatic answer to the question of how design and development should collaborate in the AI era. It does not try to replace designers or developers with AI — instead, it builds a bridge between them.

The core value comes down to three points:

1. Reduced collaboration friction: Code-to-design conversion no longer requires manual rebuilding — a single command handles the transfer
2. Faster decision cycles: AI generates multiple options, teams compare and choose on the canvas
3. Preserved professional value: Designers’ aesthetic judgment and developers’ engineering skills each operate in their strongest environments

For developers already using Claude Code, Code to Canvas is a workflow upgrade worth trying. For designers, it is an opportunity to engage with the AI-assisted design trend and stay ahead of the curve.

And for the industry at large, Code to Canvas may signal something bigger: the future of product creation will not have rigid “design phases” and “development phases” — instead, design and code will flow freely within a single, unified workflow.