[]
Design · 12 steps · updated 6d ago

Design-to-Dev Handoff

From final Figma frame to a ticket an engineer can start cold.

#handoff#figma#enablement
/playbooks/design-to-dev-handoff?step=0

Steps

Owner · Design Systems

0 of 12 steps complete

Loading your saved progress…

0%

  1. Freeze the design file

    Branch the file so post-handoff edits are visible.

  2. Audit tokens

    Every color, radius and spacing value must map to a token.

  3. Document responsive rules

    Define behaviour at each breakpoint explicitly.

  4. Specify empty and error states

    No handoff ships with only the happy path.

  5. Define motion

    Duration, easing and trigger for each transition.

  6. Check accessibility

    Contrast, focus order and touch target sizes.

  7. Export assets

    SVG for icons, 2x raster only when unavoidable.

  8. Write the ticket

    Link the frame, list acceptance criteria as checkboxes.

  9. Walk the engineer through it

    15-minute sync beats a long document.

  10. Agree review checkpoints

    Mid-build and pre-merge design review slots.

  11. Review the build

    Compare against the frozen frame at the same breakpoints.

  12. Close the loop

    Fold any deviations back into the design system.