Figma to code: a design handoff that engineers don't have to guess
A clean handoff means engineers never have to guess: every state is designed, spacing and colour come from shared tokens, interactions are annotated in Figma Dev Mode, and a designer reviews the build before release. Most handoff problems are missing states, not missing pixels.
Key takeaways
- Design empty, loading, error and permission states — not just the happy path.
- Use tokens so design and code share one source of truth.
- Annotate behaviour, not just layout.
- Run design QA on the build; the handoff isn't over at export.
The design looked finished. Then engineering asked what happens when the list is empty, the name is forty characters, the network drops halfway or the user has read-only access. None of it was drawn, so all of it got decided in code — inconsistently.
Every handoff includes
- All states — default, hover, focus, disabled, loading, empty, error, success.
- Edge cases — long text, missing images, zero and huge numbers.
- Responsive behaviour at mobile, tablet and desktop breakpoints.
- Tokens for colour, type and spacing, matching the code.
- Interaction notes — what animates, how long, what triggers it.
- Permissions — what each role can see and do.
Because Advorize designs and builds, our UI/UX design work is handed to our own engineers — which is why our specs are written to be built, not admired.
Sources
Kiara writes Advorize's guides on design, development and digital systems, turning the team's project work into practical, plain-language answers.