Design tokeny
Aktualizováno 22. 9. 2026
Design tokeny jsou pojmenované designové hodnoty (barvy, písmo, odstupy, stíny) uložené v jednom zdroji, ze kterého se generují styly pro web, aplikace i designové nástroje.
Rychlá fakta
- Typ
- formát a metodika pro ukládání designových rozhodnutí
- Cena
- zdarma — otevřená specifikace W3C DTCG a open-source nástroje (Style Dictionary); placené mohou být designové nástroje
- Standard
- Design Tokens Format Module 2025.10 — první stabilní verze (W3C Community Group, říjen 2025)
- Časová náročnost zavedení
- řádově dny (základní paleta a typografie) až týdny (témata, více značek, napojení na build)
- Náročnost zavedení
- střední — vyžaduje dohodu na pojmenování a úpravu build procesu frontendu
Co to je
Design token je pojmenovaná hodnota. Místo #0B5FFF napíšete color.action.primary. Místo 16px napíšete space.4. Hodnota se uloží jednou a všechny platformy — web, e-mailové šablony, mobilní aplikace, Figma — ji čtou z jednoho místa.
Tokeny jsou nejnižší vrstva design systému. Díky nim se změna barvy značky nebo zaoblení rohů udělá jednou úpravou souboru, ne hledáním stovek výskytů v CSS.
Jak to funguje
Tokeny se obvykle dělí do tří úrovní:
| Úroveň | Příklad | K čemu slouží |
|---|---|---|
| Primitivní (základní) | blue.600 = #0B5FFF | celá paleta dostupných hodnot |
| Sémantické | color.action.primary = {blue.600} | význam — kde a proč se hodnota používá |
| Komponentové | button.primary.background = {color.action.primary} | vazba na konkrétní komponentu |
Sémantická vrstva je pro e-shop nejdůležitější. Když chcete tmavý režim nebo druhou značku, přemapujete jen sémantické tokeny na jiné primitivní hodnoty a komponenty zůstanou beze změny.
Specifikace W3C. Design Tokens Community Group při W3C vydala 28. října 2025 první stabilní verzi specifikace, Design Tokens Format Module 2025.10. Definuje formát JSON s klíči $value, $type a $description, aliasy mezi tokeny, podporu témat a více značek a moderní barevné prostory (například Display P3 a Oklch). Jde o specifikaci komunitní skupiny, nikoli o formální W3C Recommendation. Pro praxi je důležité, že se na ní shodly nástroje: podle oznámení skupiny ji podporují nebo implementují mimo jiné Figma, Penpot, Sketch, Framer, Tokens Studio a Style Dictionary.
Typický řetězec nástrojů:
- Figma Variables — tokeny se definují jako proměnné s režimy (např. světlý a tmavý). Figma oznámila nativní import a export ve formátu DTCG; kde ještě není dostupný, pomohou komunitní pluginy.
- Soubor JSON v repozitáři — jediný zdroj pravdy, verzovaný v Gitu.
- Style Dictionary — open-source nástroj, který z JSON vygeneruje CSS proměnné, SCSS, JS a formáty pro iOS a Android. Verze 5 staví na formátu DTCG 2025.10.
- Frontend — komponenty používají jen CSS proměnné, nikdy natvrdo zapsané hodnoty.
Výhody a limity
Výhody
- Jedna změna se propíše všude — web, e-maily, aplikace.
- Tmavý režim, sezónní kampaně nebo druhá značka bez přepisování komponent.
- Designér a vývojář mluví stejným jazykem (stejné názvy ve Figmě i v kódu).
- Kontrasty barev se dají hlídat automaticky už na úrovni tokenů.
Limity
- Na krabicové šabloně s omezeným přístupem ke CSS přínos klesá.
- Špatně navržené pojmenování se později těžko mění, protože na něj odkazuje celý kód.
- Tokeny samy nic neřeší, když vývoj dál píše hodnoty natvrdo mimo systém.
Checklist před zavedením
- Máte seznam barev, velikostí písma a odstupů, které web reálně používá?
- Je dohodnutá jmenná konvence (anglicky, tečková notace, sémantické názvy)?
- Kde bude jediný zdroj pravdy — Figma, nebo repozitář?
- Umí váš frontend build spustit Style Dictionary nebo jiný převodník?
- Kdo schvaluje změny tokenů?
Jak to řešíme v Převeďshopu
Tokeny zavádíme jako první krok při stavbě design systému. Nejdřív projdeme současný web a sjednotíme desítky podobných odstínů a velikostí na rozumnou škálu. Pak tokeny založíme ve Figmě, exportujeme do formátu DTCG a napojíme na build frontendu přes Style Dictionary. U e-shopů na vlastním nebo headless řešení je přínos největší. U krabicových platforem posoudíme, co šablona dovolí. Víc o designové práci na stránce Design.