Aktualizováno 8. 5. 2022
Přijde mi, že snad každý měsíc se vypustí nový designový nástroj, který má dramaticky a revolučně změnit svět fungování nás všech. Každopádně jen čas ukáže, jestli obstojí. Momentálně světu designu dominuje jen pár velkých hráčů – Adobe XD, Sketch a Figma.
A právě Figmě bych rád věnoval tento článek, jelikož se stala mým hlavním nástrojem. Nejen na design, ale dokonce i tvorbu PDF dokumentů a faktur. Figma je dokonalý partner pro práci v týmu i pro solo freelancery. Podrobně se společně podíváme na to, jak ji využívám, její silné a slabé stránky i porovnání free a placeného tarifu.
Co je to Figma
Figma je cloud-based kolaborační design nástroj. Už tato podstata ji odlišuje od tradičních nástrojů, které máte většinou offline na svém počítači a maximálně ukládáte do cloudu hotové soubory. Figma je real-time, takže v ní na jednom souboru může dělat UX designer, copywriter a zároveň i project manager nebo kodér, který si exportuje styly. Už žádné soubory final-design-verze-3-final-final. Vše je v cloudu real-time.
Ikdyby Figma neměla jinou featuru než toto, je to pro mě i tak přelomová věc, že bych ji používal. Najednou ve Figmě může pracovat až 100 lidí na jednom projektu (osobně jsem tam měl vždy max. 10 lidí). Toto neskutečně urychluje celý proces launche produktu – o desítky procent, protože si můžete designovat jednu stránku, zatímco UI designer dělá na další a copywriter textuje ještě úplně jinou.
A to nepočítám nespočet pluginů, které doplňují funkce, které Figma nemá (mimochodem o těch nejlepších pluginech mám taky super článek). Drobné automatické animace jako má třeba Adobe XD.
Pokud se chcete naučit o Figmě víc, nebo se v ní naučit pracovat, podívejte se na můj online kurz – Figma MasterClass. Ten se věnuje Figmě od základů až po pokročilé techniky. Skvěle se tak hodí nejen pro začátečníky, ale i pro pokročilé uživatele Figmy. A pokud jste manažer, pak mám zaměřený kurz přímo pro manažery.
K čemu všemu Figmu používám
Jak jsem naznačil, Figma je opravdu všestranný nástroj. Z pohledu designu používám Figmu mimo tvorby wireframů a prototypů i na tvorbu person (připravil jsem pro vás balíček person zdarma ke stažení). Pro administraci v ní tvořím PDF dokumenty, protože mi to přijde rychlejší a intuitivnější než Photoshop nebo Ilustrator. Exportuji z ní i faktury, jelikož věřím tomu, že i faktura je vaše vizitka. Pokud tvoříte jednotky faktur měsíčně jako já, dal bych vždy přednost krásné šabloně před černobílou fakturou, která má ve spodní části jméno softwaru, který ji exportoval. Proto jsem pro vás vytvořil i šablony faktur jako součástí UX Kitu, mého digitálního produktu (nejen) pro UX designery.
V neposlední řadě ho používám i pro tvorbu moodboardů.
Výhody a nevýhody Figmy
Možnost rychlého dopsání textů přivede celý prototyp k životu. Dotáhne ho do bodu, kdy je pochopitelný pro klienta nebo uživatele při uživatelském testování. Už žádné nesmyslné Lorem Ipsum, které ničí design po x let.
Největší výhoda Figmy je i její největší nevýhoda. Pracovat se sice dá i offline, ale soubory se vám nenačtou z cloudu – pochopitelně. Samozřejmě se ani neukládají, takže pokud se to projektu přihlásí klient nebo copywriter, uvidí starou verzi. Projekty se dají otevřít, stáhnout předem a pak se na nich dá vesele pracovat.
Já sám pracuji často offline na začátku projektu, kdy na wireframu vyšívám jen já a nikdo jiný do něho nemá přístup. V pozdějších fázích projektu už pracuji jen online.
Figma má také úžasně jednoduché vkládání komentářů, což ušetří komunikaci a korektury s klientem.
Dále ukazuje pohyb myší přihlášených uživatelů. Skvělý pomocník při online callech a schůzkách, jelikož nemusíte sdílet svou obrazovku, a tak je hovor plynulý i na slabším internetovém připojení (třeba v čínské restauraci – mluvím z vlastní zkušenosti).
Autoanimate funkce vám pomůže rychle přidat drobné animace do prototypu mobilních aplikací. Figma má zároveň i vlastní mobilní aplikaci na procházení prototypů (více o ní zachvilku). Pohled klientů, když si na meetingu otevřou svůj telefon a vidím tam aplikaci včetně animací v rané fázi projektu, ještě než se začne něco kódovat a programovat, je k nezaplacení.
Nezmínil jsem ale kodéry, a teď je na to ten správný čas. Kodéři Figmu milují, protože jim ukazuje CSS jednotlivých prvků. Kódy barev, velikosti a vlastnosti fontů a dalších spoustu věcí, které jim ušetří hodiny na velkých projektech. Pokud váš “grafik” připravuje podklady ve Photoshopu, je na čase najít si nového designéra. A že Figmu milují grafici i vývojáři, vám potvrdí i můj článek – Figma očima grafika a vývojáře.
Z Figmy se dají exportovat všechny prvky v JPG, PNG, PDF a hlavně SVG, takže už žádné posílání ikon a obrázků na Dropbox. Všechno si kodér jednoduše vyexportuje dvěma kliky. To stejné platí i pro aktualizaci celé vizuální stránky projektu. Změní se ikona? Není problém, kodér si hned vyexportuje novou se stejným názvem, a ta se mu automaticky změní ve finální verzi webu. Už žádné případy typu ikona-sluzba-navrhwebu-verze-25-final-black-final-uz-opravdu-prosim.
Poslední vlastnost, kterou jsem už nakousnul, je práce s vektory. Možná budu znít jako neznaboh, ale práce v Ilustrátoru se mi zdá moc složitá na to, když potřebuji namalovat pár koleček nebo ikonku. Proto miluji jednoduchost (někdo by mohl namítnout prostředí pro blbce), kterou Figma umožňuje při práci s vektory. Pár čáreček a mám návrh ikonky na světě.
Pluginy doplňují vše, co základ Figmy neumí. Od vkládání dat z tabulek, přes mockupy, až po složité animace. Plugin store je obrovský. Většina je zdarma, ale některé známé firmy mají určité prémiové funkce placené. Každopádně jejich přínos je obří a za pár dolarů určitě stojí.
Kolaborace ve Figmě
Kolaborace je základní kámen Figmy. Od ostatních designových nástrojů ji převážně liší to, že je celá vytvořená na tomto základu. Rychlá a agilní práce na projektech pro celý tým. To však už víte, takže sem přidám pár svých postřehů, jak práci ulehčit a urychlit pro celý tým.
- Vytvořte si ideálně celý design systém (pokud to jde), a vycházejte z něho.
- Vytvářejte komponenty (components) jak jen to jde, ať se změny propisují automaticky všude. To poslední, co chcete, je měnit button na 150 framech (věřte mi, zažil jsem to).
- Rozdělujte projekt to stránek (Pages), ať každý člen týmu ví, na čem má kde pracovat.
- Pracujte s více projekty. Figma lze spustit i v browseru a pokud je projekt moc velký, tak se vám neotevře. V aplikaci jsem na tohle ale nikdy nenarazil.
- V placeném členství lze vytvářet Team Libraries.
- Pokud pracujete na interaktivním prototypu dělejte to na finální Page. Prototypy je složitější přesouvat v projektu.
- Groupujte a pojmenovávejte, co jde. Pamatujte na to, že už tu nepracujete sami. Je to projekt, do kterého má přístup celá firma. Chaos už tu nemá místo.
- Označujte to, na čem ještě pracujete. Často se mi stalo, že někdo začal korekturovat nebo se vyjadřovat k něčemu, co bylo hotové jen na 50 %. To poslední co chcete, je CEO, co se vyjadřuje a dělá závěry z něčeho, co byl třeba jen test nebo nedokončená práce.
- Pokud používáte nějaký plugin, dejte to vědět zbytku týmu.
- Když chcete odkazovat na konkrétní Frame, stačí kliknout pravým tlačítkem na Element, poté na Copy/Paste a Copy link. Ideální pokud na něco odkazujete v Jire nebo Asaně.
Free vs. Paid – jaký zvolit tarif Figmy
Figma je jeden z mála nástrojů, který se dá využívat naplno ve free režimu. Neomezuje totiž základní funkce pro neplatící uživatele. Pokud jste freelancer, který dělá na menších projektech, nebo používáte Figmu jen pro své osobní účely, je free verze dostačující. Free tarif tým má pouze 3 soubory a 3 stránky (na soubor), ale nově obsahuje neomezeně editorů (tato změna je platná od 21. dubna 2021). Můžete však pro každého klienta vytvořit nový tým, který může mít zmíněný počet souborů a stránek.
Já jsem ve free režimu pracoval skoro rok a s drobnými ústupky jsem nikdy nenarazil na problém. Když se ale portfolio klientů začalo rozrůstat, a hlavně se začal rozrůstat tým, co na projektech pracovat (o copywritery, programátory, kodéry atd.), byl čas přejít na placenou verzi.
Ke svižné týmové práci je potřeba pracovat Figma v placeném režimu. Každopádně jak jsem psal, každý utracený $ je ve Figmě využit na 120 %. Placený tarif vám tedy otvírá týmovou práci, Team Libraries, privátní projekty, neomezenou historii a samozřejmě neomezené projekty a počet členů na projektu.
Pokud tedy začínáte určitě vám bude stačit Figma ve free režimu, až budete připraveni se opřít do vaší UX kariéry, jednoduše switchnete na do placeného režimu a pokračujete vesele dál.
Velká výhoda placeného tarifu je, že máte všechny projekty a členy týmu pod jednou střechou a můžete jim přidávat práva, a jaký projekt mohou zobrazit. Ideální je, pokud mají do Figmy přístupy např. vývojáři od klienta a nechcete, aby viděli vaše další klienty.
Mobilní aplikace Figma
Figma má mobilní aplikaci, která se jmenuje Figma Mirror pro Android a iOS. Aplikace dělá přesně to, co je v jejím názvu. Jednoduše zrcadlí to, co děláte na PC. Můžete v ní jednoduše spustit prototyp aplikace nebo mobilního webu pro testování/prezentaci stakeholderům.
Na svém pracovním stole mám permanentně 2 zařízení iOS (starý iPhone SE – 320px a novější iPhone s větším displayem) a 2 zařízení s Androidem pro testování aplikací na všechna rozlišení. Bez appky by to bylo neskutečně zdlouhavé, protože se mi zde vše propisuje v real-time a hned vidím jestli je button vidět na první pohled na všech zařízeních.
Na první prezentaci výstupů vždy posílám v mailu návod pro všechny, jak si appku stáhnout a přihlásit se do ní. Všichni jdou na meeting už připraveni na testování a řešení konkrétních věcí. Vidět prototyp tak, jak ho uvidí koncový uživatel, je neskutečná výhoda. Vy si to určitě umíte představit, ale nenuťte management firmy, aby musel dělat to stejné.
Pluginy Figmy
Stejně tak jako většina platforem, i Figma se vydala cestou pluginů, které pro ni vytváří externí vývojáři. Rozpětí pluginů je obrovské – od chatu, přes komplexní animace až po zpracování tabulkových dat do designu jedním klikem.
O pluginech jsem napsal samostatný článek. Vybral jsem pro vás 28 těch nejlepších z pohledu designu, contentu a celkového workflow.
Rozhodně doporučím vždy před časově náročným taskem, jako je kopírování dat do prototypu, nejprve zkusit Googlit, jestli na to není už plugin. Většinou už totiž někdo před vámi řešil stejný problém a plugin na to připravil.
Animace Figmy
Do Figmy byla přidání funkce autoanimate, se kterou přišlo Adobe XD. Jednoduše vám tato funkce pomáhá animovat mobilní aplikace, protože základní animace uděláte jedním klikem. Různé přechody a podobně jsou zabudované do celého modulu prototypu a vy tak posunete prezentaci aplikace na nový level díky pár kliknutí myší.
Jak jsem psal výše, existují i pluginy na propracované animace přímo ve Figmě. Jeden z nich se jmenuje Figmotion. Osobně jsem ho nikdy nepoužil, ale 170k instalací v době tvorby tohoto článku poukazuje na to, že to nejspíš nebude ztráta vašeho času.
Znám pár UI designerů, kteří Figmotion používají na denní bázi a nemůžou si ho vynachválit.
