Design tokens
A design token is a named design decision, such as a color, a spacing step or a radius, stored once and read by design files and code alike. Changing the token changes every place that reads it.
Why it matters
Without tokens a rebrand or a dark mode means finding every hard-coded value. With them it is one edit that every design file and every build reads.
A token also gives designers and developers one name for one decision, so a handoff stops being a translation.
Design tokens on iOS and Android
The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | No token system in the HIG; colors and metrics are named system values | Design tokens, such as md.sys.color.primary | Figma variables in six collections, exported as DTCG |
In Appetite UI
Where it appears in Appetite UI: Finance app, Dashboard. The theme switch beside the title shows the dark frame.
In practice
In Figma a token is a variable; in code it is a constant or a CSS custom property with the same name. The name carries the meaning, brand/base or dimensions/spacing/4, so a designer and a developer talk about the same thing.
Appetite UI keeps its tokens in one W3C DTCG source that exports to SwiftUI, Jetpack Compose, Flutter and CSS. The public /tokens.json holds the tokens the docs previews draw, with light and dark values and the code name on each platform.
Common mistakes
- Naming a token after its value, such as blue-500 for a button, instead of after its job.
- Keeping Figma names and code names apart, so each side needs a mapping table. Generate both from one source.
- Adding a token for a one-off value. A value used once is not a decision yet.
Questions
What is the difference between design tokens and Figma variables?
A Figma variable is how a design token is stored in Figma: a named value with one value per mode, such as Light and Dark. The token is the decision itself, and it also lives in code under the same name. Appetite UI exports its variables as DTCG tokens that become SwiftUI, Jetpack Compose, Flutter and CSS.
Should I use Figma variables or styles?
Use a variable for one value that changes by mode, such as a color in light and dark or a spacing step. A style bundles several values, such as a text style. In Appetite UI every text style reads its size, line height, weight and tracking from Typography variables, so the two move together.
Sources
The pages the facts above rest on, each read October 31, 2026.