Figma Insight: Budoucnost nejen pro Designéry

Těmi dalšími mohou být např. 

• ‍Š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 jsem se proto pustili do zásadních kroků k tomu, abychom tyto problémy na projektech co nejvíce minimalizovali a ušetřili tak práci a čas jak designérům, tak 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 nemusí být vždy.

‍

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í. V rámci prvního ze série workshopů Figma Insight jsme v týmu 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

V příštím workshopu se už budeme věnovat zpracovávání praktické úlohy ve Figmě a kódu současně.

Prostor pro výměnu názorů

První Figma Insight workshop nebyl jen prezentací teorie, ale rozběhl i 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 např. 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 … a to ideálně seskupených do jednoho setu”

Spolupráce na tvorbě dokumentace

Častým problémem, který vyvolává zbytečné “vášně” mezi týmy designérů a vývojářů 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ýmu je klíčové pro dosažení úspěšné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ě Design Systémů a formě podkladů. V dalších workshopech se již zaměříme na konkrétní zásadní témata, a to zejména názvosloví a standardizaci prvků napříč platformami iOS/Apple/Web. Podíváme se ale na zoubek také typografii a barvám.

‍

Nedávná prezentace byla pouhým začátkem delší cesty k vzájemné synergii mezi týmy vývojářů a designerů. Jme však přesvědčeni, že právě ta přinese do našich projektů novou úroveň kreativity, efektivity a klientem oceněné kvality.

‍

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