Tokeny

Tokenizace v Design Systémech ​

Tokenizace je zásadním prvkem moderních design systémů, které využívají design tokeny k udržení konzistence napříč různými platformami a produkty. Design tokeny představují standardizované jednotky designových prvků, jako jsou barvy, mezery, velikosti a další vlastnosti. Tyto tokeny nahrazují statické hodnoty (např. hexadecimální barvy nebo pevné rozměry) a umožňují efektivní správu a aktualizaci stylů.

Co jsou design tokeny? ​

Design tokeny jsou páry názvu a hodnoty, které definují malé a opakovatelné prvky vizuálního stylu. Tokeny lze aplikovat na různé atributy uživatelského rozhraní, od barev a typografie až po rozestupy a animace. Například token pro barvu error ikony může mít název color.icon.error a jeho hodnota bude zvolena tak, aby byla konzistentní napříč všemi produkty a službami.

Použití designových tokenů umožňuje systematické propojení vizuálních rozhodnutí a zajišťuje, že všechny instance určitého prvku budou mít stejnou vizuální reprezentaci. To vede k jednotnému vzhledu produktů a usnadňuje udržování design systému.

Proč používat design tokeny? ​

• Konzistence a škálovatelnost: Umožňují rychlou a efektivní změnu designu na globální úrovni. Při změně základní barvy se všechny prvky automaticky aktualizují napříč produkty a platformami.
• Jednoduchá úprava témat: Tokeny podporují snadné přizpůsobení designu pro světlý a tmavý režim nebo další témata pouhou úpravou hodnot.
• Podpora responsivního designu: Tokeny umožňují flexibilní přizpůsobení designu různým zařízením a rozlišením, což je zásadní pro moderní webové aplikace.
• Více produktů a systémů: Tokeny umožňují efektivní správu a přebarvení designového systému napříč produkty pomocí jednoho zdroje pravdy.
• Usnadnění práce pro designéry a vývojáře: Odstraňují potřebu opakovaných designových rozhodnutí. Tokeny mají semantické názvy, které jasně definují, jaké vizuální vlastnosti by měly být použity.
• Zajištění konzistence: Díky centrální správě design tokenů se zaručuje jednotnost napříč všemi prvky systému.
• Propojení designových nástrojů s kódem: Design tokeny umožňují těsnější propojení mezi nástroji, jako je Figma, a kódem. To znamená, že změny v designu mohou být snadno synchronizovány s vývojovými týmy, což zjednodušuje implementaci vizuálních změn v reálném čase a zaručuje vyšší konzistenci mezi návrhem a finální aplikací.

Tokeny jako "Single Source of Truth" ​

Design tokeny představují tzv. single source of truth, což znamená, že všechny designové prvky jsou definovány a spravovány z jednoho centrálního místa. To přináší výhody jak pro designéry, tak pro vývojáře, protože tokeny propojují design s kódem a zaručují konzistenci při implementaci. Například, pokud je určitá barva definována jako token, tento token může být využit jak v designérských nástrojích, tak v kódu, což eliminuje chyby a nesrovnalosti.

Tokeny a Design Systém gov.cz ​

V rámci Design systému gov.cz jsou design tokeny nově rozděleny do tří základních kolekcí: Primitives, Color a Size. Tyto kolekce obsahují definice základních vlastností jako jsou barvy, velikosti a rozestupy, které jsou následně používány napříč různými komponentami a aplikacemi.

• Primitives obsahují uložené hexadecimální a číselné hodnoty pro barvy. Tato kolekce tvoří základní stavební kameny, které jsou následně referencovány v dalších kolekci Color.
• Color zahrnuje kompletní barevnou paletu s různými odstíny a sémantickými významy, které jsou přizpůsobeny jak světlému, tak tmavému režimu.
• Size definuje semantické velikosti komponent a mezery, které jsou přizpůsobeny různým režimům, jako jsou desktop, mobilní zařízení a tablety.