Digital Product Handover: Design to Development
The handover of designs from the design team to the development team is a critical moment in a project. Poorly executed handovers lead to inconsistencies, misunderstandings, and rework. This article explains how we manage design-to-development handover.
What a Good Handover Includes
- Complete component library: Every UI component designed in all required states (default, hover, focus, disabled, error, loading)
- Design tokens: Colours, typography, spacing, and border values defined as named variables that map directly to code
- Annotation and documentation: Notes on behaviour, interaction, and anything that isn't obvious from the visual design alone
- Assets export: Icons and images exported in the correct formats and sizes (SVG for icons, WebP/PNG for images with appropriate resolution)
- Responsive specifications: How the layout changes at each breakpoint
Our Handover Process
- Designer marks files as "ready for development" in Figma
- Developer reviews the designs and asks clarifying questions before implementation begins
- Design and development pair on complex interactions
- Designer reviews implementation during development (not just at the end)
- Design QA is conducted before feature sign-off
Design System Code
Where a design system exists, components are defined at the code level as well as design level — ensuring that what is built exactly matches the design specification without developers needing to measure pixels from screenshots.