Přístup k dokumentaci Design Systemu
Dokumentace design systému je často téma, které v týmech vyvolává hodně otázek. Jakmile totiž dojde k nasazení – zejména složitějšího – design systemu do praxe, samotný popis komponent nestačí.
Najednou zjišťujeme, že je potřeba zachytit i jejich chování a vztahy v rámci jednak composites, neboli komplexnějších organismů, a také vzorců pro používání těchto komponent a composites v UX, tedy patternů. Pokud tyto podklady jako osoby odpovědné za tvorbu a adopci design systemu nedodáme, začínají problémy s konzistencí UX návrhů.
A těm se nemusíme vyhnout ani v případě, že taková dokumentace existuje, ale nikdo ji nečte, nebo o ní dokonce neví. Pokud je dokumentace takto prakticky neviditelná, je z uživatelského pohledu zbytečná.
Za funkční tedy považujeme dokumentaci, která je přehledná, dostupná, čtená a hlavně živá. Ideální stav je, když jsou k její tvorbě a úpravám motivováni a podílejí se na ní sami uživatelé – designéři, vývojáři i další členové týmu. Tím vzniká prostředí, kde se dokumentace stává nástrojem, ke kterému má každý vztah a který se organicky rozvíjí podle potřeb projektu.
A teď jaké nástroje použít?
Notion
Notion se v praxi osvědčil jako nástroj, který umožňuje vytvářet přehlednou, strukturovanou a kolaborativní dokumentaci. Díky možnosti vkládat odkazy, stavět rozcestníky a embedovat framy z Figmy (které se navíc automaticky aktualizují) je možné udržet obsah aktuální a snadno dostupný. Na dokumentaci může pracovat celý tým, a to zásadně zvyšuje její kvalitu i užitečnost, stejně jako ulehčuje evidenci dotazů a požadavků. Výstup z Notionu jde poté možné přenést například do Docusauru a udržovat na veřejné doméně.
Docusaurus
Docusaurus je open-source nástroj pro tvorbu dokumentace postavený na Reactu. Umožňuje vytvářet dobře strukturované weby s vyhledáváním, verzováním a možností customizace, což je všechno super. Je vhodný hlavně pro týmy, které preferují technický stack a chtějí mít dokumentaci hostovanou pod vlastní doménou. Výhodou je možnost integrace s dalšími nástroji, nevýhodou pak podobně jako u storybooku vyšší nároky na správu a technickou znalost.
Storybook
Storybook je nejlepší jako „source of truth“ pro vývojáře, ale pro designéry a UX specialisty je jeho prostředí často špatně uchopitelné. Dokumentace patternů v něm bývá komplikovaná. Některé informace do Storybooku ani nelze efektivně dostat a je třeba spoléhat na další umístění a popis například zmíněných patterns. Zpravidla také není sndané ho editovat pro někoho bez zkušeností, a tím se zužuje možný počet přispivatelů.
Figma
Dokumentaci lze samozřejmě velmi dobře provozovat ve Figmě, koneckonců je to appka ve které vytváříme i ten design system že ano. Ale v závislosti na velikosti projektu má i svá úskalí. Například ač se to může jevit jako neintuitivní, v některých případech je důležité oddělení dokumentace a zejména patterns od primárního Design system Figma filu. Pokud se totiž vše drží v jednom souboru, zejména u dokumentace patterns, které vychází z konkrétních reálných use case, dochází k násobení počtu vrstev, tím pádem ke zpomalování Figmy a práce se souborem se stává neefektivní, například funkci vnitřního vyhledávání tím úplně zabijeme. (Figma umožňuje vnitřní prolinkování takže to nemusí být takový problém jak si možná můžete teď myslet.) A tak zejména u větších design systemů je tak vhodnější vytvářet pro dokumentaci a patterny samostatné soubory, což zajistí větší plynulost. Design system file také publishuje knihovnu a editorský přístup k ní by neměl mít každý. To zase omezuje množství uživatelů, kteří se na dokumentaci mohou podílet.
Dle mého názoru, jako někoho kdo má rozvoj a adopci design systemu na starost, se jako nejhorší varianta ukazuje dokumentace, která není komunikovaná a/nebo je pro uživatele nepřístupná. Nejlepší výsledky přináší motivující, otevřený a kolaborativní přístup, kde se dokumentace stává společným projektem a živým nástrojem. Ideální forma kombinuje automaticky updatovanou vizuální stránku s vysokou informační hodnotou a jasnou strukturou ve stylu wikipedie. Notion je v tomto ohledu velice praktickým řešením, které umožňuje propojit potřeby designérů i vývojářů a udržet dokumentaci aktuální i použitelnou v krátkodobém i dlouhodobém horizontu.