I used to open my code editor the second I got an idea. No planning, no sketching, just straight into building. And almost every time, I'd end up redoing half of it later because something looked wrong once it was actually on screen — spacing felt weird, buttons didn't line up, colors didn't match.
Now I do things differently. Before I write any code, I open Figma first. Here's how that actually works for me.
1. First, I just draw boxes
I don't start with colors or fonts. I start with plain gray boxes and simple text labels. Where should the menu go? What should people see first? How many steps does this page need?
At this stage, nothing is "pretty" yet, and that's on purpose. If I make it look nice too early, I get attached to it. And if I need to change something, it's way easier to delete a plain box than to delete something I already spent hours designing.
2. I set up my basic building blocks first
Before designing any real pages, I pick my colors, my fonts, my spacing, and I build a few basic pieces like buttons, input boxes, and cards. Think of this like building your own personal LEGO set. Once these pieces exist, every new page is just me snapping these pieces together, instead of making new design decisions every single time.
This is a big reason apps look messy — when every screen is designed on its own without any shared rules.
3. I design real pages with real content
Now I actually design the pages people will use. And I try to use real content, not placeholder text like "lorem ipsum." Why? Because fake text hides real problems. A button might look fine with a short label but break with a longer one. A list might look fine with 5 items but look broken with 50.
I also think about the boring stuff people forget — what does it look like when there's nothing to show yet? What happens if something goes wrong or fails to load? It's easy to only design the "everything works perfectly" screen and forget these other moments completely.
4. I click through it like a real user
Figma lets me connect all my screens together so I can click through them just like a real app. So I do that. I pretend I'm a brand new user and click through the whole thing start to finish.
This is usually when I notice things like: "wait, this has too many steps" or "this button goes somewhere confusing." And fixing that now takes two minutes. Fixing it after the app is already built takes hours.
5. Only after all this, I start coding
By the time I actually open my code editor, I already know exactly what the app should look like, what colors and fonts to use, and how everything should flow. I'm not stopping every five minutes to decide "should this be a popup or a full page?" That decision is already made.
This also makes building the app itself way faster. I'm just turning the design into real code, not guessing and figuring things out as I go.
Why I do it this way
Changing your mind in Figma is free. Changing your mind after you've already built something in code costs a lot more time. So I try to make all my mistakes and change all my ideas early, while it's still just boxes and pictures — not real, working code.
Basically: design first, code second. Let the design be the plan, and let the code just follow that plan.
Top comments (0)