Figma Insight: Budoucnost nejen pro Designéry

Nejčastější příčiny nepochopení návrhu designu vývojáři

• ‍Špatná znalost design nástroje mezi vývojáři: Vývojáři mohou profitovat z interního školení a workshopů, které jim pomohou efektivněji využívat daný nástroj (v našem případě Figma), a lépe pochopí proč má komponenta tolik vrstev.‍
• Nedostatečná komunikace mezi designéry a vývojáři: Designéři by měli detailněji sdílet informace o tom, jak mají komponenty vypadat v kódu. Vývojáři potřebují dostatek informací k úspěšné implementaci designu, včetně různých stavů komponent.‍
• Chybějící dokumentace: Pevná dokumentace UI pravidel a komponent klíčová. Designéři by měli s vývojáři intenzivně spolupracovat na definování palety barev, typografie a pravidel layoutu a vůbec obecného názvosloví nad UI

V rámci Etnetera Design týmu jsme provedli několik zásadních změn, abychom tyto problémy na projektech co nejvíce minimalizovali a ušetřili tak práci a čas designérům i vývojářům.

Série workshopů Figma Insight

Čas od času se na internetu objeví nový nástroj na tvorbu grafiky nebo dokumentace. V Etnetera pracujeme už několik let s Figmou. Proč zrovna tento nástroj a ne třeba Sketch?

• ‍Integrace s vývojem: Figma nabízí možnost integrace s vývojem, což usnadňuje přenos designu do kódu a udržuje konzistenci v projektu. Beta verze režimu Dev-Mode nám také umožňuje testovat nové funkce pro ještě plynulejší spolupráci.‍
• Dokumentace a Design Systém: Figma umožňuje pevně definovat pravidla skrze Variables a Styles pro UI, včetně barev, typografie a layoutu. Díky tomu máme kompletní dokumentaci nebo základy Design Systému, který slouží jako základ pro konzistentní design na všech projektech.‍
• Flexibilita a efektivita: Figma umožňuje rychlý vývoj prototypů a návrhů, což nám umožňuje rychle reagovat na potřeby klientů a iterovat nad designem skrze Branches.‍
• Multiplatformní řešení v Cloudu: Figma oproti Sketchi běží na všech platformách a poskytuje kooperativní režim pro práci více lidí současně.‍
• Branches: Figma umožňuje verzování souborů pomocí větví včetně review merges.

Naši designéři mají s Figmou několikaleté zkušenosti a práce s ní je tak z jejich strany bezproblémová. Na straně vývojářů tomu už ale tak jednoznačné neni. V Etnetera jsme se proto zaměřili na interní školení, která mají pomoci vývojářům a designérům k lepší vzájemné spolupráci a pochopení. Týmům jsme představili jak stávající funkce Figmy, které vývojáři mohou využít pro usnadnění své práce a udržení kvalitního kódu, tak novinky jako:

• Dev-Mode
• Variables
• Pluginy pro export stylů
• Integrace s VS Code

První Figma Insight workshop rozběhl zapálené diskuse. Právě prostor pro výměnu názorů a diskuze samotná jsou pro vzájemné pochopení mezi světy vývojářů a designérů klíčové.

• UI designéři by měli mít přehled o tom, jak jednotlivé komponenty budou vypadat v kódu, aby je mohli podle toho navrhnout.
• Vývojáři by měli mít k dispozici dostatek informací k tomu, aby věděli, jak mají danou komponentu uchopit.

Díky vzájemným diskuzím je pak možné zpracovat kvalitní dokumentaci a sadu pravidel pro práci s layoutem responzivního webu, pravidla použití tlačítek nebo definovat, jaké odsazení se má používat mezi konkrétními prvky.

“Opravdu nestačí navrhnout tlačítko v jeho základním provedení! A kde jsou stavy hover, focus, selected, disabled, popřípadě loading, ideálně seskupených do jednoho setu? ”

Spolupráce na tvorbě design dokumentace

Častým problémem, který vyvolává zbytečné “vášně” mezi designéry a vývojáři je právě chybějící dokumentace nebo její nedostatečná kvalita. Kdo ji má udělat? Vývojář nebo designér? Pravda je taková, že oba. Na středních a větších projektech je potřeba budovat silné zázemí v UI a její dokumentaci, a to ideálně již v rané fázi projektu, kdy je k dispozici první Design koncept.

‍Budování dokumentace je v rané fázi časově náročnější, ale v relativně krátkém horizontu se tato prvotní investice vrátí díky:

• Vyšší efektivitě vývoje a design týmu
• Menšímu prostoru pro vznik technického dluhu
• Stejnému jazyku a tím pádem snadnějšímu porozumění si napříč design týmem a vývojem
• Jednodušší správě a úpravě navržených komponent
• Rychlejšímu zapojení implementačního týmu, který nemusí čekat až na finální grafiku

Věřte mi - již během prvních pár týdnů tvorby UI a implementační fáze se investovaný čas do dokumentace UI Kitu či Design Systému vrátí nejen vám, ale i vašim zákazníkům. Ti tak získají kvalitní a dlouhodobě udržitelný produkt. A vůbec, zapomeňte na PNG či PSD podklady.

“Propojení design týmu a front-end vývojářů v rané fázi přípravy grafiky výrazně posiluje týmovou soudržnost. Vzájemné porozumění a respekt mezi členy těchto týmů je klíčové pro kvalitu digitálního profuktu a úspěch celého projektu.”

Investice do školení jako další krok k úspěchu

Prezentace vyvolala vášnivou diskuzi o správném návrhu a správě tzv. design systémů a formě podkladů. V dalších workshopech se zaměříme na další témata, jako je názvosloví a standardizace design prvků napříč platformami iOS/Apple/Web, a zaměříme se i na typografii a barvy. Figma insight školení bylo skvělým začátkem cesty k vzájemné synergii mezi týmy vývojářů a designerů. Jsme přesvědčeni, že přinese do našich projektů novou úroveň kreativity, efektivity a klientem oceněné kvality. V příštím workshopu se už budeme věnovat zpracovávání praktické úlohy ve Figmě a současně převedení do kódu.

‍

Prezentaci z prvního workshopu si můžete projít zde (jak jinak než Figma prototypem 😁).