Figma to Component Handoff That Devs Actually Use

Tokens, spacing, and naming.

The Problem

Designs looked polished in Figma but diverged in code — spacing drift, one-off colors, and components that didn’t match the file developers were referencing.

What Worked

• Single source for spacing — 4/8/12/16/24 scale documented once, used in Figma and CSS variables.
• Component names match code — Button / Primary in Figma → Button variant in the repo, not Rectangle 47.
• States in the file — hover, focus, disabled, error — so engineers don’t invent them at implementation time.
• One annotated frame per screen — redlines for responsive breakpoints instead of scattered comments.

Checklist Before Handoff

• All colors map to tokens (no orphan hex values)
• Typography styles named and exported
• Interactive states shown for form controls
• Empty / loading / error states included where relevant

Takeaway

Good handoff is a contract, not a PNG export. The goal is fewer “how should this behave?” Slack threads.