Design system: Najděte správnou cestu podle potřeb firmy nebo projektu

Asi stojíte před otázkou, kterou si klade zpočátku každý

“Hotové framework UI nebo custom řešení podle potřeb?”

Každá firma i projekt má jiné potřeby a neexistuje univerzální přístup k tvorbě design systému. Některé společnosti potřebují robustní automatizaci předávání a exportu tokenů z Figmy, jiné zase kladou důraz na snadnou škálovatelnost a rebranding pro více značek. Často se také řeší rychlé napojení na frameworkové knihovny, jako je Prime nebo Material UI. Jak tedy najít správnou cestu a co dělat, když narazíte na limity hotových knihoven?

Vycházejte z potřeb firmy a projektu

Než začnete stavět design systém, zmapujte si, co přesně potřebujete.

• Máte více brandů a potřebujete rychlý rebranding? Zaměřte se na theming a strukturu tokenů, která umožní snadnou výměnu barev, fontů a dalších parametrů napříč značkami bez nutnosti duplikovat komponenty. Tokeny je nejlepepší následně převádět na variables. V případě menších projektů, je vhodné variables používat rovnou.

• Chystáte se rozvoj na větším projektu, který bude mít hodně změn a aktualizací? Chcete automatizovat předávání tokenů z Figmy do kódu? Využijte pluginy pro export tokenů do JSON, CSS, SASS a dalších formátů, které lze napojit na build pipeline nebo přímo do frameworku.

• Potřebujete rychle napojit design systém na existující framework? Zjistěte, jaké možnosti themingu a úpravy tokenů framework nabízí a jak lze vaše tokeny mapovat na jeho proměnné.

Automatizace: Export a synchronizace tokenů z Figmy

Moderní nástroje umožňují automatizovat předávání design tokenů nebo variables z Figmy přímo do vývojového prostředí.

Export a správa tokenů se dobře provádí v nástroji Tokens Studio, který se osvědčuje i na stavbu složitější struktury. Například kommponentního zápisu. Supernova umožňují exportovat proměnné a styly do strukturovaného formátu (JSON, CSS), který lze dále automaticky zpracovávat. V poslední době bych se přikláněl spíše k eliminaci třetích stran. Pokud máte enterprise verzi Figmy, můžete využít export variables do Githubu oficiální cestou

Automatizace pipeline: Tokeny lze napojit na nástroje typu Style Dictionary, Supernova nebo přímo na repozitář, kde se transformují do potřebného formátu pro různé platformy (web, iOS, Android).

Napojení na frameworky: Pokud používáte framework jako Prime, zjistěte, které tokeny lze přepsat a jak je framework strukturován. Někdy je nutné vytvořit mapovací vrstvu mezi vašimi tokeny a tokeny frameworku a raději vytvořit custom řešení, které si sebou nenese tak velký dluh.

Škálovatelnost a multi-branding

Pokud spravujete více značek, je klíčové mít tokeny navržené s ohledem na škálovatelnost.

• Theming: Umožněte přepínání sad tokenů pro různé značky, klienty nebo režimy (např. světlý/tmavý režim).

• Jednotný kód: Komponenty vyvíjejte tak, aby byly co nejvíce univerzální a měnily se pouze tokeny, nikoliv samotná implementace.

• Správa a aktualizace: Udržujte centrální správu tokenů, která umožní hromadné úpravy napříč všemi projekty.

Více o tom jak stavět strukturu tokenů/variables najdete v příspěvku Adama.

Problémy s frameworkovými knihovnami: špatné názvy a duplicity

Hotové frameworky často trpí nejasným pojmenováním a duplikací hodnot. Když se podíváte hlouběji do pojmenování struktury, zjistíte, že si sebou nesou i dluh z předchozích verzí. Stejně tak jsme na to narazili i u Prime. Jak s tím pracovat? Je dobré do nich jít, pokud máte omezený čas na vývoj a menší projekt.

• Proveďte si audit stávajících názvů a hodnot v knihovně. Vytvořte mapu, která jasně ukáže, jak vaše semantické tokeny odpovídají tokenům frameworku.

• Vlastní CUSTOM pojmenování: Pokud framework používá špatné nebo nejednotné názvy, vytvořte vlastní vrstvu aliasů (semantic tokens), které budou dávat smysl vašemu týmu a budou snadno udržovatelné.

• Minimalizujte duplicity: Nesnažte se pokrýt všechny možné varianty, ale držte se základní sady tokenů a rozšiřujte ji jen podle reálných potřeb. Příliš mnoho vrstev a duplikací vede ke zmatení a ztrátě přehlednosti.

Jaká je správná cesta?

Neexistuje jediný správný postup. Pokud máte ten luxus a to je čas, volte custom řešení. Protože se vám bude v budoucnu lépe spravovat. Zasohovat někdy do komponent, které mají strukturu a semantiku vytvořenou špatně nebo je složité ji porozumět je velmi obtížné. Pokud chce klient nebo vy specifické požadavky po komponentě z frameworku, tak ji stejně budete muset dělat na míru custom a tedy předělat. Pravidla, která mohu poradit:

• Začněte od potřeb firmy a projektu, ne od nástrojů nebo trendů. Nebojte se jít do CUSTOM řešení ve struktuře tokenů.
• Zapojte vývojáře už při návrhu systému – ušetříte čas i peníze a předejdete zbytečným chybám.
• Držte systém co nejjednodušší – přílišná komplexita a zbytečné vrstvy tokenů vedou k chaosu a špatné adopci.
• Pravidelně systém udržujte a dokumentujte – design systém je živý organismus, který musí reagovat na změny v byznysu i technologiích.
• Přizpůsobte pojmenování a strukturu tokenů vašemu týmu i technologiím – neexistuje univerzální pojmenování, důležitá je srozumitelnost a udržitelnost