From Figma Design to Production Website

This is the process of taking a completed design file and turning it into real, working markup, styling, and behavior in a browser, then into a deployed site.

A design file isn't a website. Responsive behavior, real content lengths, interactive states, and performance all have to be built and decided during development, and a design that looks finished can still be a long way from a finished site.

On ERTH I did the second half of this path. The client approved a design file as final, and I built the production website from it: static HTML, CSS and vanilla JavaScript bundled by Vite. That build is finished and deployed on Vercel.

The gap between the two was larger than the design suggested. Rebuilding element by element surfaced four defects nobody had noticed in the prototype, including a wrapper that closed early and left one heading rendering black on a near-black background. A design file can look complete and still be some distance from a page a browser handles correctly.

Build against real content where possible, not lorem ipsum, since real text and images are what actually break a layout.

Treat responsive breakpoints as design decisions, not an afterthought handled purely in code.

Expect iteration. The first build rarely matches the design exactly, and that gap is where the real refinement happens.

Going from Figma to production is its own skill, separate from designing and separate from writing code. It's where the two have to agree.