Handoff & design QA

Work through the implementation with your developers so the design details carry through.

Start a project
Pixel grid & padding
100%
40180
Search…

Search field

180 × 40 px

44120

Primary button

120 × 44 px

2036

Toggle

36 × 20 px

2264Draft

Status tag

64 × 22 px

4040

Avatar

40 × 40 px

88240

Card

240 × 88 px

40180
Search…

Search field

180 × 40 px

44120

Primary button

120 × 44 px

2036

Toggle

36 × 20 px

2264Draft

Status tag

64 × 22 px

4040

Avatar

40 × 40 px

88240

Card

240 × 88 px

Handoff specs
Layout
Padding10px 16px
Height44px
Radius8px
Snippet
const Button = styled.button`
  padding: 10px 16px;
  border-radius: 8px;
  height: 44px;
`
What you get
  • Annotated handoff specs with measurements + tokens
  • Pairing sessions with the engineers building it
  • Pixel, state and interaction QA passes on staging
  • Bug list with screenshots and expected behaviour
  • QA checklist for the releases included in the scope
How it runs
  1. 1

    Handoff

    Specs, tokens and edge cases engineers can build from.

  2. 2

    Pair during build

    Answer questions live so decisions don’t stall.

  3. 3

    QA the build

    Compare staging against the design, state by state.

  4. 4

    Review

    Check the agreed screens and states with your team before release.

Example

Celium: a simpler version shipped than the marketplace I designed. That experience is one reason I now prototype the interactions and stay involved through implementation.

Product UX reviewDesign sprintsDashboard designPrototypingDesign systemsHandoff & design QAViewing