02-22-26
I typed a few sentences into terminal and a few minutes later I had a working web app.
It was a 3D chess piece viewer with a sidebar and interactive states, and the whole thing was running in my browser.
Fig. 1
Then with a quick little tap of the keyboard, I sent it over to Figma and had a fully editable Figma file with real layers, real text, and real structure. I could click on any element and change it.
I started with code but now I was on the canvas messing around with typography, colors, spacing, playing with contrast ratios, aligning baselines.
All the stuff you do when you're designing and exploring options.
Once I adjusted things how I wanted, I copied the Figma Frame Link with ⌘ L, pasted it back into Claude Code, and said, "Update my build to use this new style."
It pulled the colors, the fonts, the spacing right out of the Figma file and rebuilt the app to match. Absolutely wild that this is our new reality.
Now before you think I'm about to tell you that Figma is dead or that designers should just code everything or that AI is going to replace the canvas...
These are all tools. I've been pretty vocal about this and I don't think code will ever fully displace canvas, and I don't think canvas will replace code either.
There's a reason pen and paper still exist even though we have keyboards and computer screens. Different tools for different tasks.
I could code websites before AI became a thing. I still liked to design in the canvas first because my brain operates differently on the canvas than it does when I'm trying to manipulate code.
When I was in Figma, I could duplicate a component, try four color variations side by side, nudge things by a few pixels, even manually draw a bishop icon when the icon library was missing one.
That's fast on the canvas but painfully slow through prompting.
But when I was in code, I could do things the canvas can't do at all. Put all the chess pieces in a row, click one, and watch it animate to the center while the others slide back. Interactive, stateful, alive. You're not prototyping that in Figma with any real fidelity.
The most fascinating thing is not necessarily either tool, it's the loop between them.
Code is fast at building.
Canvas is fast at tweaking, experimenting, adjusting quickly. This workflow lets each tool do what it's best at.
I also want to point out when Claude rebuilt the app from my Figma design, it got most things right but it got some colors and alignment wrong.
You still need to notice "oh, that baseline is off" or "those are the wrong colors" and tell it what to fix.
Design knowledge matters more in this workflow, not less. If you understand spacing, typography, color, and layout, you'll catch what the AI misses and you'll prompt it better. Or you'll know what to adjust in your Figma file before you start building.
If you don't, you'll be prompting and prompting and prompting and it's going to be painful.
I recorded a full walkthrough to show you how to set up Claude Code with Figma and how to tie it all together so you can see exactly how it works.
This isn't polished. It's a real working session with real mistakes and real questionable moments. =)
I also put together a step-by-step tutorial you can follow along with. It walks you through installing everything, building your first app, connecting to Figma, and doing the full roundtrip. You can literally drag the tutorial file into Claude Code and say “help me build this.”
Happy building,
Practical design wisdom delivered weekly.