# 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.

Page: https://www.appetiteui.com/academy/glossary/design-tokens. What are design tokens? iOS, Android and Figma.

## At a glance

|  | iOS | Android (Material 3) | 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 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.

## 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

1. [Design Tokens Community Group: Format](https://tr.designtokens.org/format/)
2. [Figma Help: Overview of variables, collections and modes](https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes)
3. [Material Design 3: Design tokens](https://m3.material.io/foundations/design-tokens/overview)

## Related

- Docs: [Colors](https://www.appetiteui.com/docs/colors)
- Docs: [Code output](https://www.appetiteui.com/docs/code-output)
- Docs: [Tokens](https://www.appetiteui.com/tokens)
- Article: [How one Figma token becomes SwiftUI, Compose, Flutter and CSS](https://www.appetiteui.com/blog/figma-token-to-swiftui-compose-flutter-css)
- Article: [How to rebrand a mobile app in Figma with variables](https://www.appetiteui.com/blog/rebrand-mobile-app-figma-variables)
- Glossary: [Semantic tokens](https://www.appetiteui.com/academy/glossary/semantic-tokens)
- Glossary: [Variable modes](https://www.appetiteui.com/academy/glossary/variable-modes)
- Glossary: [DTCG tokens](https://www.appetiteui.com/academy/glossary/dtcg)