Code to Canvas: Turning Production Code into Editable Figma Designs

The Workflow Nobody Expected

For years, the design-to-code pipeline has been a one-way street. Designers create mockups in Figma, developers translate them into code, and if the code diverges from the design (it always does), someone manually updates one or the other.

Code to Canvas flips this on its head. It's a partnership between Anthropic and Figma that lets you take a running UI — whether it's localhost, staging, or production — and convert it into fully editable Figma layers. Not screenshots. Not flat images. Actual design artifacts with proper text layers, auto-layout, and component structure.

And it works in both directions. Build a UI with Claude Code, send it to Figma for design refinement, then pull the updated designs back into code. For the first time, design and code can inform each other dynamically rather than one always lagging behind the other.

How It Works

The entire integration runs on Figma's MCP server (Model Context Protocol) — the same open standard that lets Claude Code connect to databases, GitHub, and other tools. MCP acts as a bridge between your terminal and Figma's design canvas.

Preview

The key innovation: when you "send to Figma," Claude doesn't take a screenshot. It creates semantic design artifacts — the MCP server understands what's a heading, what's a button, what's a card. The output in Figma has proper layers you can actually work with.

Setting Up the Integration

You need three things: Claude Code, the Figma desktop app, and the MCP server connection between them.

Option 1: Remote MCP Server (Recommended)

The remote server is hosted by Figma and requires no local setup:

bash
1
2
3
4
5
6
# Add the Figma remote MCP server
claude mcp add --transport http figma https://mcp.figma.com/mcp
 
# Then authenticate inside Claude Code
/mcp
# Follow the browser OAuth login flow

Option 2: Desktop MCP Server

Runs locally through the Figma desktop app:

1. Open Figma desktop → Preferences → Dev Mode → Enable MCP Server
2. Connect Claude Code:

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

Option 3: Figma Plugin

The quickest way — use the official plugin from Anthropic's marketplace:

bash
1
/plugin install figma@claude-plugins-official

This pre-configures the MCP integration with sensible defaults.

Which Option Should You Choose?

The remote server is the way to go for most people. The generate_figma_design tool (which powers Code to Canvas) only works with the remote server.

The Figma MCP Toolkit

Once connected, Claude Code gets access to 13 tools for working with Figma. Here are the ones that matter most:

Preview

Code → Figma: Sending Your UI to the Canvas

This is the headline feature. You build a UI in code, then send it to Figma as editable design layers.

The Basic Flow

bash
1
2
3
4
5
6
7
8
9
10
11
# 1. Build something with Claude Code
claude "Build a pricing page with three tiers: Free, Pro, Enterprise.
Use a card layout with feature lists and CTA buttons."
 
# 2. Claude builds the UI and opens it in the browser
 
# 3. Send to Figma
"Send this to Figma"
 
# 4. Claude uses the capture toolbar to select elements
# 5. Editable frames appear in your Figma workspace

What You Get in Figma

This isn't a flat screenshot. The output has:

• ✔ Editable text layers — every heading, paragraph, and label is a real text element
• ✔ Separate components — buttons, cards, icons are individual layers
• ✔ Auto-layout structure — flex and grid layouts translate to Figma auto-layout
• ✔ Color and typography — styles are extracted and applied
• ✔ Layer naming — semantic names based on the DOM structure

What it doesn't capture:

• ✘ Business logic — event handlers, state management, API calls
• ✘ Animations — CSS transitions and JS animations are static
• ✘ Dynamic data — what you see is what you get (the current render)

Multi-Screen Flows

You can capture multiple screens to build a flow:

bash
1
2
3
4
5
6
7
8
# Capture the login page
"Send the login page to Figma"
 
# Navigate to dashboard
"Now navigate to the dashboard and send that to Figma too"
 
# Build a signup flow
"Create the signup flow (3 steps) and send each step to Figma"

Each capture creates a new frame in Figma. You end up with a complete flow you can annotate, share with stakeholders, and iterate on.

Figma → Code: Pulling Designs Back

The reverse direction is just as powerful. Take a Figma design and generate production-ready code:

bash
1
2
3
4
5
6
7
8
# Reference a Figma frame by URL
"Build this page: https://www.figma.com/design/abc123/My-Project?node-id=42"
 
# Claude reads the design via MCP:
# - Component structure
# - Colors, typography, spacing
# - Layout (auto-layout → flexbox/grid)
# - Design tokens and variables

Claude doesn't just look at the screenshot. Through the MCP server, it reads the semantic structure — layer names, component variants, design tokens, and auto-layout settings. The generated code matches your design system, not just the visual output.

Design Tokens Integration

If your Figma file uses variables (design tokens), Claude can extract and use them:

Preview

Code Connect — Bridging Components

Code Connect is the deeper integration. It maps your codebase components to Figma design system components, so when a developer inspects a design in Figma Dev Mode, they see your actual component code — not generic auto-generated snippets.

How It Works

Preview

Setting Up Code Connect with Claude Code

The MCP server includes tools for managing component mappings:

bash
1
2
3
4
5
6
7
8
9
10
11
# Get suggestions for component mappings
"Check which Figma components can be mapped to my codebase"
# Claude uses get_code_connect_suggestions
 
# Map a specific component
"Map the Figma Button/Primary component to my Button component at components/Button.tsx"
# Claude uses add_code_connect_map
 
# View existing mappings
"Show me all Code Connect mappings"
# Claude uses get_code_connect_map

Design Verification with Chrome

Claude Code's Chrome integration adds a verification layer. Build a UI from a Figma mock, then have Claude visually verify it matches:

bash
1
2
3
4
5
6
7
8
# Enable Chrome integration
claude --chrome
 
# Build from a Figma design
"Build the landing page from this Figma: https://figma.com/design/..."
 
# Verify the output
"Open the page in the browser and verify it matches the Figma design"

Claude opens Chrome, navigates to your local dev server, and compares what it sees against the original design. It can catch:

• Layout misalignments
• Wrong colors or typography
• Missing elements
• Responsive issues at different viewport sizes
• Console errors

Preview

Practical Workflows

Workflow 1: Design Exploration

You have a working product but want to explore design variations without touching production code:

bash
1
2
3
4
5
6
7
8
# 1. Send current UI to Figma
"Send the current dashboard to Figma"
 
# 2. Designer iterates in Figma (no code required)
# ... designer creates 3 variants ...
 
# 3. Pull the chosen variant back into code
"Implement the dashboard layout from this Figma variant: [URL]"

This gives designers a sandbox to experiment without breaking anything. They work in Figma, you pull changes back when they're ready.

Workflow 2: Rapid Prototyping

Build multiple variants with Claude Code and send them all to Figma for comparison:

bash
1
2
3
4
5
6
7
8
9
# Generate 3 pricing page variants
"Build a pricing page with a horizontal card layout"
"Send to Figma"
 
"Now rebuild it with a vertical comparison table layout"
"Send to Figma"
 
"One more — try a slider/toggle between monthly and annual"
"Send to Figma"

Stakeholders review all three variants side-by-side in Figma, annotate preferences, and you implement the winner.

Workflow 3: Design System Validation

Ensure your production UI actually matches the design system:

bash
1
2
3
4
5
6
# Extract design tokens from Figma
"Get all design variables from the Figma design system file"
 
# Compare against your code
"Compare these Figma tokens against our Tailwind config.
Flag any mismatches in colors, spacing, or typography."

Workflow 4: Stakeholder Review

For teams where PMs and designers need to review before code ships:

bash
1
2
3
4
5
6
7
8
# Build the feature
"Implement the user settings page from the PRD"
 
# Send for review
"Send the settings page to Figma and share the frame link"
 
# After feedback
"Update the settings page based on the Figma annotations: [URL]"

Alternative Tools in the Space

Code to Canvas isn't the only tool bridging design and code. Here's how it compares:

Figma → Code Tools

Code → Design Tools

Code to Canvas is unique in the code-to-design direction. No other tool creates semantic Figma layers from running code.

Limitations and Gotchas

Before going all-in, know the constraints:

Technical Limitations

• ✘ No business logic transfer — Figma layers don't carry event handlers, state, or API calls
• ✘ One-directional logic — design updates can't cleanly flow back if you've added complex business logic since the capture
• ✘ Static capture — animations, transitions, and dynamic content are frozen at capture time
• ✘ Chrome required — the browser capture uses the Chrome extension (no Firefox, Safari, Arc)
• ✘ Windows/WSL friction — the desktop MCP server doesn't support WSL

Workflow Limitations

• ✘ Terminal-first — non-technical designers need to be comfortable with someone running Claude Code
• ✘ Token consumption — complex pages with many elements use more tokens for capture and extraction
• ✘ MCP maturity — some tools (like get_code) can struggle with complex annotated elements
• ✘ Plan requirements — Code Connect requires Figma Organization or Enterprise plans

What Works Best

• ✔ Component-based UIs — React, Vue, etc. translate cleanly to Figma components
• ✔ Design system projects — token extraction and Code Connect shine here
• ✔ Prototype iteration — rapid build-capture-refine cycles
• ✔ Team review flows — send to Figma, get feedback, iterate in code

Tips for Best Results

• ✔ Use the remote MCP server — it's the only one that supports generate_figma_design
• ✔ Capture specific components rather than entire pages for cleaner layers
• ✔ Set up Code Connect if you have a design system — it makes the Figma → Code direction dramatically better
• ✔ Use design tokens/variables in Figma — Claude can extract and use them in your Tailwind or CSS config
• ✔ Enable Tool Search if you have multiple MCP servers — ENABLE_TOOL_SEARCH=auto:5 reduces context overhead
• ✔ Capture multi-screen flows one screen at a time — each becomes a clean frame in Figma
• ✔ Name your Figma frames clearly — Claude uses frame names when generating code from designs

Conclusion

Code to Canvas is one of those integrations that redefines how design and development work together. The ability to take running production code and convert it into editable Figma layers — then pull refined designs back into code — eliminates the gap that has frustrated design-dev teams for years.

The workflow is simple:

1. Build with Claude Code (or any tool)
2. Capture to Figma via MCP
3. Refine in Figma (designers iterate freely)
4. Pull back to code via Figma URL reference
5. Verify with Chrome integration

It's not perfect — business logic doesn't transfer, animations are frozen, and the MCP tools are still maturing. But for the use cases where it fits — prototyping, design exploration, design system validation, stakeholder review — it's a genuine leap forward.

Pro Tip: Start with the remote MCP server (claude mcp add --transport http figma https://mcp.figma.com/mcp) and the Figma plugin. Build a simple component, send it to Figma, edit it there, and pull it back. Once you see the loop working, you'll find a dozen ways to use it in your workflow.

Happy designing — from your terminal!