The gap between a design file and a codebase is measured in hex values that got changed by hand, spacing that was eyeballed, and type scales that were approximate. Tokens close that gap — but only when the token file is treated as the source of truth, not as documentation generated after the fact from whatever the code already does.
What tokens actually solve
Tokens are not a naming exercise. They are a contract: one value, defined once, referenced everywhere. When a brand colour changes, the edit happens in one place and the product updates across every screen.
- Colour tokens replace hard-coded hex values.
- Spacing tokens replace magic numbers in layout.
- Type tokens replace font-size arrays scattered across components.
- Motion tokens replace ad-hoc duration and easing strings.
The implementation pattern
Audit existing values
Extract every unique colour, spacing, and type value from the codebase. Group by purpose, not by similarity.
Name by intent, not by appearance
Use names like `color-accent-primary` instead of `blue-500`. Intent survives design changes; appearance does not.
Generate platform outputs
A single JSON token file can produce CSS custom properties, Swift constants, and Kotlin values automatically.
Keeping Figma and the codebase from drifting apart again
Shipping a token system once is the easy part. The failure mode that shows up six months later is quieter: a designer adds a one-off colour variable in Figma for a single screen, an engineer matches it by eye in code rather than requesting a token, and the drift starts again from zero — just with a token-shaped disguise this time.
- Treat a new token the same as a new API endpoint — it needs a named owner and a reason it can't be expressed with an existing value.
- Run an automated diff between the published Figma variables and the generated code output on every design handoff, not just at launch.
- Deprecate unused tokens on a schedule — a token file that only ever grows is as much a signal of drift as one that was never adopted.
In closing
Tokens are infrastructure. The teams that treat them as a living system — versioned, reviewed, and enforced on both sides of the design-to-code handoff — are the ones that stop arguing about hex values in pull requests.
