Design Token

Design tokeny jsou pojmenované hodnoty, které uchovávají vizuální designová rozhodnutí produktu: barvy, typografické škály, jednotky odsazení, zaoblení rohů, definice stínů a podobné vlastnosti. Místo natvrdo zapsaných hodnot jako #0057FF nebo 16px roztroušených po celé codebase nebo designovém souboru tým definuje token jednou a všude na něj odkazuje jménem.

Přínos se ukáže ve chvíli, kdy se něco změní. Pokud se posune hlavní barva značky, úprava jediného tokenu se automaticky promítne do celého produktu, místo aby bylo nutné hledat a nahrazovat hodnoty v desítkách souborů. Stejná logika platí pro systémy odsazení, velikosti písma nebo jakoukoli vizuální vlastnost, která má zůstat napříč rozhraním konzistentní.

Tokeny také slouží jako most mezi designovými nástroji a kódem. Figma umí definovat tokeny, které se exportují přímo do CSS custom properties, JavaScriptových objektů nebo platformně specifických formátů pro iOS a Android. Designéři i vývojáři tak odkazují na stejnou hodnotu stejným jménem, což snižuje chyby při předávání. K převodu jednoho zdroje definic tokenů do více výstupních formátů se běžně používají nástroje jako Style Dictionary od Amazonu.

Design systémy jako Material Design nebo Carbon od IBM své tokeny zveřejňují. Pro týmy, které staví zároveň pro web, iOS a Android, jsou tokeny často nejpraktičtější cestou, jak udržet vizuální konzistenci bez duplikování práce. O jejich užitečnosti při vývoji designu rozhoduje disciplína smysluplného pojmenování – sémantická jména jako color-button-primary místo blue-500.