Architektura tokenů sémantického designu: globální, sémantické a komponentní tokeny
Jak strukturovat tokeny designu do tří vrstev, podporovat témata a různé značky a odesílat je na web, iOS a Android pomocí formátu W3C DTCG.
Core Takeaway
Většina vyspělých návrhových systémů používá tři úrovně tokenů: globální (nezpracované hodnoty, jako je modrá-600), sémantické (účel, jako je color.action.primary) a komponentní (specifická použití, jako je tlačítko.pozadí). Komponenty odkazují na sémantické tokeny, sémantické tokeny odkazují na globální a témata nebo značky si vyměňují pouze sémantickou vrstvu. Uložte je ve formátu W3C DTCG a vygenerujte kód platformy pomocí nástroje pro sestavení.
Tři úrovně
Material Design popisuje tři třídy tokenů: referenční, systémový a komponentní. Mnoho týmů je nazývá globální, sémantické a komponentní. Názvy se liší, ale myšlenka je stejná: oddělit hrubé hodnoty od rozhodnutí o tom, jak budou použity.
- Globální (reference): každá nezpracovaná hodnota v systému, jako je modrá-600, mezera-4, velikost písma-16, jaro-jemná.
- Sémantický (systém): k čemu slouží hodnota, například barva.text.primární, barva.akce.primární, pohyb.vstup.
- Komponenta: jak jedna komponenta používá systém, například button.background nebo dialog.motion.open.
Proč záleží na sémantických tokenech
Pokud tlačítko používá přímo blue-600, každá změna motivu znamená úpravu každé komponenty. Pokud používá color.action.primary, tmavý režim, vysoký kontrast nebo novou značku, změňte pouze to, na co color.action.primary ukazuje. Materiál poznamenává, že žetony umožňují použít vysoce kontrastní paletu nebo změnit typové měřítko v celém systému přesně tímto způsobem.
Témata a více značek
Pro produkty s více značkami nebo produkty s bílou značkou si ponechte jednu sadu sémantických a komponentních tokenů a jednu globální paletu pro každou značku. Každé téma je mapováním od sémantických tokenů ke globálním hodnotám. První stabilní verze specifikace W3C Design Tokens (2025.10), vydaná v říjnu 2025, přidala podporu témat a více značek, moderní barevné prostory, jako je Display P3 a OKLCH, a aliasy a odkazy na úrovni komponent.
Patří sem také pohybové žetony
Trvání, křivky uvolňování a pružiny mají stejné úrovně. Globální token může být díky své tuhosti a tlumení jemný; pohyb sémantického tokenu.enter na něj ukazuje; list tokenu komponenty.motion.open ukazuje na motion.enter. Přidejte motiv se sníženým pohybem, který přemapuje žetony pohybu na krátká prolínání.
Přepravní žetony na každou platformu
Uchovávejte tokeny v úložišti jako DTCG JSON, jediný zdroj pravdy. Nástroj pro sestavení, jako je Style Dictionary, je převede na proměnné CSS, Swift, Kotlin, Flutter nebo jiné formáty. Návrhářské nástroje, které čtou stejný formát, mohou zůstat synchronizované a nástroje pro kódování AI mohou číst JSON přímo.
- Zdroj pravdy: DTCG JSON v Gitu, zkontrolováno jako kód
- Build: Transformujte se na každou platformu při každé změně
- Synchronizace nástroje pro návrh: import nebo plugin, nikdy ručně nekopírované hodnoty
- Lining: zakázat hrubé hodnoty v komponentách
Klíč Principle k zapamatování
- Tři úrovně: globální (hodnoty), sémantické (účel), komponentní (použití)
- Komponenty odkazují na sémantické tokeny, nikdy na nezpracované hodnoty
- Témata a značky přemapují sémantickou vrstvu
- Formát W3C DTCG dosáhl své první stabilní verze (2025.10) v říjnu 2025
- Zahrňte pohybové žetony a motiv s omezeným pohybem
Č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