Co jsou Design Tokeny a jak je používat

Dnes  vám chci představit téma, které je nesmírně důležité a věřím, že vás bude bavit. Řeč je o Design Tokenech – k čemu slouží, proč byste jim měli věnovat čas a jak pomáhají vývojářů, designerům (i manažerům) v každodenní práci.

Pokud by vás tokeny a celkově Design systémy zajímaly víc, určitě se přijdete do naší Friends of Figma komunity, kde jsem leaderem a tyhle témata aktivně řešíme. Rádi vás mezi sebou přivítáme! 😊👋

Určitě mi dáte za pravdu, že spolupráce mezi oddělením designu a vývoje není vždycky hladká. Každý má svůj pohled na věc a hand-off a komunikace často skřípe.

Mentoroval jsem a školil už tolik týmů, že jsem vypozoroval, že věšina bojuje se stejnými problémy.

Tady jsou ty nejčastější (a na konci článku najdete, jak tyhle problémy vyřešit díky tokenům)

👎 Design hand-off

Jeden z nejčastějších problémů – jak předávat informace vývoji (pokud možno bez zbytečných meetingů navíc).

👎 Složitá komunikace

Design a vývoj mluví jiným jazykem (i když všichni mluví česky 😅). Ani jeden z nich není dobrý ani špatný. Je prostě jiný. Týmy si zkrátka nerozumí.

👎 Updates

Často se zapomíná na to, že produkt bude mít do budoucna updaty. Nedoáhne se workflow pro konzistentní a rychlé updaty.

👎 Vývoj bez designu

Ano. Pořád se to děje. I dnes. Ať už jsou důvody jakékoliv – časové, kapacitní. Vývojáři občas musí zastat roli designera.

Šance, že výstup bude stejně dobrý a konzistentní se zbytkem designu jsou malé. A ve výsledku se to musí stejně předělat. A to je škoda práce, času a peněz, které se do toho investovaly.

👎 Rebranding

Velký strašák především kvůli objemu toho, co se musí předělat. Vše napříč mobilní / web appkou, operačními systémy atd.

Co jsou Design Tokeny

🟣 Jsou to design rozhodnutí (hodnoty), které designer může spravovat z jednoho místa. Proč je to super a jak moc to zrychluje proces vám povím o pár řádků níž.

🟣 Mohou to být sémanticky zapsané hodnoty = barvy, typografie, fonty, rozměry atd.

🟣 Je to proces přesunu informací mezi designem a vývojem jednotně a efektivně.

🟣 Je to jednotný a společný jazyk mezi designem a vývojem.

Stavba Design Tokenu

1. Tohle asi všichni znáte, je to hexový zápis barvy. Vsadím se, že kdybych vám tam neudělal ten modrý čtvereček, pravděpodobně vůbec nevíte, co je to za barvu. A to je v pohodě. Já taky ne.
2. Taky ji ale můžeme zapsat jako blue-900. Když vidíme blue, už víme, že to bude nějaká modrá barva. Ale víc nevíme. Co s ní má dělat?
3. Další zápis už je trochu specifičtější. Víme, že je to barva (accent-color-900), která má něco zvýrazňovat. Ale vám je ve výsledku jedno, jaká barva to je.
4. Tady už vidíme, že je to nějaká backgroundová barva v defaultním stavu, která má něco zvýrazňovat, takže to není hover, focus stav nebo disabled stav. Tohle už je mnohem lepší zápis, se kterým dokážeme nějak pracovat.

Toto dokážete napojit na komponenty. Co to znamená? Vaším cílem je zapsat jednotlivé hodnoty sémanticky, aby byly jednoduše použitelné.

Distribuce Design Tokenů na platformy

Nejprve potřebujete design tool. V dnešní době je to nejčastěji Figma. Ale pozor – design tokeny nejsou vázané na Figmu, jak si většina lidí myslí.

První zmínka o design tokenech, kterou jsem našel, přišla ještě rok před spuštěním Figmy. V té době se vytvářeli tokeny v JSON formátu přímo v kódu a to byla pro hodně designerů překážka. Jestli Figmě za něco vděčíme, tak určitě za popularizaci tokenů.

Odtud si to pak můžete distribuovat napříč platformami. Jedním z firem, která stojí za propagací tokenů je Spotify, protože má strašně moc platforem – od mobilních zařízení přes web až po Apple TV. Myslím, že těch platforem mají více než 200. A udělat jakoukoliv změnu takhle plošně bylo skoro nereálné. Dokud nepřišly tokeny.

‍

Komponent Design Tokenu

Co je pointem? Do CSS (konkétně do nějakého Sass) dáváte reference místo pevných hodnot. Jednotlivé reference pak odkazují na konkrétní file. A všechny tyto hodnoty jsou spravované z Figmy.

Vysvětlím – když se designeři rozhodnou cokoliv změnit, tak to jen commitnou vývojářům. Ti si to mergnou a je hotovo. Vývojáře vlastně vůbec nezajímá, jaké ty hodnoty jsou. Hodnoty vždycky tečou z druhé strany od designerů – jakékoliv updaty. Všechny komponenty se upraví napříč všemi plarformami na pár kliků.

Co jde přenášet pomocí Design Tokenů

👉 barvy

👉 typografii

👉 spacing & sizing

👉 border radius & borders

👉 rychlost animací

👉 assety (loga, ikony atd.)

👉 kompozice komponent

👉 boolean

👉 box shadow

👉 opacity

👉 animation speed

👉 a další…

Theming Design Tokenů

Tohle je reálná ukázka, kdy jsem stavil pro Vienna Insurance Group (jednu z největších pojišťovacích skupin ve střední Evropě) nový design systém. Jejich usecase je, že mají několik brandů pojišťoven, ale jen jeden backendový systém, který spravuje všechny.

Jejich cílem bylo pro každou konkrétní pojišťovnu mít vlastní design. To jde krásně vidět na obrázku. Pomocí themingu můžeme měnit věci jako jsou barvy, border radius atd. Co to pro vás znamená? Vývoj konkrétních komponent připravuje jen jednou. Nejde o duplikaci. Jedná se pouze o jeden jediný kód, který vývoj musí udržovat.

Kdy používat theming Design Tokenů

👉 Spravujete více brandů, které mají stejné prvky.

👉 Chcete customizovat enterprise systémy (např. barvy klienta, fonty, loga, ikony atd.)

👉 Připravujete „recyklovatelný“ systém v agentuře. Máte všechny atomické komponenty hotové. Přijde klient, vy za pár hodin uděláte nový set tokenů (vyměníte barvy, typografii, borber radiusy atd.) a máte všechny komponenty, buttony, inputy, navigace. Můžete používat jak vývoj, tak design. Vše už máte hotové a jen to zrecyklujete.

👉 Připravujete Light Mode / Dark Mode.

👉 Připravujete design pro určité poruchy vidění.

Kde tvořit Design Tokeny

Tokeny jsou uložené v JSON formátu, takže je můžete spravovat klidně z notepadu. Což teda nedoporučuji, protože pokud jich budete mít stovky nebo tisíce, tak je to docela hardcore. Ale je to na vás.

Můžete je spravovat ve Figmě, která má momentálně asi 80 % marketsharu. Konkrétně díky pluginu Tokens Studio.

Stačí si ho stáhnout a přes něj pak vytváříte a spravujete tokeny a pak je syncujete s Gitem nebo jiným repozitářem, kde jsou uložené. Tam si je mohou vývojáři i designéři postahovat a mít je synclé napříč projekty. Nebo přímo ve Figmě, která má své Figma Variables.

Jaký je rozdíl mezi Figma Variables a Tokens Studiem

Vždycky záleží na vašich konkrétních potřebách. Pojďme se na to společně podívat:

Výhody Figma Variables

➕ Je to funkce Figmy, takže je v ní nativně. Nemusíte nic dalšího stahovat.

➕ Je součástí Figma pricingu. Tokens Studio má sice free tarif, ale minimálně jeden člověk v týmu by měl mít placenou verzi.

➕ Je tam jednodušší learning curve než u Tokens Studia.

➕ Jsou defaultně syncnutí se všemi v daném filu. Tokens Studio musíte syncovat vždy (např. i GitHubem)

➕ Jednoduchuše je distrubuujete s naší design systém knihovnou

➕ Umí toho mnohem více než Tokens Studio. Je to takový švýcarský nůž – umí toho hodně, ale nic pořádně do hloubky. Vedle tokenů umí jazykové překlady, komplexní prototypy atd.

O Varibles mám obsáhlou kapitolu v mém online kurzu Figma MasterClass, tak kdybyste se do Variables chtěli ponořit, v kurzu najdete vše potřebné. Včetně Flappy Birda. 😁

Nevýhody Figma Variables

➖ Figma Variables neumí vše, co Tokens Studio (chybí některé typy tokenů). Do budoucna se to možná změní.

➖ Figma velice limituje možné Token Sety. Pokud je tedy chcete mít ať už pro rozdílné brandy nebo cokoliv dalšího. S Variables vám to dost pravděpodobně nebude stačit. Momentálně jsou v Pro tarifu (který já většina firem) jen 4. U některých projektů jich můžete mít stovky.

➖ Roztříštěný focus. Kromě tokenů i na překlady, prototypy.

Ve zkratce – pokud to myslíte s Tokeny vážně, používejte Tokens Studio. Figma Variables to možná jednou nahradí, zatím se spíš ale přikláním k Tokens Studiu.

Přenos hodnot z Figmy do kódu

Designer

Krásně je to vidět na tomto obrázku od Halodoc. Máte Figmu a v něm máte Tokens Studio, ve kterém spravujete tokeny a výstupem je JSON. Vy jako designeři tedy na konci z Figmy posíláte dál JSON, kde jsou uložené tokeny, jejich typy a konkrétní hodnoty.

Vývojář

Jako vývojář dostanete JSON, nad kterým pak děláte nějakou tranformaci. Buď můžete použít něco, co je volně dostupné, nebo si napíšete něco vlastního. Pořád je to jen JSON a vy si ho chcete dát do formátu, co vám vyhovuje.

Připravíte si transformátor nebo exportér, který vám pak z toho třeba vytvoří SASS files a pak npm package.

Celý tento proces se dá samozřejmě zautomatizovat. Jsou na to i (placené) plaformy. Ve většině firem je ale nutné si exportér napsat custom. Ale je to otázka třeba jednoho dne. Určitě doporučuji tomu ten čas věnovat, protože si to připravíte na základě vašich potřeb – namingu, formátu atd.

Adopce tohoto procesu je strašně důležitá. Naučit vývojáře, aby nepoužívali konkrétní hodnoty, ale tokeny jako takové je stěžejní a často je to i kámen úrazu.

Plno týmu vytvoří super design systém, všechno si tokenizují, dokumentují. Vypadá to perfektně, ale když dojde na reálnou adopci, tak je mizivá. Proč? Většinou protože nikdo pořádně nevysvětlil vývojářům (není to jejich chyba) k čemu to je a proč by to měli dělat.

Proč jsou Design Tokeny důležité & proč používat design tokeny

Už několikrát jsem se bavili o tom, jak moc komunikačních šumů vzniká (nejen) mezi designery a vývojáři. Díky design tokenům vám drtivá většina těchto nedorozumnění odpadne. Proč? Je to Single source of truth pro všechny, kdo na projektu pracují.

Společný jazyk mezi designéry a vývojáři

Jedním z benefitů je rozhodně zlepšení komunikace mezi týmy. Tokeny vám umožní komunikovat stejným jazykem bez ohledu na vaší roli, platformu nebo programovací jazyk.

Konzistence brandu / produktu

Udržet konzistenci je výzva pro každého designera. Není ve vašich silách si všechno pamatovat.

Váš pohled na design se může měnit, můžete mít tendenci mírně ladit velikosti, barvy, mezery… a to nám tvoří právě nekonzistenci > na to se může nabalit problém s použitelností > a pak nám roste technický dluh.

Samozřejmě čím více designerů, tím důležitější je mít vše definované.

Menší designový a technologický dluh

Čím menší dluh, tím víc ušetřeného času a zároveň i pěněz pro vaši firmu.

Jednoduchá údržba a synchronizované soubory

Vše editujete real-time na jednom místě a najednou.

Jsou tokeny správná volba i pro vás

Dejte design tokenům šanci. Dejte tomu jedno odpoledne s čajem nebo kávou a zjistěte, jestli je to něco, co by vám mohlo pomoci.

Na rovinu – pokud jste maličkatý tým, pro který je stěžejní rychlost, tak debatovat měsíc nad názvoslovím asi nebude to pravé.

Řešení nejčastějších problémů Design & Dev týmů díky Tokenům

Slibované vyřešení problému, které jste četli na začátku článku:

👍 Design hand-off

Vše se jednoduše předá, když je to v jazyce vývojářů a je to automatizované. I když jsem sám designer, zastávám to, že by se designeři měli přizpůsobit vývojářům.Vývojářů je většinou více a dělají ten finální produkt.

Finální produkt není design ve Figmě. Finální produkt je to, co je na produkci. Všechno je samozřejmě o kompromisu, ale tím, že nastavíte jednotný a automatizovaný jazyk mezi týmy, neskutečně se hand-off zjednoduší. Nikdo se nebude ptát na hodnoty, nikdo se nebude ptát na to, jak to bylo myšlené.

👍 Složitá komunikace

Nemusíte vysvětlovat názvosloví, protože je pevně dané v každém tokenu. Je standardizované.

👍 Updates

Pokud jde o vizuální updaty, tak ty se dělají automaticky. Není třeba je složitě popisovat. Obzvlášť pokud nějaký projekt začíná a design systém se teprve tvoří.

Příklad – designeři budou chtít kulaté buttony. Po chvilce zjistí, že takové už měli před 5 lety, když se dělal design, takže to už nechtějí. A pak to musí vývojáři všechno předělat. Ale s tokeny ne.

Stačí změnit hodnotu v tokenu, designeři to commitnou, vývojáři to mergnou a je to otázka 10 vteřin. A máte to hotové napříč všemi elementy, které máte. A tak je to se vším. S barevnou paletou, s velikostí fontu atd.

👍 Vývoj bez designu

Pokud mají vývojáři sémantický zápis tokenů, můžou je používat i bez designera. Pozor. Neříkám, že se dá všechno dělat bez designerů, mají svou roli. Ale pokud máte dobře připravené tokeny, jsou sémanticky zapsané tak, že každý ví, jak je má použít, tak eliminujete potřebu designerů. Vývojáři se tak můžou stát částečně nezávislími na designech, pokud je potřeba něco honem udělat.

👍 Rebranding

Když to přijde, tak je to pro vás změna pár hodnot ve Figmě a máte to jedním mergem na všech místech.

Ať už se rozhodnete jakkoliv, je super, že jste si o design tokenech něco přečetli. Pokud vás téma zajímá víc, určitě se přidejte do skupiny Friends of Figma Czech Republic, kde jsem leaderem a odebírejte můj newsletter. Těším se na vás u dalšího článku, akci nebo e-mailu.