Architektúra tokenov sémantického dizajnu: globálne, sémantické a komponentné tokeny
Ako štruktúrovať tokeny dizajnu do troch úrovní, podporovať témy a viaceré značky a posielať ich na web, iOS a Android pomocou formátu W3C DTCG.
Core Takeaway
Väčšina vyspelých dizajnových systémov používa tri úrovne tokenov: globálne (nespracované hodnoty, ako je modrá-600), sémantické (účel, ako je farba.akcia.primárne) a komponentné (špecifické použitia, ako tlačidlo.pozadie). Komponenty odkazujú na sémantické tokeny, sémantické tokeny odkazujú na globálne a témy alebo značky si vymieňajú iba sémantickú vrstvu. Uložte ich vo formáte W3C DTCG a vygenerujte kód platformy pomocou nástroja na zostavenie.
Tri úrovne
Material Design popisuje tri triedy tokenov: referenčné, systémové a komponentné. Mnoho tímov ich nazýva globálne, sémantické a komponentné. Názvy sa líšia, ale myšlienka je rovnaká: oddeľte surové hodnoty od rozhodnutí o tom, ako sa používajú.
- Globálne (odkaz): každá nespracovaná hodnota v systéme, ako napríklad modrá-600, medzera-4, veľkosť písma-16, jarná-jemná.
- Sémantický (systém): na čo slúži hodnota, napríklad color.text.primary, color.action.primary, motion.enter.
- Komponent: ako jeden komponent používa systém, ako napríklad button.background alebo dialog.motion.open.
Prečo sú sémantické tokeny dôležité
Ak tlačidlo používa priamo blue-600, každá zmena témy znamená úpravu každého komponentu. Ak používa primárnu farbu.akciu, tmavý režim, vysoký kontrast alebo novú značku, zmeňte iba to, na čo ukazuje. Materiál poznamenáva, že žetóny umožňujú použiť vysoko kontrastnú paletu alebo zmeniť typovú stupnicu v celom systéme presne týmto spôsobom.
Témy a viaceré značky
V prípade produktov viacerých značiek alebo produktov s bielym štítkom si ponechajte jednu sadu sémantických a komponentných tokenov a jednu globálnu paletu na značku. Každá téma je mapovaním od sémantických tokenov ku globálnym hodnotám. Prvá stabilná verzia špecifikácie W3C Design Tokens (2025.10), vydaná v októbri 2025, pridala tematickú podporu a podporu viacerých značiek, moderné farebné priestory ako Display P3 a OKLCH a aliasy a referencie na úrovni komponentov.
Patria sem aj žetóny pohybu
Trvanie, krivky uvoľnenia a pružiny sledujú rovnaké úrovne. Globálny token môže byť vďaka svojej tuhosti a tlmeniu jemný; pohyb sémantického tokenu.enter ukazuje naň; hárok tokenov komponentov.motion.open ukazuje na pohyb.enter. Pridajte tému so zníženým pohybom, ktorá premapuje žetóny pohybu na krátke vyblednutia.
Prepravné žetóny na každú platformu
Uchovávajte tokeny v úložisku ako DTCG JSON, jediný zdroj pravdy. Nástroj na zostavovanie, ako je Style Dictionary, ich transformuje na premenné CSS, Swift, Kotlin, Flutter alebo iné formáty. Návrhárske nástroje, ktoré čítajú rovnaký formát, môžu zostať synchronizované a nástroje na kódovanie AI môžu čítať JSON priamo.
- Zdroj pravdy: DTCG JSON v Git, skontrolovaný ako kód
- Stavať: transformovať na každú platformu pri každej zmene
- Synchronizácia nástroja pre návrh: import alebo doplnok, nikdy sa nekopírujú hodnoty ručne
- Lining: zakážte nespracované hodnoty v komponentoch
Kľúč Principle na zapamätanie
- Tri úrovne: globálne (hodnoty), sémantické (účel), komponentné (použitie)
- Komponenty odkazujú na sémantické tokeny, nikdy nie na nespracované hodnoty
- Témy a značky premapujú sémantickú vrstvu
- Formát W3C DTCG dosiahol svoju prvú stabilnú verziu (2025.10) v októbri 2025
- Zahrňte žetóny pohybu a tému so zníženým pohybom
Často kladené otázky
Zdroje
- 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