Semantische ontwerptokenarchitectuur: globale, semantische en componenttokens
Hoe u ontwerptokens in drie lagen kunt structureren, thema's en meerdere merken kunt ondersteunen en deze naar internet, iOS en Android kunt verzenden met behulp van het W3C DTCG-formaat.
Kern afhaalmaaltijd
De meeste volwassen ontwerpsystemen gebruiken drie niveaus van tokens: globaal (onbewerkte waarden zoals blue-600), semantisch (doel, zoals color.action.primary) en component (specifiek gebruik, zoals button.background). Componenten verwijzen naar semantische tokens, semantische tokens verwijzen naar globale tokens, en thema's of merken wisselen alleen de semantische laag uit. Sla ze op in het W3C DTCG-formaat en genereer platformcode met een buildtool.
De drie lagen
Material Design beschrijft drie klassen tokens: referentie, systeem en component. Veel teams noemen ze globaal, semantisch en componentgericht. De namen verschillen, maar het idee is hetzelfde: scheid de ruwe waarden van de beslissingen over hoe ze worden gebruikt.
- Globaal (referentie): elke ruwe waarde in het systeem, zoals blauw-600, spatie-4, lettergrootte-16, lente-zacht.
- Semantisch (systeem): waar een waarde voor is, zoals color.text.primary, color.action.primary, motion.enter.
- Component: hoe één component het systeem gebruikt, zoals button.background of dialog.motion.open.
Waarom semantische tokens ertoe doen
Als een knop rechtstreeks blue-600 gebruikt, betekent elke themawijziging dat elk onderdeel moet worden bewerkt. Als het color.action.primary, donkere modus, hoog contrast of een nieuw merk gebruikt, verander dan alleen waar color.action.primary naar verwijst. Materiaal merkt op dat tokens het mogelijk maken om op precies deze manier een palet met hoog contrast toe te passen of de typeschaal systeembreed te wijzigen.
Thema's en meerdere merken
Voor producten met meerdere merken of whitelabels dient u één set semantische en componenttokens en één globaal palet per merk te bewaren. Elk thema is een mapping van semantische tokens naar globale waarden. De eerste stabiele versie van de W3C Design Tokens-specificatie (2025.10), uitgebracht in oktober 2025, voegde thema's en ondersteuning voor meerdere merken toe, moderne kleurruimten zoals Display P3 en OKLCH, en aliassen en referenties op componentniveau.
Bewegingstokens horen hier ook thuis
Duur, versoepelingscurven en veren volgen dezelfde niveaus. Een mondiaal teken kan lentezacht zijn door zijn stijfheid en demping; een semantische token-beweging.enter wijst ernaar; een componenttoken sheet.motion.open verwijst naar motion.enter. Voeg een thema met verminderde beweging toe dat bewegingstokens opnieuw toewijst aan korte fades.
Verzendtokens naar elk platform
Bewaar tokens in een repository als DTCG JSON, de enige bron van waarheid. Een buildtool zoals Style Dictionary transformeert ze in CSS-variabelen, Swift, Kotlin, Flutter of andere formaten. Ontwerptools die hetzelfde formaat lezen, kunnen gesynchroniseerd blijven, en AI-coderingstools kunnen de JSON rechtstreeks lezen.
- Bron van waarheid: DTCG JSON in Git, beoordeeld als code
- Bouwen: transformeer bij elke verandering naar elk platform
- Synchronisatie van ontwerptools: import of plug-in, nooit handmatig gekopieerde waarden
- Linting: verbied ruwe waarden in componenten
Toets Principles in om te onthouden
- Drie lagen: globaal (waarden), semantisch (doel), component (gebruik)
- Componenten verwijzen naar semantische tokens, nooit naar ruwe waarden
- Thema's en merken brengen de semantische laag opnieuw in kaart
- Het W3C DTCG-formaat bereikte zijn eerste stabiele versie (2025.10) in oktober 2025
- Voeg bewegingsfiches en een thema met verminderde beweging toe
Veelgestelde vragen
Bronnen
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — W3C Design Tokens Community-groep
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com