Designers and engineers both want the same thing: a great product. The handoff is where that shared goal most often goes wrong — not because either side is careless, but because “the design file” and “the specification an engineer can build from” are not the same thing, and conflating them causes predictable failures.
What engineers actually need from a design file
Engineers don't build from visuals — they build from values. When a developer looks at a component, they need to know:
- What are the exact spacing values? (Not “it looks like 16px” — exactly 16px)
- What happens in every interactive state? (Default, hover, focus, active, disabled, loading)
- What happens at every breakpoint?
- What are the edge cases? (Long text, empty state, error state)
- What are the exact colour tokens, not hex values?
A beautiful, pixel-perfect Figma frame doesn't answer any of these questions unless it's been explicitly set up to do so.
The minimum viable handoff spec
For every component we deliver, our Figma files include:
- Component variants covering all interactive states
- Auto layout on every frame, so engineers can see spacing intent rather than guessing from fixed positions
- Named styles for all colours (mapped to CSS custom property names) and text styles (mapped to the type scale)
- Annotations using a sticky note layer for anything non-obvious — animation timing, focus ring behaviour, scroll behaviour
- A loom walkthrough of any component with complexity that can't be captured in static frames
The component documentation page
Every design system we deliver includes a documentation page inside the Figma file itself — a table with every component name, its available variants, its token mappings, and any notes. Engineers can use this as a reference without having to dig through frames.
The review session is not optional
No matter how thorough the file is, a 30-minute sync between the designer and the lead engineer before implementation starts prevents two weeks of back-and-forth during QA. Walk through the complex components, answer questions, and align on what “pixel perfect” means in context. It's the highest-leverage 30 minutes in the design-to-development process.