Přeskočit na obsah
TelegramWhatsApp

Slovník

Design Token

Design tokeny jsou pojmenovane hodnoty uchovavajici vizualni designova rozhoduti produktu: barvy, typograficke skaly, jednotky mezer, polomery rohlu, definice stinu a podobne vlastnosti. Misto tvrdeho kodovani hodnot jako #0057FF nebo 16px roztrousenych po celem projektu tim definuje token jednou a vsude se na nej odkazuje nazvem.

Vyhoda se projevi pri zmene. Pokud se primarni barva znacky zmeni, aktualizace jednoho tokenu propaguje zmenu automaticky v celem produktu, misto aby bylo nutne provest vyhledavani a nahrazeni v deseti souborech. Stejna logika plati pro spacingove systemy, velikosti fontu a jakoukoliv vizualni vlastnost, ktera by mela zustat konzistentni.

Tokeny take slouzi jako most mezi designovymi nastroji a kodem. Figma muze definovat tokeny, ktere se exportuji primo do CSS custom properties, JavaScript objektu nebo platform-specifickych formatu pro iOS a Android. To znamena, ze designeri a vyvojari odkazuji na stejnou hodnotu stejnym nazvem, coz snizuje chyby prekladu pri predavani. Nastroje jako Style Dictionary od Amazonu se bezne pouzivaji k transformaci jedinecneho zdroje tokenu do vice vystupnich formatu.

Design systemy jako Material Design a Carbon od IBM zverejnuji sve tokeny verejne. Pro tymy budujici soucasne pro web, iOS a Android jsou tokeny casto nejpraktictejsim zpusobem udrzovani vizualni konzistence bez duplikace usili. Sematnicke pojmenovani -- napriklad color-button-primary misto blue-500 -- rozhoduje o uzitecnosti tokenu pri evolucich designu.