Design in Figma or code? Wrong question.
The skill is picking the right design mode.
This video is a conversation between @soleio and Karri Saarinen, the designer and CEO of Linear. The first part got me thinking about designing in code.
Here’s my take.
Figma or code is the wrong question. The real question is which mode helps you understand the problem and gets you to the right solution.
Design is exploration and communication. And exploration is, at its core, fuck around and find out.
Exploring in code
Exploring in code, now that it’s faster and better, comes with real benefits. The speed. Playing with real data. Having the design system close at hand, so you get consistency. And being able to talk with the codebase.
But I see it as an addition to designing. I shared some earlier thoughts on this for Balsamiq’s Good Product Club article on vibe coding.
It can expand your thinking, and limit it
Exploring in code can expand your thinking. But it can also limit it.
Code can send you up a path, and you commit to that path. The lower fidelity you are, the cheaper your ideas are, and the easier they are to throw away. That’s a good thing when you’re exploring.
So one way to explore in code is to really push it to diverge. Help it diverge, help yourself diverge, and try a lot of different approaches before committing to any of them.
It’s just like writing
Writing helps you understand things better, and explain things better. The same goes for design. You understand the problem and the solution space better as you get your mind working.
That part can be accelerated by code. But it can also be skipped. And because code already comes up with somewhat of a direction, it feels like you’re making progress. It might be good. It might even one-shot it. But you could be missing out on a better solution, or the real problem, if you commit early to what code gives you.
Picking the right mode
I see myself jumping between modes. Pen and paper, Figma, code, a prototype. And constantly being conscious of time and efficiency.
For example, high-level layout for a page is something I’d explore on paper, or very rough and scruffy in Figma. Basically wireframing. I might try out several layouts, keep the ones I dismiss out, and give the rest as a base. That can be a starting point to use with code or AI.
And especially design that has multiple touch points. Think of flows within a product, or flows that extend the product. They start on a website, go into the product and end up in your inbox. Or a flow starts in a different tool, like a calendar event or a Slack message, and you end up in the product and then leave the product again.
The skill set is becoming this: picking the right design mode, or modes, and understanding how each of them can help you understand the problem or the solution space.
Code is the final form. But it’s not always the best place to think.