Why handoff was slow
Every new feature used to start with a round of "does this spacing match Figma?" back-and-forth between design and engineering — colors, spacing, and type scale lived in the Figma file as visual facts, not as anything a component could import.
Building a shared token library
We moved color, spacing, radius, and type-scale values into a single design-token source, published to Figma as styles and to the codebase as the exact same constants — the same "define once, reference everywhere" principle this project's own `design-system` folder already follows internally.
Automating the diff
- A CI check that flags any new component using a raw hex/px value instead of a token
- A visual-diff bot that comments on a pull request when a rendered component drifts from its Figma frame
- A shared component-naming convention so a Figma component and its coded counterpart are always one search away from each other
The results
Design-to-code handoff time for a typical feature dropped from roughly four days of back-and-forth to under two, and the "does this match Figma?" review comment has all but disappeared from pull requests — the CI check now catches what a human reviewer used to have to eyeball.