Designing in the Browser Changed Everything
Ditching Figma for a week taught me that sometimes the best design tool is a code editor and a hot-reloading dev server.
Ditching Figma for a week taught me that sometimes the best design tool is a code editor and a hot-reloading dev server.
Last month, I did something that probably sounds crazy: I designed an entire client dashboard without opening Figma once. No mockups. No component libraries. Just me, VS Code, and a lot of CSS.
It was one of the most valuable experiments I've done in years.
The project was a analytics dashboard for a SaaS product. Normally, I'd spend a week in Figma: creating component libraries, setting up auto-layout frames, designing responsive breakpoints, perfecting every shadow and border radius.
Instead, I opened my code editor and started building.
Within the first hour, I hit something I never encounter in Figma: real constraints.
That sidebar I wanted? I had to figure out how it would actually collapse on mobile. Not just design two artboards (desktop and mobile), but figure out the actual transition, the breakpoint, whether it should slide out or push content over.
That color palette I was considering? I had to see it on actual UI elements, with actual text, in actual lighting conditions on my screen. Not just five perfect squares on an artboard.
Those micro-interactions I had in mind? I had to build them, which meant I immediately knew if they were going to feel smooth or janky.
Here's what really changed: the feedback loop became instant.
In Figma, I'd design a button, maybe create a few variants, add some prototyping if I was feeling ambitious. Then I'd hand it off, someone would build it, and a few days later I'd see it in staging and think "hmm, that's not quite right."
In the browser, I'd write the CSS for a button, hit save, and see it immediately. Too much padding? Adjust it. Wrong hover state? Change it. Border too heavy? Fixed in seconds.
I probably iterated on the button styles twenty times in an hour. In Figma, I might have iterated three times over two days.
This is huge: when you design in the browser, you're designing responsively from the start.
In Figma, responsive design means creating multiple artboards. Desktop, tablet, mobile. Maybe a few breakpoints in between if you're thorough. But it's still just snapshots of different screen sizes.
In the browser, I just... resized my window. Constantly. I saw exactly where things broke, where text wrapped awkwardly, where spacing felt wrong. I couldn't hide from responsive behavior—it was right there, happening in real-time.
This made me make better decisions. I used more flexible layouts. I relied less on fixed dimensions. I thought about content density and how information hierarchy shifts across screen sizes.
Designing type in Figma versus the browser is night and day.
In Figma, you're looking at a font at one specific size, with one specific line length, on a screen that's probably not representative of where most users will see it.
In the browser, I could see how the type actually rendered. How it looked at different zoom levels. How it performed with real content of varying lengths. How it felt when you actually scrolled through it.
I ended up adjusting my type scale three times because what looked good as a static mockup felt wrong when I was actually reading it.
Let me be honest: there are downsides to designing in the browser.
The early exploration phase is harder. When you're trying wildly different directions, when you want to explore ten different layout options in an hour, Figma is faster. You can duplicate artboards, move things around, try stuff without worrying about implementation.
Collaboration is trickier too. It's easier to drop a Figma link in Slack and get feedback from non-technical stakeholders than to push a branch and have them run it locally.
And sometimes you want to explore a design direction that you know will be hard to build. In Figma, you can dream without constraints. In the browser, you're always aware of the cost of your decisions.
After this experiment, I'm not ditching Figma entirely. But I've changed my process significantly.
Now, I do quick sketches in Figma for early exploration. Low-fidelity, fast, exploring different directions. Then, once I have a direction I like, I jump into code.
The detailed design work—the spacing, the colors, the interactions, the responsive behavior—I do that in the browser. Because that's where it matters.
You might be thinking "great, but I'm a designer, not a developer." Fair enough. But here's the thing: you don't need to be a senior developer to design in the browser.
Start with HTML and CSS. That's it. You can create sophisticated layouts and interactions without touching JavaScript. There are tons of resources to learn the basics in a few weeks.
And the payoff is enormous. You'll be a better designer immediately. You'll understand what's easy and what's hard to build. You'll design things that are both beautiful and realistic. You'll catch problems early instead of in production.
Designing in the browser isn't about ditching your design tools. It's about expanding your toolkit and knowing when to use each tool.
For me, the browser has become my primary design tool for any project that's moving beyond initial exploration. The constraints are valuable. The feedback loop is unmatched. The end result is better.
If you've never tried it, I challenge you: take a small project and design it entirely in the browser. Just once. See how it feels. Notice what you learn.
You might be surprised at how much it changes the way you think about design.