Čo je Design Tokens?
Design tokens sú najmenšie jednotky dizajnového systému — pomenované hodnoty pre farby, veľkosti, medzery, tiene a typografiu. Slúžia ako jediný zdroj pravdy pre vizuálny štýl zdieľaný medzi dizajnérmi a vývojármi.
Definícia Design Tokens
Čo sú design tokens
Design tokens (dizajnové tokeny) sú pomenované premenné, ktoré uchovávajú vizuálne hodnoty dizajnového systému — farby, medzery, veľkosti písma, border-radius, tiene a ďalšie. Pojem zaviedli dizajnéri z Salesforce pri budovaní systému Lightning Design System.
Namiesto pevných hodnôt ako #3B82F6 použijete token color-primary, ktorý sa v kóde transformuje na CSS premennú var(--color-primary). Tým získate jednoducho meniteľný, konzistentný dizajn.
Typy design tokenov
- Globálne tokeny — základné hodnoty (napr.
blue-500: #3B82F6) - Sémantické tokeny — účelové pomenovanie (napr.
color-primary,bg-surface) - Komponentové tokeny — špecifické pre komponent (napr.
button-padding)
Prečo sú design tokens dôležité
Tokeny umožňujú centrálnu správu vizuálu. Zmena jedného tokenu sa prejaví na celom webe. Podporujú aj dark mode — stačí namapovať sémantické tokeny na iné globálne hodnoty. Nástroje ako Style Dictionary automatizujú generovanie tokenov pre rôzne platformy (CSS, iOS, Android).
Praktický príklad
Príklad: Firma chce zmeniť primárnu farbu z modrej na zelenú.
Bez tokenov: Vývojári musia nájsť a nahradiť stovky výskytov #3B82F6 v kóde — riskujú, že niečo prehliadnu.
S tokenmi: Stačí zmeniť hodnotu tokenu color-primary na jednom mieste. Celý web sa automaticky aktualizuje.
Výsledok: Rebrand trvá minúty namiesto dní a riziko nekonzistencie je nulové.
Často kladené otázky
Čo sú design tokens?
Design tokens sú pomenované premenné pre vizuálne hodnoty dizajnu — farby, veľkosti, medzery, tiene. Slúžia ako jediný zdroj pravdy zdieľaný medzi dizajnérmi a vývojármi.
Aký je rozdiel medzi design tokenom a CSS premennou?
Design token je platformovo nezávislá hodnota (JSON/YAML), ktorá sa transformuje na CSS premennú, Swift konštantu, Android resource alebo iný formát. CSS premenná je len jedným výstupom.
Ako design tokens pomáhajú s dark mode?
Sémantické tokeny (napr. bg-surface, text-primary) sa v dark mode namapujú na iné globálne hodnoty. Komponenty používajú sémantické tokeny, takže automaticky fungujú v oboch režimoch.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.