Semantic Design Token Architecture: Global, Semantic och Component Tokens
Hur man strukturerar designtokens i tre nivåer, stödjer teman och flera varumärken och skickar dem till webben, iOS och Android med W3C DTCG-formatet.
Core Takeaway
De flesta mogna designsystem använder tre nivåer av tokens: globala (råvärden som blue-600), semantiska (syfte, såsom color.action.primary) och komponent (specifik användning, såsom button.background). Komponenter refererar till semantiska tokens, semantiska tokens refererar till globala och teman eller varumärken byter endast det semantiska lagret. Lagra dem i W3C DTCG-formatet och generera plattformskod med ett byggverktyg.
De tre nivåerna
Material Design beskriver tre klasser av tokens: referens, system och komponent. Många team kallar dem globala, semantiska och komponent. Namnen skiljer sig åt, men tanken är densamma: separera råvärdena från besluten om hur de används.
- Globalt (referens): varje råvärde i systemet, som blå-600, mellanslag-4, teckenstorlek-16, fjäder-svag.
- Semantisk (system): vad är ett värde för, till exempel color.text.primary, color.action.primary, motion.enter.
- Komponent: hur en komponent använder systemet, till exempel button.background eller dialog.motion.open.
Varför semantiska tokens spelar roll
Om en knapp använder blue-600 direkt, innebär varje temaändring att redigera varje komponent. Om den använder color.action.primary, mörkt läge, hög kontrast eller ett nytt märke ändra bara vad color.action.primary pekar på. Materialet noterar att tokens gör det möjligt att applicera en palett med hög kontrast eller ändra typskalan i hela systemet på exakt detta sätt.
Teman och flera varumärken
För produkter med flera varumärken eller white-label, behåll en uppsättning semantiska och komponentsymboler och en global palett per varumärke. Varje tema är en kartläggning från semantiska tokens till globala värden. Den första stabila versionen av W3C Design Tokens-specifikationen (2025.10), som släpptes i oktober 2025, lade till teman och stöd för flera varumärken, moderna färgrymder som Display P3 och OKLCH, och alias och referenser på komponentnivå.
Motion tokens hör också hit
Durationer, lättnadskurvor och fjädrar följer samma nivåer. En global token kan vara fjädervänlig med sin styvhet och dämpning; en semantisk tokenrörelse.enter pekar på den; ett komponenttoken sheet.motion.open pekar på motion.enter. Lägg till ett reducerat rörelsetema som mappar om rörelsetokens till korta toningar.
Skicka tokens till varje plattform
Förvara tokens i ett arkiv som DTCG JSON, den enda källan till sanning. Ett byggverktyg som Style Dictionary omvandlar dem till CSS-variabler, Swift, Kotlin, Flutter eller andra format. Designverktyg som läser samma format kan vara synkroniserade, och AI-kodningsverktyg kan läsa JSON direkt.
- Sanningens källa: DTCG JSON i Git, granskad som kod
- Bygg: förvandla till varje plattform vid varje förändring
- Synkronisering av designverktyg: import eller plugin, aldrig handkopierade värden
- Linting: förbjud råvärden i komponenter
Nyckel Principles att komma ihåg
- Tre nivåer: global (värden), semantisk (syfte), komponent (användning)
- Komponenter refererar till semantiska tokens, aldrig råvärden
- Teman och varumärken mappar om det semantiska lagret
- W3C DTCG-formatet nådde sin första stabila version (2025.10) i oktober 2025
- Inkludera rörelsetokens och ett tema med reducerad rörelse
Vanliga frågor
Källor
- 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