Designing a Website in Figma Before Development
Why doing the design work in Figma first, rather than designing in the browser, changes how the build goes.
By Touhidul Islam Rukon
What is it?
Designing in Figma before writing any code means the layout, typography, components, and user flow are all worked out and reviewable before development starts.
Why does it matter?
Designing directly in code tends to lock in early decisions just because they're already built. Working in Figma first keeps everything easy to change, laid out and typography, spacing, entire flows, before any of it is expensive to touch.
Real-world perspective
I designed the ERTH website in Figma before building it: the structure, the visual direction, the four-step user flow from choosing a device to getting paid. That groundwork is what the actual build is now being built from.
Key considerations
Work through the full user flow in Figma, not just individual screens in isolation.
Decide on type, spacing, and color as a system early, so development isn't guessing at consistency later.
Treat the Figma file as the source of truth during the build, and keep it in sync as decisions change.
Conclusion
Design-first isn't slower. It moves the expensive decisions earlier, where they're still cheap to change.