Design tokens from Figma to code
A token pipeline that keeps colour, type and spacing identical in design files and in production code.
-
A closer look at the work
The problem
Designers updated colours in Figma and developers copied values by hand into code. Brand updates took weeks and often missed a product.
What needed to be done
Create one source of truth for visual decisions that flows into every product automatically.
How the right problem was found
Working with two front-end engineers, I defined a three-tier token structure (raw values, meaning, component) and automated the export from Figma into code. We ran the new pipeline in parallel with the old process on one product for two sprints to catch mismatches before rolling it out.
The outcome, measured
A brand colour change that once took three weeks now reaches every product in a single release.
- 3 weeks → 1 release
- Brand update rollout
- 420
- Tokens in the system
- 7 of 9
- Products on the pipeline
Skills and tools
Tools
FigmaStorybookHTML and CSS