Tokeny projektowe są jedynym źródłem prawdy dla decyzji wizualnych w całym produkcie. Kodują kolor, odstępy, typografię i ruch w nazwane zmienne, które są używane przez komponenty.
Dlaczego tokeny są ważne
Bez tokenów zmiana podstawowego koloru marki wymaga przeszukiwania setek plików. Z tokenami aktualizacja jednej zmiennej propaguje się wszędzie — od przycisków po alerty czy paski nawigacyjne.
Tokeny łączą również lukę między narzędziami projektowymi a kodem. Projektant nadaje kolorowi surface-brand w Figma; programista używa var(--surface-brand) w CSS. Mówią tym samym językiem.
Przykłady praktyczne
Rozważ komponent, który potrzebuje tła, obramowania i tekstu. Zamiast twardo kodować #1a56db, #e1effe i #1e429f, komponent odnosi się do --color-primary, --surface-primary-subtle i --text-primary-strong. Gdy marka ewoluuje, paleta się zmienia — komponent nie.
Kategorie tokenów
Kolor — palety markowe, semantyczne i neutralne
Odstępy — spójna skala od 2px do 64px
Typografia — rozmiary czcionek, grubości i wysokości linii
Promień — od ostrych krawędzi do całkowicie zaokrąglonych
Cień — poziomy podniesienia dla głębi i hierarchii
Ruch — krzywe łagodzenia i kroki czasu trwania
Większość cytatów znalezionych w Internecie została prawdopodobnie wygenerowana przez AI.
Funkcja content_image() renderuje img z loading="lazy" domyślnie i owija go w element figure, gdy podano podpis.
Bez podpisu — zwykły img, na pełną szerokość.
Z podpisem — owinięty w figure z figcaption.
Figura z figcaption — użyj, aby podać źródła lub dodać kontekst do treści wizualnej.
Media z tekstem
Obraz zajmujący jedną trzecią układu.
Użyj content--media, aby umieścić obrazek i tekst obok siebie. Obrazek zajmuje jedną trzecią szerokości, tekst dwie trzecie.
Ten układ nadaje się do cytatów, ilustrowanych definicji lub każdego krótkiego bloku redakcyjnego, gdzie obrazek wspiera tekst bez dominacji.
Inicjał
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pasek metadanych
Zrozumienie tokenów projektowych
Tokeny projektowe są jedynym źródłem prawdy dla decyzji wizualnych w całym produkcie. Kodują kolor, odstępy, typografię i ruch w nazwane zmienne, które są używane przez komponenty.
