Web Design

Our design-to-development handoff checklist now that we're on Figma

DSN

After a few projects on Figma, we put together a short handoff checklist to keep designs and implementation in sync, since even great collaborative tooling does not automatically prevent things from falling through the cracks.

  • Every screen has documented states — empty, loading, error — not just the happy path
  • Spacing and type scales use Figma's shared styles rather than one-off values, so a later design system change propagates automatically
  • Interactive states (hover, focus, disabled) are specified explicitly rather than left to developer assumption
  • Responsive breakpoints are shown as separate frames, not implied by a designer's mental model alone

It is a short list, but it has already caught a couple of missing states before they became a mid-development surprise.

A specific miss the checklist caught

On one project, the checklist's requirement to document error states surfaced a form with no designed error state at all, something that had gone unnoticed through several rounds of earlier design review because reviewers, like most people looking at a design file, naturally focus on the happy path a design is meant to showcase. Catching this before development started avoided a mid-sprint pause waiting on a design decision that could easily have been made calmly, ahead of time, instead.

How the checklist gets applied in practice

Rather than a one-time review at the end of the design phase, we now run through this checklist incrementally as each screen is finalized, treating a screen as design-complete only once every item on the list has an actual answer rather than a placeholder or an implicit assumption. This catches gaps earlier, screen by screen, rather than discovering several gaps at once in a single large review pass right before a project's design phase is meant to close out entirely.

Keeping the checklist itself from growing indefinitely

We have deliberately kept the checklist short, resisting the temptation to add an item every time some unrelated one-off issue comes up on a specific project, since a checklist that grows to cover every possible edge case eventually becomes long enough that people skim past it rather than actually working through it item by item. Anything project-specific gets tracked separately in that project's own documentation instead.

A new designer joining the team midway through this year picked up the checklist within their first week and has said, unprompted, that it made understanding what "done" actually means for a design handoff considerably clearer than the informal, tribal-knowledge version of the same expectations they were used to on a previous team.

← Back to the journal

Have a project in mind?
Let’s talk.

Tell us where you are and where you want to go. We'll map the fastest route between the two.

Currently accepting new clients