Figma's Code to Canvas sends your UI to Figma, not your real brand
By The WAALEE Team · · 4 min read
Figma and Anthropic shipped something genuinely new this year: Code to Canvas, announced February 17, 2026, which takes a real, running UI built in Claude Code and pushes it into Figma as fully editable layers and frames, not a flattened screenshot. Every other design-to-code story this year has run in one direction, Figma to code. This one runs backward, and it's the more interesting half. Read past the demo, though, and it still assumes the thing everyone else assumes: that the code you're sending to Figma already has your real brand baked into it.
What Code to Canvas actually moves
The mechanism is straightforward once the Figma MCP server is installed: point Claude Code at a localhost, staging, or production URL, tell it to send the current state to Figma, and the rendered browser output, colors, type, spacing, auto layout, component structure, comes back as native Figma objects you can select, nudge, and restyle like anything drawn by hand. It can even capture a multi-screen flow in one session, preserving the sequence so a reviewer sees the whole path instead of one static frame. For a team whose designers were stuck reviewing code in a browser tab because nothing coded ever made it cleanly back into the file, that's a real fix, not a demo trick.
It reads what's already rendered. It doesn't check what should be
Here's the part worth sitting with. Code to Canvas converts whatever colors, fonts, and spacing are already sitting in the running UI. It has no step that asks whether those values are your brand's actual values or a coding agent's best guess at them. If Claude Code built that UI from a vague prompt and defaulted to its own palette, indigo-on-white, Inter, 8px radii, Code to Canvas will faithfully turn that guess into pixel-perfect, editable Figma layers. You end up with a beautifully organized Figma file of the wrong colors. The tool's own docs are candid about the boundary: alignment with a full design system still has to be done manually, and it does not automatically map new layers to your existing Figma components.
Other tools point the gap out from a different angle
Superdesign, a design skill built for Claude Code and Cursor, actually ships a command that reads a live URL directly: `superdesign extract-website --url`, which pulls a style guide, tokens, and brand assets off a real site and writes them to a design-system.md file the agent then builds from. That's closer to solving the actual first-mile problem, values in before code gets written, but it's still gated behind installing the CLI, signing into it, and running it inside an agent session before any of it works. Neither tool has a step where someone without an agent open yet can just check what a brand's real hex codes are.
- Code to Canvas converts whatever is already rendered, correct brand values or Claude Code's own defaults, with no step that tells the two apart.
- Its own documentation says design-system alignment and component mapping are still manual work after the layers land.
- Superdesign's extract-website command does read a live URL for real tokens, but only once its CLI is installed and running inside an agent.
- In both cases, the fix has to happen before code gets written, not after it's already been pushed to a canvas.
Get the values right before the first prompt
The fix is the same one that applies upstream of every tool in this pipeline: pull the real computed colors, type scale, and spacing off the live page where your brand actually renders before you ever type the first Claude Code prompt. Hand the agent exact hex codes and a real type ramp instead of a description, and the UI it builds starts on-brand, which means whatever Code to Canvas sends back to Figma is on-brand too, no manual realignment required after the fact.
Three points in the same pipeline, and where the real brand values have to enter it:
- Figma Code to Canvas: Pushes a running Claude Code UI into Figma as editable layers, preserving structure and flow. Converts whatever colors and type are already in the code, correct or not, and needs manual work to align with existing components.
- Superdesign extract-website: A CLI command that reads a live URL and writes real tokens to a design-system.md file an agent can build from. Solves the sourcing problem, but only once its CLI is installed and signed in.
- WAALEE: Paste a live URL in the browser, no install, no CLI, no agent session required. Returns the real colors, type scale, and spacing as exact values, ready to open Claude Code's first prompt correctly instead of fixing it in Figma after.
None of this is a knock on what Figma and Anthropic built. A clean, structured round trip from running code back into an editable design file is a real, missing piece, and being upfront that component mapping is still manual is more honest than pretending otherwise. The gap is just positioned exactly where it's been all year: these tools move a design system faithfully in whichever direction they're pointed. Making sure what they're moving is actually your brand, and not a plausible guess at it, is still the step that happens before any of this runs.