The problem

Three product squads had forked the component library. The Figma file said one thing, production said another, and every new screen took three weeks of back-and-forth before it shipped.

Constraints

No freeze on feature work, a React Native app sharing the same tokens, and a team that had already been burned by one failed rewrite.

Design decisions

I audited every screen and collapsed 400 one-off variants into 140 components. Tokens became the single source of truth: Figma variables first, code second, never the other way round.

What I built

A token pipeline from Figma variables to CSS and TypeScript, Storybook docs for every component, visual regression tests and an accessibility check in CI.

Trade-offs

I shipped the new library alongside the old one instead of replacing it in one go. Slower to finish, but no squad ever had to stop shipping.

The result

Figma-to-production time fell from three weeks to three days. 40 engineers across web and mobile now build on it, and the design team stopped redlining.

What I’d do differently

I’d involve the mobile engineers from week one. Their constraints shaped half the token decisions, and we found that out late.