Designing in the browser — workflow notes

How I went from "Figma then code" to designing directly in JSX, and the trade-offs along the way.

Designing in the browser

For years I treated Figma as the source of truth and code as the translation step. Recently I've flipped that for personal projects.

What changed

Design tokens in CSS mean the browser is always the real preview.
Tailwind utilities let me iterate on spacing and rhythm as fast as I can in Figma.
Component libraries (shadcn/ui) remove the boilerplate that used to make code feel slower than design tools.

What I still use Figma for

Logos and brand exploration
Print/social assets
Sharing concepts with clients who don't want to read PRs

The honest trade-off

Designing in code is faster for me, on familiar layouts. For anything truly novel — new visual languages, weird layouts — I still sketch on paper and mock in Figma first.

Use the tool that gets the idea out of your head fastest.