Czym są tokeny projektowe i dlaczego są ważne

Design tokens to podstawowe decyzje projektowe systemu designu wyrażone jako nazwane, wielokrotnego użytku wartości. Zamiast wpisywać na stałe #3b82f6 w arkuszu stylów, definiuje się color-primary-500: #3b82f6 i wszędzie odwołuje do tej nazwy. Nazwa niesie znaczenie, a wartość można zmienić bez aktualizowania każdego odwołania.

Tokeny obejmują każdą właściwość wizualną: tokeny kolorów (color-primary-500: #3b82f6), tokeny odstępów (spacing-4: 16px), tokeny typografii (font-size-lg: 18px, font-weight-bold: 700), tokeny zaokrągleń obramowania (radius-md: 8px), tokeny cieni oraz tokeny czasu trwania animacji. Razem opisują kompletny język wizualny.

Tokeny tworzą jedno źródło prawdy współdzielone przez projektantów i inżynierów. Projektanci definiują wartości w Figma, a inżynierowie korzystają z nich w kodzie. Gdy zmienia się kolor marki, wystarczy zaktualizować wartość jednego tokenu, a każdy używający go komponent automatycznie odzwierciedli tę zmianę — bez wyszukiwania i zamiany w tysiącach plików.

Bez tokenów wartości kolorów i odstępów są wpisywane na stałe w arkuszach stylów, plikach komponentów i klasach narzędziowych. Niebieski kolor może być zapisany jako #3b82f6, rgb(59, 130, 246) i blue-500 w różnych plikach. Zmiana koloru marki wymaga znalezienia i zastąpienia każdego wystąpienia, co wiąże się z dużym ryzykiem pominięcia któregoś z nich.

Tokeny projektowe są podstawą systemów obsługujących wiele motywów. W trybie ciemnym tokeny semantyczne, takie jak color-background i color-text, wskazują różne wartości prymitywne w zależności od aktywnego motywu. Zmieniasz jedno mapowanie, a nie każdy komponent. Jasny i ciemny motyw korzystają z tego samego kodu komponentów, różnią się tylko wartościami tokenów.

W przypadku platformy SaaS obsługującej wiele marek tokeny umożliwiają dostosowanie marki bez powielania kodu. Marka A używa niebieskiego jako koloru podstawowego, a marka B — zielonego; różnią się tylko mapowaniami tokenów semantycznych. Kod komponentu przycisku jest identyczny — odczytuje color-action-primary, który dla każdej marki wskazuje inny kolor.

Tokeny są uporządkowane według poziomów. Tokeny prymitywne to surowe wartości: color-blue-500: #3b82f6. Tokeny semantyczne wyrażają znaczenie: color-action-primary: {color-blue-500}. Tokeny komponentów są najbardziej szczegółowe: button-primary-background: {color-action-primary}. Ta hierarchia oddziela „co” od „gdzie jest używane”.

Tokeny semantyczne są kluczem do obsługi wielu motywów. W jasnym motywie color-background: {color-white}. W ciemnym motywie color-background: {color-gray-900}. Komponenty odwołują się do color-background, a nie do konkretnego koloru. Zmiana motywu zamienia mapowania tokenów semantycznych — komponenty nie wymagają żadnych zmian.

Figma Variables, wprowadzone w 2023 roku, to tokeny projektowe dostępne w Figma. Projektanci definiują w Figma tę samą hierarchię tokenów, którą programiści wdrażają w kodzie. Narzędzia takie jak Tokens Studio for Figma lub oficjalna wtyczka Figma Tokens eksportują zmienne Figma do formatu JSON, który Style Dictionary kompiluje następnie do zmiennych CSS lub obiektów JS.

W3C Design Tokens Community Group opracowuje standardowy format JSON dla tokenów projektowych. Celem jest interoperacyjność: plik tokenów, który działa z dowolnym narzędziem projektowym (Figma, Sketch) i dowolnym narzędziem do budowania (Style Dictionary, Theo, Panda CSS). Przyjęcie tego formatu specyfikacji zabezpiecza system tokenów przed zmianami w przyszłości.

Tokeny projektowe wymagają ustalenia zasad zarządzania: kto może dodawać nowe tokeny (zespół projektowy, programistyczny czy oba zespoły), jak tokeny są wersjonowane, jak wycofuje się przestarzałe tokeny oraz jak informuje się zespoły korzystające z tokenów o zmianach. Bez takich zasad systemy tokenów zaczynają się rozjeżdżać — obok systemu pojawiają się nowe wartości wpisane na stałe, co niweczy jego cel.

Co reprezentują tokeny semantyczne w hierarchii poziomów tokenów projektowych?

Tokeny projektowe to nazwane, atomowe wartości (kolory, odstępy, typografia), które tworzą słownik systemu projektowego. Zapewniają jedno źródło prawdy wspólne dla projektu i kodu. Trójpoziomowa hierarchia — prymitywne (surowe wartości), semantyczne (znaczenie) i komponentów (konkretne użycie) — umożliwia obsługę wielu motywów i marek. Figma Variables oraz specyfikacja W3C Design Tokens usprawniają synchronizację między projektowaniem a programowaniem. Zarządzanie tokenami zapewnia spójność systemu w czasie.