Most teams will miss what's actually broken. Here's what it takes to close the dev-design gap for real.
Everyone on X is excited about Figma's new "Code to Canvas" integration. Developers type Send this to Figma and their Claude Code UI teleports into an editable Figma frame. The replies are full of fire emojis and "this changes everything."
It won't change everything.
Don't get me wrong — Code to Canvas is technically impressive. Converting live browser state into semantically-aware Figma layers, bidirectional code/design sync via MCP, a three-command setup — Figma and Anthropic shipped something real. I've tested it. It works.
But the dev-design gap is not a tools problem. It never was. And that's what nobody is saying out loud today.
The Problem Everyone's Celebrating
Here's what Code to Canvas actually solves: friction in the artifact handoff. You built something in Claude Code. Now your designer can see it in Figma without you exporting a screenshot or rebuilding it manually.
That's a real problem. It's also a surface-level problem.
The deeper issue isn't that designers can't see your Claude Code output. It's that by the time you're exporting a UI into Figma, dozens of undocumented decisions have already been made. Which navigation pattern you chose. Why the modal is there instead of a drawer. Why the spacing breaks at tablet width. How the error state should feel.
None of that context lives in the Figma frame. It lived in the conversation you had with yourself (or with Claude) while building. When a designer opens that frame, they see the output — not the reasoning. And the fastest path back to the reasoning is asking you, the developer, to explain it. Back to meetings. Back to Slack threads. Back to the gap.
Figma's own blog acknowledges the real bottleneck — "When AI generates five variants in minutes, the bottleneck is choosing. The canvas is where choosing happens" — and then provides a tool for getting things onto the canvas faster. But faster delivery to the wrong place isn't alignment.
What the Integration Is Actually Good At
Let me be fair about where Code to Canvas genuinely earns its hype.
It's exceptional for async design reviews mid-build. Before, getting design feedback on working code required a meeting, a Loom, or a staging link with instructions. Now you can push three variants to a Figma canvas and leave comments for your designer to react to overnight. That's genuinely better.
It enables non-developers to engage with real interfaces. Designers and PMs who can't read code can now interact with actual, functioning UI states inside the tool they already live in. Annotating a real component is categorically more useful than annotating a mockup that may or may not reflect reality.
The bidirectional flow has legs. According to Muzli's technical analysis, you can select a Figma frame and prompt Claude Code to generate production-ready code that respects design tokens, components, and Tailwind variables. When this works well, it starts to compress the round-trip time on design changes. That's meaningful.
These are real wins. They're just not the wins being celebrated.
The Limitations That Will Bite You
The limitations in Code to Canvas aren't edge cases — they're central to how AI-assisted development actually works.
There's no visual refinement loop. Once Claude generates code from a Figma frame, tweaking hover states, adjusting padding by 4px, or changing the animation curve requires re-prompting Claude or editing the code manually. If your designer is used to making visual decisions directly in Figma and seeing them reflected immediately in code, that workflow doesn't exist here.
Changes hit production files directly. Code to Canvas doesn't operate in a sandbox. What Claude Code outputs goes into your actual codebase. Every iteration loop involves real code review, not a consequence-free design space. This collapses some of the creative freedom that makes design iteration valuable.
Setup requires Figma desktop and a paid Dev seat. Free tier users are locked out. Designers who want to pull design context into Claude Code themselves need to navigate a terminal — a real barrier for anyone who isn't already comfortable with command-line tools.
Multi-frame flows compound token costs. Capturing an onboarding sequence or a checkout flow screen by screen means multiple captures and MCP round trips. For individual screens, the cost is trivial. At scale, it adds up.
These aren't bugs waiting to be patched. They're architectural realities of a tool that's doing something genuinely hard.
The Real Fix Is Documentation, Not Export
Here's the contrarian take: the dev-design gap closes with better asynchronous communication, not faster artifact handoffs.
The teams I've seen eliminate the handoff problem entirely didn't do it with better tooling. They did it by changing when decisions get documented. Instead of exporting a finished UI and explaining it later, they annotated their Claude Code sessions as they went — capturing why they chose one pattern over another, what constraints drove a specific layout decision, what the user was supposed to feel at each step.
That documentation becomes the source of truth that a Figma frame can reference. Without it, you're just shipping better screenshots.
Code to Canvas is a legitimate accelerant if you already have that foundation. If your design tokens are clean and named, if your component library is organized, if your team has agreed on what "done" looks like before development starts — then Code to Canvas speeds up the last mile meaningfully. The MCP server reads your design system semantically, but only if your design system is worth reading.
If you don't have that foundation, Code to Canvas gives you a faster way to produce artifacts that will generate more questions than they answer.
How to Use It Right
If you're going to adopt Code to Canvas — and you probably should — here's what actually maximizes its value.
Use it for mid-build checkpoints, not post-build exports. Don't wait until you think the UI is done. Push to Figma early, often, and with explicit questions attached: "Does this navigation pattern match what we discussed? What should change?" Treat the canvas as a conversation surface, not a delivery mechanism.
Send variants, not final states. Claude Code can generate multiple layout approaches for the same screen in minutes. Push three or four of them to Figma simultaneously. Side-by-side comparison on a canvas reveals preference and trade-offs faster than any code review.
Document intent inside Claude Code before you capture. Before you type Send this to Figma, write a brief prompt that captures the decisions you made: "I chose a modal here because the action is destructive and needs explicit confirmation. The sidebar nav is collapsed by default because most users only visit settings once a month." Export that reasoning as a comment or annotation alongside the frame.
Clean your design system before you start. The bidirectional code-generation feature is only as good as the variable and component structure in your Figma file. Well-organized design tokens mean Claude can generate code that actually matches your system. Messy tokens mean Claude guesses — and its guesses go straight into your codebase.
What's Actually Changing
Code to Canvas is the first major official integration between Claude Code and a design tool. That's significant — not because of this feature specifically, but because of what it signals.
The design tooling industry is converging on a model where code and design are not separate workflows with a handoff in the middle. They're the same workflow with different views into the same underlying system. Figma's MCP server, the bidirectional sync, the design-token-aware code generation — these are early implementations of that future.
The teams who win with AI-assisted development aren't the ones who adopt every new tool fastest. They're the ones who think clearly about what their actual bottleneck is, use the right tool on the right problem, and invest in the habits — documentation, async communication, shared design systems — that tools can accelerate but never replace.
Code to Canvas is a good tool. Use it with clear eyes.
