Szemantikus tervezési token architektúra: globális, szemantikai és komponens tokenek
Hogyan lehet a tervezési tokeneket három szinten strukturálni, támogatni a témákat és több márkát, és elküldeni őket a webre, a iOS és Android webhelyekre a W3C DTCG formátum használatával.
Core Takeaway
A legtöbb kiforrott tervezési rendszer három tokenszintet használ: globális (nyers értékek, például blue-600), szemantikai (cél, például color.action.primary) és komponens (specifikus felhasználások, például button.background). Az összetevők szemantikai tokenekre, a szemantikai tokenek globálisakra hivatkoznak, a témák vagy márkák pedig csak a szemantikai réteget cserélik fel. Tárolja őket W3C DTCG formátumban, és generáljon platformkódot egy build eszközzel.
A három szint
A Material Design a tokenek három osztályát írja le: referencia, rendszer és összetevő. Sok csapat globálisnak, szemantikusnak és komponensnek nevezi őket. A nevek különböznek, de az ötlet ugyanaz: különítse el a nyers értékeket a használatukra vonatkozó döntésektől.
- Globális (referencia): minden nyers érték a rendszerben, például blue-600, space-4, font-size-16, spring-gentle.
- Szemantikai (rendszer): mire való egy érték, például color.text.primary, color.action.primary, motion.enter.
- Összetevő: hogyan használja az egyik összetevő a rendszert, például a button.background vagy a dialog.motion.open.
Miért számítanak a szemantikai tokenek?
Ha egy gomb közvetlenül a blue-600-at használja, minden témaváltás minden összetevő szerkesztését jelenti. Ha color.action.primary, sötét módot, nagy kontrasztot vagy új márkát használ, akkor csak azt változtassa meg, hogy a color.action.primary mit mutat. Anyagi megjegyzések, hogy a tokenek pontosan ilyen módon teszik lehetővé a nagy kontrasztú paletta alkalmazását vagy a típusskála rendszerszintű megváltoztatását.
Témák és több márka
Több márkát tartalmazó vagy fehér címkével ellátott termékek esetén tartson meg egy szemantikai és komponens-token-készletet, valamint márkánként egy globális palettát. Mindegyik téma egy leképezés a szemantikai tokenektől a globális értékekig. A W3C Design Tokens specifikáció első stabil verziója (2025.10), amelyet 2025 októberében adtak ki, téma- és többmárka-támogatással, modern színterekkel, például Display P3-val és OKLCH-val, valamint álnevekkel és komponensszintű hivatkozásokkal egészült ki.
Ide tartoznak a mozgásjelzők is
Az időtartamok, az enyhülési görbék és a rugók ugyanazokat a szinteket követik. Egy globális token lehet rugókímélő merevségével és csillapításával; egy szemantikai token mozgás.enter mutat rá; egy komponens token lap.motion.open mutat mozgásra.belépés. Adjon hozzá egy csökkentett mozgású témát, amely átképezi a mozgásjelzőket rövid elhalványításokra.
Tokenek szállítása minden platformra
Tartsa a tokeneket DTCG JSON néven, az igazság egyetlen forrásaként. Egy olyan építőeszköz, mint a Style Dictionary, átalakítja őket CSS változókká, Swift, Kotlin, Flutter vagy más formátumokká. Az azonos formátumot olvasó tervezőeszközök szinkronban maradhatnak, az AI kódoló eszközök pedig közvetlenül a JSON-et.
- Az igazság forrása: DTCG JSON a Gitben, áttekintve, mint a kód
- Build: minden változtatáskor minden platformra átalakul
- Tervezőeszköz szinkronizálása: importálás vagy beépülő modul, soha nem kézzel másolt értékek
- Szöszmélés: tiltsa a nyers értékeket az alkatrészekben
Kulcs Principle, amit meg kell jegyezni
- Három szint: globális (értékek), szemantikai (cél), összetevő (használat)
- Az összetevők szemantikai tokenekre hivatkoznak, soha nem nyers értékekre
- A témák és a márkák újratervezik a szemantikai réteget
- A W3C DTCG formátum 2025 októberében érte el első stabil verzióját (2025.10).
- Tartalmazzon mozgásjelzőket és csökkentett mozgású témát
Gyakran Ismételt Kérdések
Források
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — W3C Design Tokens közösségi csoport
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com