Code-first design just got a diverge converge loop
Figma just shipped a way to move between code and canvas. Here's why that's interesting.
If you build with Claude Code, you know the rhythm. Prompt, iterate, refresh, repeat. It’s fast. It’s focused. And after enough sessions, you’re boxed in, you can’t explore different iterations or compare them together.
You’re looking at one screen, one state, one branch at a time. You’re converging before you’ve diverged.
Figma just shipped a way to capture live UI from your browser, localhost, staging, production, and land it on the Figma canvas as editable frames. Not screenshots. Editable layers. Combined with the Figma MCP server, you can push decisions back into code.
Figma blog: From Claude Code to Figma
What this actually enables is a loop:
Build → Check out → Explore → Check in → Ship
Build in code. Check out your UI to the canvas. Diverge with possibilities: layouts, component variations, flow alternatives. Check your decisions back into code. Ship.
Same mental model as git. You check out to explore, check in to commit.
Code is where you converge. You pick a direction, build it, ship it. The canvas is where you diverge. You see the full picture, spot gaps, try options side by side.
A few examples where this loop might actually make sense:
You’ve built a multi-step flow, onboarding, checkout, whatever. You want to see all the steps together before you commit. In code, you click through one state at a time. On the canvas, you lay out the full journey spatially and decide if step 3 should even exist.
You want to explore two or three different layout directions for a page. Duplicate the frame, try a different hierarchy, compare them next to each other.
You’re presenting options to a co-founder or a stakeholder. “Here are three directions, which one do we go with?” That conversation is harder to have inside a terminal.
How people are thinking about this (and using it)
The interesting thing about designing in code is that it’s fast but linear.
The canvas adds spatial thinking. Linear’s team has been working this way for a while. Karri Saarinen has talked about (in 2023) how they screenshot the app, design on top of it in Figma, and treat the design as a reference, never a deliverable.
The code is the source of truth. The canvas is for exploration, not maintenance. This kind of tooling could make that practice more accessible to teams who haven’t worked that way before. But here’s the thing, building in code without ever stepping back to design is how you end up with AI-generated UX that users can feel.
The diverge and converge loop is where taste gets applied. Speed doesn’t matter if the product doesn’t feel considered.