Pixel-perfect handoff is a trap.
We align on spacing tokens, type scale, and component states in Figma — then devs implement with Tailwind utilities, not absolute positioning.
Handoff quality is a system property, not a handoff meeting outcome. Tokens, component APIs, and state matrices must be versioned like production code.
When three squads consume the same library, ambiguous variants become production bugs — constrain APIs early even if designers want infinite flexibility.
config`.
One source of truth, no Slack threads about 2px gaps.
Responsive behavior should be specified as ranges and rules, not pixel-perfect frames for every breakpoint. Engineers extrapolate with the token scale.
Accessibility acceptance criteria belong in the same ticket as visual specs — retrofits cost more than designing focus order upfront.
Responsive behavior is specified as ranges, not separate frames for
every breakpoint — engineers extrapolate with the token scale.
Storybook is the contract surface between design and engineering. If a state is not documented, it is not shipped.
Design QA on real data edge cases — empty lists, long names, error strings — catches issues static mocks hide.
The shared checklist: hover, focus, disabled, loading, empty,
and error states for every interactive component.
Motion and loading states affect perceived quality as much as static layouts. Budget animation for low-end devices, not only flagship phones.
Cross-platform parity does not mean identical pixels — it means equivalent tasks complete with the same confidence on web and mobile.
Design QA happens in Storybook against real
data edge cases, not static PNG exports.
Post-launch usability signals (support tickets, session replays) should feed back into the component backlog within two weeks.
Celebrate pattern reuse metrics, not page count — fewer bespoke screens means faster delivery and fewer regressions.
The table below summarizes the reference points we review with client stakeholders before sign-off. Use it as a shared vocabulary in sprint planning and release reviews.
Handoff artifact tracker
| Artifact | Owner | Status gate | Evidence |
|---|---|---|---|
| Design tokens | Design | Before dev sprint | Figma Variables export |
| Component states | Design + Eng | Before QA | Storybook stories |
| Accessibility audit | QA | Pre-launch | axe + keyboard pass |
| Storybook docs | Eng | At PR merge | Chromatic snapshot |
| Responsive rules | Design | Before build | Breakpoint matrix |
| Error flows | Design + Eng | Before QA | Empty/error screens |
Run through this checklist in order — skipping steps because of deadline pressure is how regressions reach production. Assign an owner for each item before you schedule a launch window.
Pre-launch gates
- Walk through keyboard-only flows on primary paths.
- Verify contrast on muted and disabled UI states.
- Capture hover, focus, and error states in Storybook.
- Run screen reader spot checks on new components.
- Test with longest realistic content strings and empty states.
- Confirm loading and skeleton states on slow 3G throttling.
