All posts
Design 1 min read

From Figma to a live site: my design handoff checklist

By Moniruzzaman Talukder

Most differences between a design and the finished site come from small details that were never written down. A simple checklist before development starts prevents almost all of them.

Before building

  • Name colors, fonts and spacing once, then reuse them everywhere.
  • Design the mobile layout, not only the desktop one.
  • Show hover, focus and empty states for buttons and forms.

During building

Build the shared parts first: header, footer, buttons and headings. When these are right, every page that uses them is right too.

Before launch

  1. Compare each page with the design at phone, tablet and desktop widths.
  2. Check that every image is compressed and has alt text.
  3. Click every button and link once.

Twenty minutes with this list is cheaper than a week of fixes after launch.

Have a project in mind?

Start a project