Czym są tokeny projektowe

Tokeny projektowe to nazwane zmienne przechowujące decyzje projektowe — kolory, odstępy, typografię i cienie — w formacie niezależnym od technologii. Łączą narzędzia projektowe z kodem i zapewniają spójność na różnych platformach.

Bez tokenów wartości są powielane w bazach kodu CSS, iOS i Androida. Jedno źródło prawdy dla tokenów oznacza, że zmiana koloru marki aktualizuje go jednocześnie na każdej platformie.

Typowe kategorie to: kolor (marki, semantyczny, neutralny), typografia (font-family, rozmiar, grubość, line-height), odstępy (siatka 4px), promień zaokrąglenia, cień oraz animacja (czas trwania, easing).

Tokeny są przechowywane w formatach JSON, YAML lub W3C Design Token Format. Każdy token ma nazwę, wartość, typ i opcjonalny opis. Transformacje konwertują je na dane wyjściowe specyficzne dla danej platformy.

Tokeny globalne to surowe wartości: color-blue-500: #3b82f6. Tokeny aliasów odwołują się do tokenów globalnych w sposób semantyczny: color-action-primary: {color-blue-500}. Komponenty powinny odwoływać się do tokenów aliasów, a nie do surowych wartości.

Niestandardowe właściwości CSS są naturalnym formatem wyjściowym tokenów webowych. Token o nazwie spacing-4 staje się właściwością --spacing-4: 1rem i jest używany w całym arkuszu stylów jako margin: var(--spacing-4).

Wtyczka Figma Tokens i Tokens Studio synchronizują tokeny projektowe między Figma a repozytoriami kodu. Projektanci i programiści korzystają z tego samego słownika tokenów, co eliminuje błędy tłumaczenia podczas przekazywania projektu do implementacji.

Tokeny ewoluują: stare wartości należy oznaczać jako wycofywane bez przerywania działania odbiorców, udostępniając mapowania migracji. Wersjonowanie semantyczne pakietów tokenów sygnalizuje zespołom korzystającym z pakietu zmiany powodujące niezgodność.

Ten sam token JSON generuje zmienne CSS dla webu, stałe Swift dla iOS oraz zasoby XML dla Androida. Jeden plik definicji eliminuje rozbieżności w decyzjach projektowych między platformami.

Należy zacząć od tokenów kolorów i odstępów. Następnie zastępować wartości zapisane na sztywno, plik po pliku. Wyszukiwanie w bazie kodu surowych wartości szesnastkowych i literałów pikselowych pozwala znaleźć pozostałe decyzje projektowe zapisane na sztywno.

Tokeny aliasów umożliwiają tworzenie motywów: wystarczy zmienić globalny token, na który wskazuje alias, aby zmienić cały motyw bez modyfikowania kodu komponentów. Motywy jasny, ciemny i marki mogą być tworzone na podstawie tej samej warstwy aliasów.

Jaka jest różnica między tokenem globalnym a tokenem aliasu?

Tokeny projektowe to nazwane zmienne kodujące decyzje projektowe w formacie niezależnym od platformy. Tokeny globalne przechowują surowe wartości, a tokeny aliasów nadają im znaczenie semantyczne. Razem umożliwiają tworzenie spójnych, łatwych w utrzymaniu systemów projektowych działających na wielu platformach.