Semantisk designtokenarkitektur: Globale, semantiske og komponenttokens
Sådan struktureres designtokens i tre niveauer, understøtter temaer og flere mærker og sender dem til web, iOS og Android ved hjælp af W3C DTCG-formatet.
Core Takeaway
De fleste modne designsystemer bruger tre niveauer af tokens: globale (råværdier såsom blue-600), semantiske (formål, såsom color.action.primary) og komponent (specifik brug, såsom button.background). Komponenter refererer til semantiske tokens, semantiske tokens refererer til globale, og temaer eller mærker bytter kun det semantiske lag. Gem dem i W3C DTCG-formatet og generer platformskode med et byggeværktøj.
De tre etager
Material Design beskriver tre klasser af tokens: reference, system og komponent. Mange teams kalder dem globale, semantiske og komponent. Navnene er forskellige, men ideen er den samme: adskil de rå værdier fra beslutningerne om, hvordan de bruges.
- Global (reference): hver rå værdi i systemet, såsom blue-600, space-4, font-size-16, spring-gentle.
- Semantisk (system): hvad er en værdi for, såsom color.text.primary, color.action.primary, motion.enter.
- Komponent: hvordan en komponent bruger systemet, såsom button.background eller dialog.motion.open.
Hvorfor semantiske tokens betyder noget
Hvis en knap bruger blue-600 direkte, betyder hver temaændring, at hver komponent redigeres. Hvis den bruger color.action.primary, mørk tilstand, høj kontrast eller et nyt mærke, skal du kun ændre, hvad color.action.primary peger på. Materialet bemærker, at tokens gør det muligt at anvende en højkontrastpalet eller ændre typeskalaen i hele systemet på præcis denne måde.
Temaer og flere mærker
For multibrand- eller white-label-produkter skal du beholde ét sæt semantiske og komponent-tokens og én global palette pr. brand. Hvert tema er en kortlægning fra semantiske tokens til globale værdier. Den første stabile version af W3C Design Tokens-specifikationen (2025.10), udgivet i oktober 2025, tilføjede temaer og multi-brand support, moderne farverum såsom Display P3 og OKLCH og aliaser og referencer på komponentniveau.
Motion tokens hører også til her
Varigheder, lempende kurver og fjedre følger de samme niveauer. En global token kan være fjederskånsom med sin stivhed og dæmpning; en semantisk token-bevægelse.enter peger på den; et komponenttoken-ark.motion.open peger på motion.enter. Tilføj et tema med reduceret bevægelse, der omformer bevægelsestokens til korte fades.
Send tokens til hver platform
Opbevar tokens i et lager som DTCG JSON, den eneste kilde til sandhed. Et byggeværktøj som Style Dictionary transformerer dem til CSS-variabler, Swift, Kotlin, Flutter eller andre formater. Designværktøjer, der læser det samme format, kan forblive synkroniserede, og AI-kodningsværktøjer kan læse JSON direkte.
- Sandhedens kilde: DTCG JSON i Git, gennemgået som kode
- Byg: transformer til hver platform ved hver ændring
- Synkronisering af designværktøj: import eller plugin, aldrig håndkopierede værdier
- Linting: forbyd råværdier i komponenter
Tast Principles for at huske
- Tre niveauer: global (værdier), semantisk (formål), komponent (brug)
- Komponenter refererer til semantiske tokens, aldrig råværdier
- Temaer og brands omformer det semantiske lag
- W3C DTCG-formatet nåede sin første stabile version (2025.10) i oktober 2025
- Inkluder bevægelsestokens og et tema med reduceret bevægelse
Ofte stillede spørgsmå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