Design Token

Design tokeny jsou pojmenované hodnoty uchovávající vizuální designová rozhodnutí produktu: barvy, typografické škály, jednotky mezer, poloměry rohů, definice stínů a podobné vlastnosti. Místo tvrdého kódování hodnot jako #0057FF nebo 16px roztroušených po celém projektu tím definuje token jednou a všude se na něj odkazuje názvem.

Výhoda se projeví při změně. Pokud se primární barva značky změní, aktualizace jednoho tokenu propaguje změnu automaticky v celém produktu, místo aby bylo nutné provést vyhledávání a nahrazení v deseti souborech. Stejná logika platí pro spacingové systémy, velikosti fontů a jakoukoliv vizuální vlastnost, která by měla zůstat konzistentní.

Tokeny také slouží jako most mezi designovými nástroji a kódem. Figma může definovat tokeny, které se exportují přímo do CSS custom properties, JavaScript objektů nebo platform-specifických formátů pro iOS a Android. To znamená, že designéři a vývojáři odkazují na stejnou hodnotu stejným názvem, což snižuje chyby překladu při předávání. Nástroje jako Style Dictionary od Amazonu se běžně používají k transformaci jedinečného zdroje tokenů do více výstupních formátů.

Design systémy jako Material Design a Carbon od IBM zveřejňují své tokeny veřejně. Pro týmy budující současně pro web, iOS a Android jsou tokeny často nejpraktičtějším způsobem udržování vizuální konzistence bez duplikace úsilí. Sémantické pojmenování -- například color-button-primary místo blue-500 -- rozhoduje o užitečnosti tokenu při evolucích designu.