My checklist for turning a Figma design into a responsive site

Most of my work over the last five years has started the same way: a Figma or Adobe XD file with a desktop frame, a mobile frame, and sometimes a tablet one. The site has to look right at every width in between, and work for keyboard and screen reader users too. This is the list I go through before I call a page done.

Before writing code

• Pull out the design tokens: colours, font sizes, spacing and breakpoints. Put them in CSS variables or the Tailwind config first.
• List the repeated pieces (buttons, cards, section headers) and build those as components before any page.
• Ask about states the design doesn't show: hover, focus, empty, loading, long text, error.

While building

• Use fluid sizes with clamp() for headings and spacing, so the layout scales smoothly instead of jumping at breakpoints.
• Drag the browser from 320px to 1920px slowly. Things break between the frames, not on them.
• Test with real content lengths: long names, long titles and translated text.
• Give images width and height (or aspect-ratio) so the page doesn't jump while they load.

Before handing over

• Tab through the whole page: every control reachable, focus always visible, order makes sense.
• One h1 per page and headings in order, so the outline reads correctly.
• Check colour contrast for text on images and coloured backgrounds.
• Run Lighthouse on mobile and fix anything in accessibility and best practices first.
• Try it on a real phone, not only the browser's device mode.

None of these steps is clever on its own. Doing all of them every time is what makes the difference between a page that matches the design file and a site that holds up when real people use it.