Designing a Website in Figma Before Development

Designing in Figma before writing any code means the layout, typography, components, and user flow are all worked out and reviewable before development starts.

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.

On ERTH, the design was worked out and approved as a single file before the build started, and my part began with that approved file. Having the page structure, the visual direction and the user flow from choosing a device through to payout settled up front is what made a faithful build possible.

That groundwork is what the production build was then made from. The client approved one design file as final, and the site was built from it as static HTML, CSS and vanilla JavaScript. Working through the approved design element by element surfaced four defects the prototype had carried unnoticed, including a wrapper element that closed early and left a heading black on a near-black background. Design-first did not prevent those; it did mean every one of them was found against a reference everyone had already agreed on, rather than argued about.

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.

Design-first isn't slower. It moves the expensive decisions earlier, where they're still cheap to change.