Design tokens w design systemie
Tokeny to nie tylko kolory w zmiennych. To warstwa, która łączy decyzje projektowe z kodem na wszystkich platformach. Dobrze ułożone, są fundamentem. Źle, są kolejnym źródłem chaosu.
Architekturę tokenów układałem dla web, iOS i Androida naraz w dużej instytucji finansowej – z jednym źródłem prawdy dla wszystkich trzech.
Tokeny to fundament, nie ozdoba
Najczęstszy problem nie polega na braku tokenów, tylko na ich architekturze. Wartości żyją w kilku miejscach naraz i rozjeżdżają się między Figmą a kodem.
- Kolory i odstępy są wpisane na sztywno w kodzie zamiast brać z tokenów.
- Figma i kod mają różne wartości tych samych tokenów.
- Brak warstwy semantycznej, więc zmiana motywu to ręczna robota.
Architektura, która się skaluje
- Warstwy: prymitywy → tokeny semantyczne → komponentowe.
- Naming spójny i czytelny zarówno dla designu, jak i kodu.
- Jedno źródło prawdy dla web, iOS i Androida.
- Skala kolorów z zachowaniem kontrastu (WCAG).
- Handoff: jak tokeny trafiają z Figmy do kodu.
Dobrze ułożone tokeny sprawiają, że zmiana w jednym miejscu schodzi spójnie na trzy platformy.
Mniej kosztu zmiany, szybszy rebranding
- Nowy motyw albo rebranding to dni, nie tygodnie przepisywania.
- Mniej błędów i poprawek z rozjazdu Figma–kod.
- Nowy produkt startuje na gotowych wartościach, nie od zera.
Powiązane: audyt design systemu · governance · case study
Design tokens – FAQ
Czym są design tokens?
To nazwane wartości decyzji projektowych – kolory, odstępy, typografia, promienie – które łączą design z kodem. Zamiast wpisywać wartość na sztywno, zespoły odwołują się do tokena.
Czym różnią się tokeny prymitywne od semantycznych?
Prymitywne to surowe wartości, np. konkretny odcień niebieskiego. Semantyczne nadają im znaczenie, np. kolor akcji albo tła. Ta warstwa sprawia, że zmiana motywu nie wymaga ręcznej pracy w całym systemie.
Czy potrzebuję Tokens Studio albo Style Dictionary?
Niekoniecznie od razu. Najpierw liczy się architektura i naming. Narzędzia dobiera się do skali zespołu i tego, jak tokeny mają trafiać do kodu.
Chcesz ułożyć tokeny tak, żeby przestały się rozjeżdżać? Napisz dwa zdania: jak dziś wyglądają Twoje tokeny i gdzie zaczyna się rozjazd. To wystarczy na start – odpowiadam w 1–2 dni robocze.
radoslaw.latarski@gmail.com · LinkedIn · Zarezerwuj rozmowę →
Rozmowa bez zobowiązań i bez prezentacji handlowej. Czasem wystarczy jedna rozmowa, żeby zobaczyć problem inaczej.