Narzędzia do tokenów: Style Dictionary
Przekształcaj i dystrybuuj tokeny projektowe na różnych platformach za pomocą narzędzia Style Dictionary.
Narzędzia do tokenów: Style Dictionary to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest Style Dictionary?
Style Dictionary to narzędzie open source firmy Amazon, które przekształca źródłowy plik JSON z tokenami w dane wyjściowe dla różnych platform: niestandardowe właściwości CSS, zmienne SCSS, stałe Swift dla systemu iOS, XML dla systemu Android oraz moduły JavaScript/TypeScript — wszystko na podstawie jednego źródła prawdy.
Struktura projektu
Organizuj tokeny w katalogu tokens/ jako pliki JSON lub JSON5. Style Dictionary automatycznie scala wszystkie pliki. Rozdziel pliki według kategorii: tokens/color.json, tokens/spacing.json, tokens/typography.json.
Format JSON tokenów
Każdy token jest zagnieżdżonym obiektem z kluczem value oraz opcjonalnymi polami type, description i comment. Style Dictionary spłaszcza zagnieżdżenia do nazw w notacji kropkowej na potrzeby danych wyjściowych.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Plik konfiguracyjny
Plik config.json określa źródła (pliki tokenów), platformy (web, ios, android) oraz transformacje i formaty dla poszczególnych platform. Każda platforma może stosować inne transformacje i generować pliki w innych formatach.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>Transformacje
Transformacje modyfikują wartości tokenów podczas budowania: color/css formatuje kolory jako wartości szesnastkowe, size/rem konwertuje px na rem, a name/cti/kebab generuje nazwy w formacie kebab-case na podstawie zagnieżdżonej struktury kategorii-typu-elementu.
Formaty
Formaty określają zawartość plików wyjściowych. Wbudowane formaty to: css/variables, który generuje blok CSS :root, scss/variables, który generuje zmienne SASS, oraz javascript/module, który eksportuje obiekt JS. Własne formaty umożliwiają uzyskanie dowolnej wymaganej struktury danych wyjściowych.
Odwołania między tokenami
Odwołuj się do innych tokenów za pomocą składni nawiasów klamrowych: {"value": "{color.brand.primary}"}. Style Dictionary rozwiązuje odwołania podczas budowania, zapisując konkretne wartości w danych wyjściowych. Odwołania tworzą mapowanie aliasów na tokeny globalne.
Własne transformacje
Zarejestruj własne transformacje do obsługi potrzeb specyficznych dla projektu: usuwania kanału alfa z kolorów, konwertowania wartości krycia z narzędzi projektowych czy dodawania prefiksów dostawców. Własne transformacje można włączać do potoku budowania tak samo jak transformacje wbudowane.
Uruchamianie procesu budowania
Uruchom npx style-dictionary build albo dodaj tę komendę do skryptu budowania npm. Pliki wyjściowe trafiają do skonfigurowanych katalogów buildPath. Wygenerowane pliki można zatwierdzać w repozytorium albo generować podczas budowania w CI — oba podejścia są powszechne.
Integracja z Figmą
Tokens Studio for Figma synchronizuje tokeny w formacie JSON z repozytorium GitHub. Style Dictionary uruchamia się w CI po zmianie pliku JSON i automatycznie generuje zaktualizowane pliki CSS oraz pliki dla poszczególnych platform. Zmiany w projekcie trafiają do kodu bez ręcznego kopiowania i wklejania.
Wersjonowanie tokenów
Wersjonuj pakiet tokenów w npm. Odbiorcy przypinają go do konkretnej wersji i świadomie wykonują aktualizację. Dzienniki zmian opisują dodane, przestarzałe i usunięte tokeny. Wersjonowanie semantyczne komunikuje zmiany niezgodne wstecznie oraz bezpieczne aktualizacje.
Sprawdzenie wiedzy
Jaka jest rola transformacji w Style Dictionary?
Podsumowanie
Style Dictionary przekształca jedno źródło tokenów w formacie JSON w dane wyjściowe specyficzne dla platformy za pomocą konfigurowalnych transformacji i formatów. Umożliwia synchronizację tokenów z Figmy do kodu, spójność między platformami oraz wersjonowane pakiety tokenów, które zespoły mogą świadomie wykorzystywać i aktualizować.
Często zadawane pytania
Czy lekcja „Narzędzia do tokenów: Style Dictionary” jest bezpłatna?
Tak — pełny tekst „Narzędzia do tokenów: Style Dictionary” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Narzędzia do tokenów: Style Dictionary”?
Przekształcaj i dystrybuuj tokeny projektowe na różnych platformach za pomocą narzędzia Style Dictionary. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Narzędzia do tokenów: Style Dictionary”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym są tokeny projektowe
- Konwencje nazewnictwa tokenów
- Implementowanie obsługi wielu marek za pomocą zmiennych CSS
- Narzędzia do tokenów: Style Dictionary