Building UI with AI takes 10 minutes, but if the output doesn't exist in Figma, designers can't touch it. Now code becomes an editable Figma design, just like that.
What Is It?
On February 17, 2026, Figma partnered with Anthropic to announce "Code to Canvas". As the name suggests, it brings code onto the canvas (Figma).
Here's how it works: when you run code built with an AI coding tool like Claude Code, the rendered browser UI is automatically captured and converted into an editable frame on the Figma canvas. Not a simple screenshot — a real Figma component with separated layers.
Why is this a big deal? Until now, Figma MCP only worked in the "design→code" direction. Designers create in Figma, AI converts it to code. But with the addition of the "code→design" direction, a full design↔code round-trip is now complete.
In practice, Korean developer Ubin used Figma MCP + Claude Code to build a 5-page signup flow in just 10 minutes, including setup. Code quality maintained a clean feature-based architecture, and reusable components were automatically separated.
Dylan Field (Figma CEO) emphasized that "AI isn't replacing design — it's enhancing collaboration between designers and developers". With the term 'SaaSpocalypse' making the rounds and Figma's stock taking a hit, Figma's strategy is to turn AI from a threat into an opportunity.
Felix Lee (ADPList) put it more directly — "The existing design→production workflow delays product launches by 3x," and this bidirectional workflow eliminates that bottleneck.
What's Different?
Previously, designers designed in Figma and developers converted it to code — a one-way street. AI coding tools made it possible to build UI fast, but the output only existed in code. Designers couldn't review or edit in their own tool (Figma), and every time the UI changed during development, Figma files were left with the original mockup, abandoned.
| Traditional Workflow | Code to Canvas | |
|---|---|---|
| Design Review | Only in code → designers can't check in Figma | Run code → editable Figma frame auto-generated |
| Edit Flow | Verbal feedback → dev edits code → re-check | Designer edits directly in Figma → reflected in code |
| Design File Sync | Manual Figma update on every code change (or abandoned) | Code changes → auto-reflected in Figma |
| Feedback Precision | "Can you reduce the spacing here?" (verbal) | Edit directly in Figma and show the result |
Figma currently has three AI-related features running on different axes. Don't confuse them.
| Feature | Direction | Description |
|---|---|---|
| Figma MCP (Dev Mode) | Design → Code | AI reads Figma designs and generates code |
| Figma Make | Prompt → Design | Auto-generate designs from text descriptions |
| Code to Canvas | Code → Design | Converts production code to editable Figma frames |
Combine all three and you get an infinite "design→code→design→code" loop. Designers and developers work in their own tools while staying in real-time sync.
Key Point
Code to Canvas isn't a simple screenshot. It converts to an editable Figma frame with separated layers. Designers can immediately modify colors, spacing, and text.
Quick Start Guide
Supported clients include Claude Code, Cursor, VS Code, Windsurf, and Codex. We'll walk through the Claude Code setup here.
- Prepare the Figma Desktop App
Update to the latest version. Go to the Figma icon (top-left) → Preferences → checkEnable Dev Mode MCP Server. Requires Professional Plan or higher. - Connect MCP Server to Claude Code
Just one line in the terminal:
claude mcp add --transport http figma https://mcp.figma.com/mcp - Run Code → Capture to Figma
Run your code, then prompt Claude Code with "Put this screen into Figma." The browser UI is auto-captured and converted into an editable Figma frame. -
Edit in Figma & Reflect in Code
Modify colors, layout, and text directly in Figma. Changes can be reflected back in code via Claude Code. That's the round-trip.
Heads Up
Currently, performance can degrade during the Code to Canvas round-trip when using 3+ tools with 5+ context switches. For complex tasks, we recommend breaking them into smaller steps.
