TLDR: Figma partnered with Anthropic to launch Code to Canvas. A feature that lets you take live, running UI built in Claude Code and drop it straight into Figma as fully editable design layers. No screenshots. No copy-paste chaos. Just a clean bridge between the code you write and the design your team collaborates on.
If you’ve ever built something in code, sent a screenshot to a designer and watched that context completely fall apart in translation this one’s for you.
Figma just quietly solved one of the most frustrating parts of the modern dev workflow.
On February 17, 2026, Figma and Anthropic announced a new integration that lets developers send live browser UI directly into Figma as editable design frames. No image exports. No Figma recreations from scratch. The actual rendered UI pulled from your localhost, staging or production environment lands in Figma as real, manipulable layers.
It’s called Code to Canvas and if you work with Claude Code. It’s already available.
The Real Problem This Solves
Here’s the honest reality most articles won’t say: the design-dev handoff has been broken for years.
Developers build something that works. Designers then try to recreate it in Figma from a screenshot or a Loom video. Half the context gets lost. Annotations are made on the wrong version. Engineers go back and change things that were already signed off.
This is the loop everyone has learned to live with. Code to Canvas breaks it.
Instead of exporting a screenshot, you type three words. “Send this to Figma” and your running UI appears in the Figma canvas as structured editable frames. Text stays as text. Buttons stay as buttons. Auto-layout is preserved. Your team can immediately start annotating, comparing and riffing on what’s actually been built not some approximation of it.
How It Works (Step-by-Step)
You don’t need to be a Figma power user to set this up. Here’s what the process looks like in practice:
- Install the Figma MCP server — run
claude mcp add --transport http figma https://mcp.figma.com/mcpin your terminal - Authenticate — open Claude Code, type
/mcp, select the Figma server, and complete OAuth in your browser - Build your UI in Claude Code and preview it in the browser
- Type “Send this to Figma” — Claude captures the live rendered state using the
generate_figma_designtool - Your UI appears in Figma as fully editable frames — ready for your team to annotate, copy, and iterate on
- Round-trip back to code by referencing the updated Figma design via the MCP server in your next Claude Code prompt
The whole setup takes under two minutes if you already have Claude Code running.
What Makes This Different From a Screenshot Tool
A lot of people will read the headline and think “Cool, it’s basically Snagit with extra steps.” It’s not.
The difference is in what the output is. When Code to Canvas captures your browser, it doesn’t flatten everything into a PNG. It reconstructs the UI as native Figma structure editable text, component buttons and auto-layout containers. Designers can duplicate frames, tweak spacing, try alternate color palettes and compare four different layouts side by side all without asking a developer to push a single line of code.
This matters most for multi-screen flows. You can capture an entire five-screen onboarding sequence in one session and Figma preserves the order and context across all of them. Your whole flow lives on one canvas, editable and shareable.
Key Capabilities at a Glance
- Live UI capture — grab any running browser UI, including dynamic states that are hard to mock manually
- Fully editable frames — output is native Figma, not screenshots or flattened images
- MCP-powered — built on the open Model Context Protocol, making it extensible and interoperable
- Multi-screen capture — capture several screens in one session while maintaining sequence and context
- Works with Figma Make — whether you start in Claude Code or Figma Make. you can bring previews onto the canvas for iteration
The Honest Limitations
No integration is perfect, and this one has some real friction worth flagging.
The biggest issue is the round-trip. Going from Claude Code → browser → Figma → back to Claude Code involves at least three tools and five context switches. Each handoff risks losing information — particularly anything involving business logic, event handlers, or state management. Figma layers don’t carry your React state. When changes come back to code, the AI re-translates visual decisions from scratch.
A few other things to keep in mind:
- The
generate_figma_designtool is currently Claude Code-only — it doesn’t work with Cursor, VS Code, or Codex yet - The Desktop MCP server requires a paid Figma plan with Dev or Full seat
- Windows/WSL users face additional friction — the Desktop MCP server doesn’t support WSL configurations
- The
get_codetool can struggle when Figma elements have annotations attached
These aren’t dealbreakers — but they’re real, and you’ll run into them.
Why Figma Is Making This Move Now
This launch isn’t just a product update. It’s a strategic response to a genuine existential threat.
With tools like Claude Code, v0 and Cursor letting developers ship polished UIs in hours, the traditional design first, then build pipeline is being skipped entirely by a growing chunk of teams. Figma CEO Dylan Field has been vocal about this — arguing that the canvas isn’t less relevant because AI makes building faster. It’s more relevant because it’s now the place where human judgment, exploration, and collaboration happen.
“Speed without exploration can turn into momentum in the wrong direction. That’s the moment when code needs to meet the canvas.” — Dylan Field, Figma CEO
By embedding Figma directly into the Claude Code workflow, Figma isn’t just adding a feature — it’s repositioning itself as the collaboration layer on top of AI-generated software.
Should You Use Claude Code to Figma
If you’re a developer using Claude Code who collaborates with designers or PMs. yes, absolutely try it. The setup is fast, the output is genuinely useful, and having an editable Figma frame instead of a screenshot will save you real back-and-forth time.
If you’re a designer working with a code-first team — this is worth bringing up in your next standup. Instead of waiting for a mockup that matches what’s actually been built. You can work directly from the live product.
If you’re a solo builder or indie hacker — the round-trip might add more overhead than it’s worth right now. But keeping an eye on how this matures is definitely worth it.
FAQ
Do I need a paid Figma plan to use this?
The Send this to Figma feature via Remote MCP works with free plans. However, the Desktop MCP Server. which supports selection-based workflows requires a Dev or Full seat on a paid Figma plan.
Can I capture an entire app flow, not just one screen?
Yes. Code to Canvas supports multi-screen capture in a single session. preserving the sequence and context so the full user journey stays coherent in Figma.
Does this work with tools other than Claude Code?
Right now, the generate_figma_design tool is Claude Code-only. Other Figma MCP tools work with Cursor, VS Code, and Codex but the Code to Canvas direction is exclusive to Claude Code for now.
What happens to my business logic when I send to Figma?
It doesn’t transfer. Figma captures the visual structure only not state management, event handlers, or component logic. The round-trip back to code means the AI will re-interpret visual changes into implementation.
Is this the same as Figma Make?
No. Figma Make lets you start from a prompt and build a UI inside Figma. Code to Canvas is the reverse. It starts with already-built code and brings it into Figma. Both paths lead to an editable Figma canvas, just from different starting points.
Sources
- Figma Official Blog — Turning Production Code into Editable Figma Designs
- Figma Official Blog — The Future of Design Is Code and Canvas
- CNBC — Figma Partners With Anthropic to Turn AI-Generated Code Into Designs
- Builder.io — Claude Code to Figma: Tutorial, Limitations, and a Better Approach
- Muzli — Claude Code to Figma: How the New Code to Canvas Integration Works
- Noqta — Figma and Anthropic Launch Code to Canvas
- MLQ.ai — Figma Teams Up With Anthropic for AI Code-to-Design Conversion Tool
