Architektura tokenów projektu semantycznego: tokeny globalne, semantyczne i komponentowe
Jak podzielić tokeny projektowe na trzy poziomy, wspierać motywy i wiele marek oraz wysyłać je do Internetu, iOS i Android przy użyciu formatu W3C DTCG.
Rdzeń na wynos
Większość dojrzałych systemów projektowych wykorzystuje trzy poziomy tokenów: globalne (surowe wartości, takie jak blue-600), semantyczne (cel, takie jak kolor.akcja.podstawowy) i komponentowe (określone zastosowania, takie jak przycisk.tło). Komponenty odwołują się do tokenów semantycznych, tokeny semantyczne odwołują się do tokenów globalnych, a motywy lub marki zamieniają tylko warstwę semantyczną. Przechowuj je w formacie W3C DTCG i wygeneruj kod platformy za pomocą narzędzia do kompilacji.
Trzy poziomy
Material Design opisuje trzy klasy tokenów: referencyjny, systemowy i komponentowy. Wiele zespołów nazywa je globalnymi, semantycznymi i komponentowymi. Nazwy są różne, ale idea jest ta sama: oddziel surowe wartości od decyzji o tym, jak je wykorzystać.
- Globalny (odniesienie): każda surowa wartość w systemie, taka jak niebieski-600, spacja-4, rozmiar czcionki-16, delikatny dla wiosny.
- Semantyczny (system): do czego służy wartość, np. kolor.tekst.podstawowy, kolor.akcja.podstawowy, ruch.enter.
- Komponent: sposób, w jaki jeden komponent korzysta z systemu, np. przycisk.tło lub okno.motion.open.
Dlaczego tokeny semantyczne mają znaczenie
Jeśli przycisk używa bezpośrednio blue-600, każda zmiana motywu oznacza edycję każdego komponentu. Jeśli używa color.action.primary, trybu ciemnego, wysokiego kontrastu lub nowej marki, zmień tylko to, na co wskazuje color.action.primary. Materiał zauważa, że żetony umożliwiają zastosowanie palety o wysokim kontraście lub zmianę skali typu w całym systemie właśnie w ten sposób.
Motywy i wiele marek
W przypadku produktów wielomarkowych lub produktów z białą etykietą zachowaj jeden zestaw tokenów semantycznych i składowych oraz jedną paletę globalną na każdą markę. Każdy motyw jest odwzorowaniem tokenów semantycznych na wartości globalne. Pierwsza stabilna wersja specyfikacji W3C Design Tokens (2025.10), wydana w październiku 2025 r., dodała motywy i obsługę wielu marek, nowoczesne przestrzenie kolorów, takie jak Display P3 i OKLCH, a także aliasy i odniesienia na poziomie komponentów.
Żetony ruchu również tu należą
Czasy trwania, łagodne krzywe i sprężyny mają te same poziomy. Globalny token może być delikatny dla sprężyn dzięki swojej sztywności i tłumieniu; wskazuje na to znacznik semantyczny motion.enter; token komponentu sheet.motion.open wskazuje na motion.enter. Dodaj motyw o ograniczonym ruchu, który przypisuje żetony ruchu do krótkich zaników.
Wysyłka tokenów na każdą platformę
Przechowuj tokeny w repozytorium jako DTCG JSON, jedyne źródło prawdy. Narzędzie do kompilacji, takie jak Style Dictionary, przekształca je w zmienne CSS, Swift, Kotlin, Flutter lub inne formaty. Narzędzia projektowe odczytujące ten sam format mogą pozostawać zsynchronizowane, a narzędzia do kodowania AI mogą bezpośrednio odczytywać JSON.
- Źródło prawdy: DTCG JSON w Git, sprawdzone jak kod
- Kompilacja: przekształć się w każdą platformę przy każdej zmianie
- Synchronizacja narzędzia projektowego: import lub wtyczka, nigdy ręcznie kopiowane wartości
- Linting: zabrania surowych wartości w komponentach
Klucz Principles do zapamiętania
- Trzy poziomy: globalny (wartości), semantyczny (cel), komponent (wykorzystanie)
- Komponenty odwołują się do tokenów semantycznych, nigdy do surowych wartości
- Motywy i marki zmieniają warstwę semantyczną
- Format W3C DTCG osiągnął swoją pierwszą stabilną wersję (2025.10) w październiku 2025 r.
- Dołącz żetony ruchu i motyw o ograniczonym ruchu
Często zadawane pytania
Źródła
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — Grupa społecznościowa dotycząca tokenów projektowych W3C
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com