"Pixel-perfect" gets thrown around a lot, but a design that looks perfect at one breakpoint in Figma and falls apart on a real phone is not actually done. Here is the workflow I use to keep the build honest to the design at every screen size.
1. Read the file before touching code
Before opening an editor, I go through every frame and check: what changes between breakpoints, which components repeat (and should become reusable classes), and what the spacing system actually is — most Figma files use a consistent scale (8px, 16px, 24px...) even when it is not labelled. Finding that scale early keeps the CSS consistent instead of full of one-off magic numbers.
2. Structure before styling
I write semantic HTML first — proper headings, landmarks, lists — with zero styling. This does two things: it forces me to think about the actual content hierarchy rather than copying visual layout blindly, and it gives a baseline that is accessible even before CSS loads.
3. Mobile-first, always
Even when the Figma file was designed desktop-first, I build the CSS mobile-first. It is far less error-prone to add complexity at larger breakpoints with `min-width` media queries than to fight against desktop styles while squeezing things down for mobile.
4. Real assets, not placeholders
I export actual optimised images and icons from the Figma file rather than leaving lorem-picsum placeholders in — that way, image dimensions, aspect ratios and load behaviour are correct from the first preview, not "fixed later."
5. Cross-browser and real-device pass
Before calling anything done, I test in actual Chrome, Firefox and Safari (not just DevTools' device emulator) and on at least one real phone. Safari in particular catches flexbox and font-rendering issues DevTools misses.
The result is a build that matches the design file at 375px and at 1920px — not just at the one width someone happened to screenshot during review.