Design

Figma Schema: Konference o důležitosti design systémů

Osnova

7.10. 2021 se konala první konference Figmy zaměřená na design systémy. Už když mi do e-mailu přistála pozvánka jsem věděl, že to bude pecka. Mezi přednášejícími byli lidé z Netflixu, Asany, Googlu, Microsoftu, ale i českého Productboardu. Právě ze zastoupení české firmy jsem byl nadšený, protože věřím, že tu máme plno šikovných lidí, kteří mohou přenést své know-how i mimo naší malinkou zemičku. Z Productboardu tam byl Honza Toman a musím uznat, že to zvládl na 110 %.

V tomto článku se chci zaměřit na pár důležitých bodů z každé prezentace, a to co si z ní odnést, i když jste na konference nebyli. Ještě se chci omluvit za kvalitu obrázků. Přeci jen to jsou printscreeny streamu.

Conference Kick-off

Celou konferenci odstartoval Sho Kuwamoto, Director of Product ve Figmě. Start byl odlehčený, plný energie a zajímavých příběhů z jeho začátku. Pobavil mě příběh o jeho začátcích v roce 1997, kdy plno lidí věřilo, že internet je jen módní trend a „že to přejde“. 

Říkal, že už v té době měli myšlenku na software, který má jedinou funkci. Vyvíjet ruku v ruce code a design. Toto se zároveň i o x let později stalo hlavní náplní Figmy. Při startu Figmy nikdo moc nevěřil, že je možné udělat kolaborační nástroj v browseru, a že by mohl dobře skloubit právě design s prostředím pro vývojáře. Osobně myslím, že se jim to celkem povedlo. 😄

Poslední myšlenka celého talku byla o tom, že se nevyplatí přemýšlet nad “early days”. Plno lidí říká, že dneska už nejde nic udělat, protože už to není jak před x lety při startu celého odvětví. Sho řekl krásnou větu. „Každý moment je early day pro něco nového.“ Nemá smysl lpět na minulosti, ale začít vyvíjet věci pro budoucnost, protože právě v budoucnu se někdo ohlédne a řekne si, jaké to muselo být v těchto “early days”.


Figma: software pro design a kód

Netflix: Guidance over governance

Přednáška Netflixu byla jedním slovem pecka! Mimo slidů ji provázelo několik filmečků, které měly kvalitu Netlix show. Krásně zpracované, ale vizuální podoba nebylo to jediné zajímavé.

Jen a Luca hodně rozebírali, jak vytvářeli komplexní design systém pro celý Netflix, který musí dobře fungovat pro dvě klíčové skupiny:

  1. Pro consumera (pro nás), kterých je přes 200 milionů na světě.
  2. Pro profesionály (zaměstnance a partnery Netflixu).

Pomocí design systému, který se jmenuje Hawkins (pozn. město ze Stranger Things), se jim podařilo zrychlit celý proces 10×. Zajímavý point byl třeba to, jak upravují barvy v design systému pro profesionály. Je velký rozdíl, jestli si pustíte film anebo koukáte do UI 8 hodin denně jako součást své pracovní náplně.

Design system Netflix – Stranger Things


První verzi design systému měli jako contribution-based, takže každý desiger mohl přijít s tím, co by měl obsahovat. Každé 3 měsíce teď mají firemní hlasování, co se má vyvíjet dál, a tak drží všechny designery angažované v tématice design systému, i když ho sami netvoří.

Mimo design systému vytvořili i vlastní plugin Moria, který dokáže jedním klikem přeložit jakýkoliv „banner“, co tvoří, do všech jazyků. Zároveň automaticky vytahuje obrázky, loga, popisy atd. Takže designer hned vidí, jak bude daný design vypadat např. v korejštině, i když jí sám nemluví.

Poslední důležitá myšlenka byla o tom, že nejde o to jen design systém vytvořit, ale hlavně ho udržovat a ladit.

Netflix plugin Moria

Productboard: Mastering the art of code-aligned UI kits

Productboard patří mezi nejúspěšnější startupy v naší zemi, a proto bylo super slyšet jejich pohled na design systémy a jak s nimi pracují. Honza se přednášky ujal skvěle a i když byl trošku vidět stres (já bych ho měl asi tak 5× větší), tak prezentace šla jako po másle.
Hned na začátku popsal, jak je důležité dbát na to, jestli designujete pro sebe nebo pro větší tým. Asi každý z nás někdy nedotáhl správné názvosloví nebo správné groupování designu, protože jsme designovali jen pro sebe. Toto ovšem u design systémů nejde, a naopak to může neskutečně přitížit dalším lidem v týmu.

Celý cíl design systému je ušetřit čas budoucím designerům a consumerům vaší práce. Dáte práci na začátku, aby z ní pak mohl těžit celý tým. Obecně to může být tak, že seniornější designeři nastavují design systém a juniornější ho využívají. Tím můžou hezky těžit z práce seniora.

Bohužel se často opomíjí provázanost mezi designem a kódem. I tomu se Honza dost věnoval, protože bez realizace vaší design myšlenky, je to ztráta času. Je nutné, aby byly nakódované komponenty sladěny s design systémem. Pak je může designer rychle použít a kodér jen implementovat a vše se posouvá rychle a správným směrem.

Poslední důležitou částí prezentace byly updaty design systému – update nesmí rozbít to, co jste dříve připravili. Tady se vyplatí celý design systém testovat před oficiálním launchem do firmy. Ideální pomocník je si starý systém vyprinscreenovat, a poté nový přiložit pod screen a otestovat, jestli se prvky neposouvají, texty jsou správně zarovnané, atd. 

Tipem, kterým prezentace končila, bylo využití konzistentních emotikonů v názvosloví prvků. Aby každý na první dobrou věděl, v jaké fázi daný prvek je. Např. stop značka pro nepoužívat, emotikon stavby pro WIP elementy a podobně.

Atlassian: Reimagining Atlassian design system

Atlassian se stal v posledních letech globálním hráčem. Momentálně má kolem 300 designeru napříč desítkou produktů. Některé vznikly kdysi dávno, jiné koupili a některé jsou nové přírůstky. Právě o tom byla celá prezentace. Jak udržet konzistenci napříč tolika produkty. Cíl je vytvořit prostředí, který každý uživatel jejich aplikací zná, když se přepíná mezi jednotlivými produkty.

Hned na začátku se nakousl základní problém, a tím je přes 10 let vývoje. Tento problém se neodbourá a prostě když už jste na trhu dlouho, tak na něj narazí každý. Dlouhý vývoj s sebou táhne kostlivce ve skříni a plno věcí se musí odbourávat. S historií je spojený i hypergrowth. Když firmy raketově rostou, to poslední na co většinou myslí, je konzistentní a komplexní design systém, který často bere dost času udržovat a řídí se pravidlem „10× měř, jednou kóduj“.

Zajímavá zkušenost popisovala množství lidí, co pracuje na design systému, protože více lidí s nerovná se více výstupů. Čím víc lidí, tím více komunikačních linek a design se tím často zpomaluje. Proto je ideální držet tým menší a ostatní do nej nechat promlouvat skrze meetingy na čtvrtletní bázi.

Atlassian fugování týmů


Posledním bodem prezentace byla, všemi milovaná, dokumentace. Neznám moc designerů nebo vývojářů, kteří by milovali psát dokumentaci. Bez pořádné dokumentace se ale ve větším projektu ztratíte, a nové členy týmu budete muset pořád zaškolovat. Proto se určitě vyplatí věnovat čas dokumentaci. Jak co používat a naopak jak co nepoužívat. Jen tak zajistíte, že design systém bude opravdu implementován správně do všech koutů firmy. Cílem je postavit systém, který pochopí každý bez zbytečného vysvětlování.

Lyft: User-centered design system resources

Prezentace Lyftu byla velice podobná tomu, co měl Atlassian. Bohužel pro ně – šli až po Atlassianu, a proto tam moc nových myšlenek nezaznělo. Opakoval se důraz na onboarding nových designerů a vytvoření co nejvíc automatického systému. Dřív zkoušel Lyft prezentace pro nové designery, ale to nefungovalo. Z vlastní zkušenosti – pasivní příjem informací nikdy nefunguje. Musíte si to zkoušet a tvořit. Proto vytvořili složitější proces, který je „Engaging“. To znamená, že uživatel plní design úkoly a odpovídá na otázky, které se týkají jejich design systému.

To dává novým designerům reálné zadání, na kterých si můžou zkoušet implementaci design systému. Bez toho, aby dělali na aktuálních úkolech a zpomalovali tím chod celého týmu.

Opět byla zmíněna dokumentace jako střed úspěšného design systému a důležitost feedbacku při tvorbě nových komponent. Interně si vyvinuli plugin, který jedním klikem převádí design do Dark modu, aby mohli rychle ladit barvy a kontrasty.

Asana: Design tokens on Asana's Design Systems team

Zajímavou novinku, kterou mi do života přinesla prezentace Asany, je nástroj leonardocolor.io. Přes tento online tool byli schopni stanovit nové palety barev, které používali v redesingu celé Asany. Aplikace ukazuje, jaké musí být další kontrastní odstíny, aby uživatel dobře viděl jejich rozdíl. Super nástroj, určitě doporučuji vyzkoušet.

Mimo tento nástroj se přednáška hodně věnovala určitým typům. Jeden z tipů: je dobré barvy pojmenovávat podle jejich využití a ne konkrétní barvy. Např. místo Red použít Danger, místo Green zase Success. Lidé pak rovnou vědí, k čemu daná barva slouží a nemusí přemýšlet, jestli má být hláška modrou, zelenou nebo nějak jinou barvou.

Poslední důležitá část prezentace se věnoval tomu, jak je důležité mít Single source of truth, neboli Jediný zdroj pravdy. Týká se toho, že byste měli mít odpovědi na otázky vždy na jednom místě, kam se může kdokoliv podívat. Pokud je to Figma super, ale úplně stejně to může být Asana, Notion nebo třeba i Google Docs. Jde o to, aby se někdo nedohadoval, že jste si to minulý týden řekli takhle a ono je to jinak. Prostě se podíváte na dané místo, a to co tam není, zkrátka není pravda.

Asana design barev

Microsoft: Building custom Figma plugins

Microsoft se věnoval trošku něčemu jinému, a tím jsou pluginy. Oni sami vydali hned několik dobrým Figma pluginů:

  • Icon Scaling Tool  – Snadno připravíte a vyexportujte další velikosti ikon na pár kliků.
  • Content Reel – Potřebujete svůj design oživit reálným obsahem? Pokud ano, určitě si stáhněte Content Reel.
  • Color Contrast Checker – Rychlá kontrola kontrastu barev.
  • Focus Orderer – Plugin, který přidává informaci pro developery, když vyvíjí pro jiný input než je myš (např. pro lidi s určitým tělesným postižením).

Pokud vás zajímají další super pluginy, určitě doporučím článek o těch 28 nejlepších pluginů Figmy, které musíte mít.

Bylo hezké vidět, že pokud umíte základy web developmentu, zvládnete vytvořit jednoduchý plugin za pár minut. Ano, Figma je browser-based, a tím pádem se pluginy do ní vyvíjejí jako malé webové aplikace.

Google: Material You and Figma

Material You je asi největší novinka Google appek a nové verze Androidu. Pro ty co ho neznají, jednoduše se celý váš design (hlavně barvy) upravují podle vašich představ (podle vašeho pozadí). Takže se barevná paleta mění podle toho, jak si vy měníte tapetu telefonu. Což je dle mého názoru dost chytré, protože když tíhnete k nějaké barvě, tak ji pravděpodobně máte i nějak zastoupenou na tapetě. Automaticky se vám tedy vytáhne 5 barev z pozadí plochy. Z těchto 5 barev se udělá 13 odstínů a ty se propíší celým systémem a podporovanými aplikacemi. 

Material You paleta barev


Pro designery je ale nutné vidět, jak bude jejich aplikace na tyto změny reagovat a jestli bude vše viditelné tak, jak si představují. Google mluvil o interním pluginu, kterým vám toto dovolí rychle a jednoduše testovat na vašem designu. Každopádně jsem plugin nenašel ke stažení, takže doufám, že ho Google co nejdříve vypustí na světlo světa.

Shrnutí

Tak tohle byla Figma Scheme konference. Osobně jsem si ji mega užil a těším se další konference pod taktovkou Figmy. Určitě vám z nich přinesu takovýto krátký report. Pokud si chcete ve Figmě zlepšit své dovednosti, doporučím můj Figma online kurz. Kurz má hodiny lekcí od úplných základů až po složitější prototypy a elementy. Prostě všechno v jednom uceleném balíčku, který neustále vylepšuji.