Semantisk designtokenarkitektur: Globale, semantiske og komponenttokens
Hvordan strukturere designtokens i tre nivåer, støtte temaer og flere merker, og sende dem til web, iOS og Android ved å bruke W3C DTCG-formatet.
Kjerne takeaway
De fleste modne designsystemer bruker tre nivåer med tokens: global (råverdier som blue-600), semantisk (formål, for eksempel color.action.primary) og komponent (spesifikk bruk, for eksempel button.background). Komponenter refererer til semantiske tokens, semantiske tokens refererer til globale, og temaer eller merker bytter bare det semantiske laget. Lagre dem i W3C DTCG-formatet og generer plattformkode med et byggeverktøy.
De tre nivåene
Material Design beskriver tre klasser av tokens: referanse, system og komponent. Mange team kaller dem globale, semantiske og komponent. Navnene er forskjellige, men ideen er den samme: skille råverdiene fra beslutningene om hvordan de brukes.
- Global (referanse): hver råverdi i systemet, for eksempel blue-600, space-4, font-size-16, spring-mild.
- Semantisk (system): hva er en verdi for, for eksempel color.text.primary, color.action.primary, motion.enter.
- Komponent: hvordan en komponent bruker systemet, for eksempel button.background eller dialog.motion.open.
Hvorfor semantiske tokens betyr noe
Hvis en knapp bruker blue-600 direkte, betyr hver temaendring å redigere hver komponent. Hvis den bruker color.action.primary, mørk modus, høy kontrast eller et nytt merke, endre bare hva color.action.primary peker på. Materialet bemerker at tokens gjør det mulig å bruke en høykontrastpalett eller endre typeskalaen i hele systemet på akkurat denne måten.
Temaer og flere merker
For produkter med flere merker eller hvite etiketter, behold ett sett med semantiske og komponenttokens og en global palett per merke. Hvert tema er en kartlegging fra semantiske tokens til globale verdier. Den første stabile versjonen av W3C Design Tokens-spesifikasjonen (2025.10), utgitt i oktober 2025, la til temaer og støtte for flere merker, moderne fargerom som Display P3 og OKLCH, og aliaser og referanser på komponentnivå.
Motion tokens hører også til her
Varigheter, avlastningskurver og fjærer følger de samme nivåene. En global token kan være fjærskånsom med sin stivhet og demping; en semantisk token-bevegelse.enter peker på den; en komponent token sheet.motion.open peker på motion.enter. Legg til et redusert bevegelsestema som omformer bevegelsestokener til korte fades.
Send tokens til hver plattform
Oppbevar tokens i et depot som DTCG JSON, den eneste kilden til sannhet. Et byggeverktøy som Style Dictionary transformerer dem til CSS-variabler, Swift, Kotlin, Flutter eller andre formater. Designverktøy som leser det samme formatet kan forbli synkronisert, og AI-kodingsverktøy kan lese JSON direkte.
- Sannhetens kilde: DTCG JSON i Git, anmeldt som kode
- Bygg: transformer til hver plattform ved hver endring
- Synkronisering av designverktøy: import eller plugin, aldri håndkopierte verdier
- Linting: forby råverdier i komponenter
Tast Principles å huske
- Tre nivåer: globalt (verdier), semantisk (formål), komponent (bruk)
- Komponenter refererer til semantiske tokens, aldri råverdier
- Temaer og merker omformer det semantiske laget
- W3C DTCG-formatet nådde sin første stabile versjon (2025.10) i oktober 2025
- Inkluder bevegelsessymboler og et tema med redusert bevegelse
Ofte stilte spørsmål
Kilder
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — W3C Design Tokens Community Group
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com