Design Tokens — kompletny przewodnik
Design Tokens to najmniejsze jednostki stylu w Design Systemie. Przechowują wartości takie jak kolory, odstępy, typografia czy cienie w formacie, który można współdzielić między designem a kodem.
Co to jest?
Design Tokens to zmienne przechowujące wartości stylu — kolory, fonty, odstępy, cienie, border-radius i inne właściwości wizualne. Zamiast wpisywać kolor #3B82F6 w 200 miejscach, definiujesz token color-primary z tą wartością. Tokeny dzielą się na trzy warstwy: global tokens (surowe wartości), alias tokens (semantyczne nazwy) i component tokens (specyficzne dla komponentów).
Jak to działa?
System tokenów działa na zasadzie abstrakcji. Na najniższym poziomie masz surowe wartości (np. blue-500: #3B82F6). Następnie tworzysz aliasy semantyczne (np. color-primary: blue-500). Na końcu komponenty referencują aliasy (np. button-bg: color-primary). Kiedy chcesz zmienić kolor marki z niebieskiego na fioletowy, zmieniasz jedną wartość w alias token i cały produkt się aktualizuje.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Material Design 3 używa tokenów na trzech poziomach: reference tokens (md.ref.palette.primary40), system tokens (md.sys.color.primary) i component tokens (md.comp.button.container.color). Carbon IBM definiuje tokeny w formacie SCSS i eksportuje je do CSS Custom Properties. Atlassian stosuje trzywarstwową architekturę z global, alias i component tokens w paczce @atlaskit/tokens.