DTCG tokens
DTCG is the file format of the W3C Design Tokens Community Group: JSON in which each token has a $value and a $type. Tools that read it can turn one file into code for every platform.
Why it matters
A standard format means the tokens are not locked to one tool: Figma, Style Dictionary and others read the same file.
It is what lets a single source feed SwiftUI, Jetpack Compose, Flutter and CSS.
DTCG tokens on iOS and Android
Also called W3C design tokens format. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | No equivalent | No equivalent; Material Theme Builder exports its own JSON | tokens.json, W3C DTCG |
In practice
A DTCG file nests tokens by path, so brand/base in Figma is brand.base in the file. Extensions carry what the format does not, such as the light and dark values and the code name each platform uses.
Appetite UI publishes the tokens its docs previews draw as DTCG at /tokens.json, keyed by Figma path, with modes and code names in $extensions. The full source, with its SwiftUI, Compose, Flutter and CSS outputs, comes in the file you buy.
Common mistakes
- Treating a Figma export as the source. Keep one source file and generate the rest from it.
- Dropping $type, so every tool has to guess what a value is.
- Hand-editing the generated outputs. The next export overwrites the edit.
Questions
Which tools read DTCG tokens?
Build tools such as Style Dictionary read the format and write platform code from it. Appetite UI’s token package is built that way: one DTCG source becomes SwiftUI, Jetpack Compose, Flutter and CSS.
Where can I see a real DTCG file?
Appetite UI publishes the tokens its docs previews draw at appetiteui.com/tokens.json, nested by Figma path, with the light and dark values and each platform’s code name in $extensions.
Sources
The pages the facts above rest on, each read October 31, 2026.