Figma je podle mě nejlepší design nástroj na světě. Dopodrobna jsem ji popsal v samostatném článku Proč je Figma dar z nebes. Pár z vás se ale ptalo, jak se na Figmu koukají i další role v týmu. Hlavně vývojáři a UI designéři / grafici. Proto jsem vyzpovídal Lukáše Hejče (hlavního brand designera skupiny LMC) a Josefa Rouska (Lead developera Digismoothie), aby vám řekli své pohledy na Figmu a přidali i nějaké tipy pro začínající vývojáře a UI designery.
Pokud se chcete s Figmou naučit lépe pracovat, připravil jsem pro vás komplexní online kurz, který prochází všechno od úplných základů až po složitější témata jako jsou např. design systémy. Více o Figma online kurzu.
Lukáš a Josef
Ještě než se vrhneme na Figmu, je dobré trošku stanovit kredibilitu kluků. Nehledal jsem nějaké juniory, kteří pracují s Figmou první den. Oba považuji za profesionály ve svých oborech.
Lukáš je hlavní grafik pro LMC (pod které patří: Jobs.cz, Prace.cz nebo třeba Seduo.cz). Každý den dohlíží na to, aby se celá skupina držela svého brandu a design systémů. Je to jeden z lidí, díky kterým každý zná brandy LMC, i když o samotném LMC nikdy neslyšeli. Mimo LMC pracuje jako konzultant pro největší české e-shopy a finanční instituce, kde pomáhá nastavit nové směry značek těchto firem a přijít na trh s něčím, co si každý zapamatuje a bude mu vlastní.
Josef je Lead Developer v digitální agentuře Digismoothie, který má za sebou několik úspěšných aplikací pro jedno z nejrozšířenějších e-shopových řešení na světě – Shopify. V rámci Digismoothie se podílí na tvorbě aplikací, které používají tisíce e-shopů z celého světa. Vedle globálních aplikací vytvořil i několik aplikací pro český trh. Mezi ně patří napojení na Zásilkovnu nebo Fakturoid. Díky jeho práci se Shopify hodně přiblížil i českým podnikatelům, protože bez napojení na logistickou síť Zásilkovny by si dneska moc lidí nedokázalo představit fungovat.
Figma z pohledu UI designera / grafika
Osobně vidím velký rozdíl mezi UI designerem a grafikem. UI designer navrhuje User Interface, to znamená weby a aplikace. Grafik dělá tiskoviny, bannery atd. V Česku se to často zaměňuje, nebo se pojem UI designer vůbec nepoužívá (mimo designovou komunitu). Začali jsme jednoduchou otázkou: Proč si začal vůbec využívat Figmu?
„Mohl bych říct – Šimon říkal. Začal jsem ve Figmě pracovat, když jsi mi ji ukázal na jedné zakázce.“
Před Figmou Luky pracoval, asi jako každý, s Photoshopem, ve kterém se většina webů tvořila před příchodem specializovaných nástrojů pro tvorbu webu. Po Photoshopu to byl chvilku Sketch, kde ale narazil na problém – jeho omezení na MacOS a ten neměl každý. Posledním nástrojem před Figmou bylo Adobe XD, protože je z rodiny Adobe, tak to byla, jako pro většinu grafiků, jasná volba.
„Jsem na návštěvě u někoho a hoří zakázka, tak prostě sednu a Figmu otevřu v browseru. Tohle je neskutečná výhoda. Nepotřebuji výkon a ani svůj počítač.“
Kolaborace je hlavní část Figmy, kterou si většina lidí neuvědomuje než ji vyzkouší. Možnost pracovat ve více lidech na jednom souboru se ve větších firmách ukazuje jako nezbytnost v dnešním remote nastavení fungování týmů. Týmům taky pomáhají pluginy, kterých má Figma stovky, ne-li tisíce.
„Figma má pluginy na všechno. Od zarovnávání elementů až po exporty.“
Pluginy do Figmy pro grafiky / UI designery
Mezi hlavní pluginy a externí appky Luky považuje tyto. Věřím, že vám poslouží pro inspiraci:
„Je appka na prezentaci celého design systému. Appku propojíte s Figmou a ona si pak sama aktualizuje všechny změny v design systému, co tam postupem času děláte. Ideální pro spolupráci napříč odděleními nebo s externí agenturou.“
„Při tvorbě brandů ideální plugin. Ukazuje mi to, jak dané designy uvidí lidi s vadou zraku. Jen tak se dokážu ujistit, že design bude přístupný pro všechny.“
„Zarovnání elementů do pevného gridu. Už žádné elementy na pozici 125.23.“
„Nehledejte už nikdy ikony. Samozřejmě do finálního designu je pak přemalovávám a tvořím custom ikony, ale pro první nástřel grafiky super.“
Momentálně připravuji článek na všechny pluginy, které se ve Figmě vyplatí využívat. Pokud vás toto téma zajímá přihlaste se to mého newsletteru, ať vám nic neuteče.
“Ne vždy můžeš k designu přistupovat strojově. Někdy musíš upravovat spacing okem designera, aby to opticky vypadalo líp. Bylo to, jak já říkám, hezčejší.“
Pro mnoho grafiků může být Figma správný start, jak se posunout o kousek dál a rozšířit si portfolio nástrojů, které ovládají. Pamatuji si, že Figma na mě působila strašně “omezeně”. “Jak můžu navrhovat, když mám k dispozici jen čtverečky a text… “ říkal jsem si. Jenže vy ve výsledku nic víc nepotřebujete. S Lukym jsem se chtěl zaměřit i na to, co by začínajícím grafikům doporučil. Přeci jen má přes 20 let zkušeností.
„Přestat vymýšlet pseudo kreativní grafický orgie a začít dělat věci jednodušeji. Figma vám v tomto pomáhá. Nepustí vás do šíleností jako třeba Photoshop.“
Díky Figmě se zaměřujete mnohem méně na grafické elementy, se kterými si můžeme ve Photoshopu hrát do nekonečna. Díky její “jednoduchosti” sem prostě dáte čtverec, do kterého posléze doplníte grafiku a mnohem více se věnujete důležitějším věcem. Hierarchii fontů, správnému gridu a rozložení elementů. Prostě posunete svou práci o level výš od zkrášlování buttonů ke komplexnímu přemýšlení nad webem jako živým organismem.
Mimo tohle je Luky obrovský fanda skočit do něčeho nového po hlavě a začal ve Figmě hnedka kreslit projekt. Jak sám říká:
„Miluju, když mě za učení ještě někdo platí.“
Po prvním projektu začal hodně koukat na online kurzy a YouTube videa. Vždy si vzal část Figmy, kterou zrovna potřeboval a nastudoval si co nejvíce dostupné teorie, než se pustil do praxe. To ho dle jeho slov posunulo z grafika do UI designera se základní znalostí kódování. Shodou náhod mi Josef řekl to stejné – že designer, co rozumí kódu, je správný designer. Je hezké vidět, jak obě strany dojdou ke společnému pohledu na to, co by měli designéři dneska ovládat.
„Design systémy tvořím vždy za pochodu projektem. Nikdy je netvořím předem.“
Design systémy jsou pro mě asi největší posun v designu, který jsem se díky Figmě naučil využívat. Mít předem stanovené komponenty, které jsou ideálně i nakódované je mokrý sen každého designera. Všechny nové části webů a aplikací pak jen skládáte jako lego a vše má kontinuitu.
Pokud máte větší projekt, který má neustálý vývoj, určitě doporučuji vytvořit design systém. Celé kapitole o design systému se věnuji ve svém Figma online kurzu, kde vás provedu celou jeho tvorbou.
Luky vždy první kreslí základní stránky. Na e-shopu to je detail produktu, výpis produktů a homepage. Z toho vytáhne všechny elementy a začne přemýšlet nad kompletní hierarchií fontů. Samozřejmě mu k tomu do velké míry pomáhá dobře připravený wireframe od UX designera, který danou hierarchii nastíní přes celý web. Poté vezme stránky, ze kterých vycházel a odladí je podle nového design systému.
Z design systému jsme se hezky dostali do části rozhovoru o předávání podkladů od UX designera právě UI designerovi. Strašně důležitá část, na kterou se často zapomíná.
„Ideální je pro mě systém, co máme nastavený mezi sebou. Vždy mi dodáš wireframy všech stránek na desktop, tablet a mobile společně s povídáním v Loomu.“
Ach ano, Loom. Pro ty kdo Loom neznají, určitě si přečtěte můj článek o Loomu. Ušetří vám to desítky hodin nedorozumění a špatně předaných podkladů. Věřím, že podklady by vždy měly být předány profesionálně, to znamená dobře pojmenované groupy a elementy. K tomu je vždy dobré dodat vysvětlení a popsání toho, proč jsem se tak rozhodl a jak se daný element chová. To aby měl UI designer přehled o tom, co daná část bude dynamicky dělat, je nesmírně důležité proto, aby mohl navrhnout vizuální řešení, které bude fungovat v každé situaci.
Ptal jsem se Lukyho, jaké další appky mimo Figmy používá ve své flow. Je to samozřejmě Photoshop na úpravu fotek, klíčování a retuš. Na ikony používá Illustrator (ve Figmě tvoří jen první nástřel ikon) a všechno rozpohybovává v After Effects.
Figma z pohledu vývojáře
Pohled vývojáře na Figmu je neskutečně zajímavý, protože se často setkávám s tím, že nástroje dělané primárně pro vývoj, jsou diametrálně jiné než nástroje pro designery. Celkové UX je jiné, protože jsou to dvě úplně odlišné skupiny lidí. Většinou se pak stává, že i když to design týmu přijde jako nejlepší aplikace, vývojový tým ji odmítá a nepracuje se jim v ní dobře. Rozhovor s Josefem mě však ujistil, že Figma je správná volba i pro váš vývoj.
„Pro programátory je Figma nejlepší nástroj, se kterým jsem kdy pracoval.“
Hned na začátku jsem se chtěl zaměřit na další nástroje a jak si Figma stojí oproti svým rivalům. Josef používal pro vývoj i Sketch a samozřejmě Photoshop, protože dříve prostě nic lepšího nebylo. Postupně přesedlali s celým týmem na Figmu díky dvoum hlavním důvodům – kolaboraci a pricingu.
Nikdy mě nenapadlo, že vlastně vývojářům nemusíte platit editorská práva, když jsou podklady dobře připravené. Pokud máte velký tým, tak mít read only (které je zadarmo) může ušetřit desetitisíce ročně za nástroj, ze kterého si vývoj s troškou nadsázky vytahuje pouze styly a spacing elementů.
„Možnost komentovat design přímo ve Figmě bez nutnosti ho exportovat do dalšího nástroje bylo obrovské plus.“
Trošku jsme nakousli i nedostatky Figmy pro vývojáře, protože žádný nástroj není dokonalý. Jediný problém se vyskytl v importu komponent od Shopify, které byly zřejmě designované na MacOS a na Windowsech se rozpadly fonty, i když byly všechny nainstalované tak, jak měly. Problém design aplikací a fontů je tu už od samého začátku těchto nástrojů. I když daný font můžete mít stažený, občas je z jiného zdroje. Font se jmenuje jinak nebo naopak máte pod stejným jménem třeba jiný řez písma, a to rozhodí celý design komponent. Toto si troufám říct, že není úplně chyba Figmy, ale je dobré na to myslet, pokud používáte design systémy někoho jiného.
„Pokud jste začínající vývojář, zkuste najít systém v daném designu. Palety barev, styly písem a tak dále. Z toho si pak vytvořte komponenty, které používejte.“
Design systém byla další oblast, kterou jsem chtěl s Josefem rozebrat. Naštěstí poslední dobou už většina firem pochopila k čemu je a proč je dobré ho mít připravený. Design systém by měl vždy reflektovat i nakódované komponenty, které se poté používají pro vývoj.
Je tedy dobré mít při tvorbě design systému po ruce a kodéry a netvořit ho jen s grafikem. Tohle byla myšlenka, se kterou určitě začnu pracovat více do hloubky, protože dříve jsem byl zvyklý si design systémy tvořit pouze s UI designerem a Brand designerem. Přizvat vývoj do téhle části určitě ušetří čas a náklady na straně klienta.
Obrovská výhoda Figmy je možnost promítnout celý design systém více projekty a automaticky ho upravovat jedním klikem přes x stránek nebo dokonce webů. Díky kolaboraci v cloudu už není potřeba nové změny v systému vždy stahovat a mít soubory designsystem-final-final-3. Design systém tak neumře v zapomnění, ale může se pořád vyvíjet a reflektovat potřeby vaší firmy.
„Máme štěstí, protože máme k dispozici perfektní design systém od Shopify. Celý systém je připravený jak ve Figmě, tak v Reactu a my si z toho jen skládáme UI.“
Předání podkladů vývoji bývá často kámen úrazu. Osobně preferuji předávat podklady společně s Loomem. Tohle bylo téma, na které mě zajímal Josefům názor asi nejvíc z celého našeho rozhovoru. Jak sám řekl:
„Formát předání podkladů od designeru k vývoji je můj celoživotní boj.“
Designéři často neznají dané médium. Neví, jak se s designem pracuje poté, co ho odevzdají, a to zbytečně prodlužuje a prodražuje celý vývoj. Občas kvůli tomu trpí přístupnost a použitelnost finálního produktu.
Ideální je blízká kolaborace designéra a kodéra / programátora. To, co může designerovi zabrat připravit 10 minut, může kodérovi zabrat hodiny práce.
„Pokud můžete zvolit designera, co má zkušenost s kódováním, vyberte si jeho. Znalost prostředí, ve kterém se pak design implementuje, je stěžejní pro rychlou implementaci.“
K práci s designem se dříve používalo mnoho aplikací jako je Avocode, Zeplin, Invision atd. Ptal jsem se Josefa, jestli něco takového používají, protože to beru tak, že Figma tyto další nástroje trošku zprovodila ze světa.
Bohužel pro vývojáře Avocode, Zeplin, Invision si i Josef myslí, že Figma zvládne všechno v jednom balíčku. Obecně problém těchto nástrojů je často to, že ukazují CSSka v určitém omezeném režimu. Ukazují absolutní pozice a tím pádem se z nich vyplatí vytahovat jen fonty, barvy, border-radius atd. Nikoliv spacingy.
Figma z pohledu UX / Product designera
Pokud vás zajímá můj pohled odkážu vás na svůj původní článek o Figmě, kde všechno popisuji dopodrobna – Proč je Figma dar z nebes.
Shrnutí Figmy
Jak vidíte – Figma je nástroj, který poslouží UX designerům, grafikům až po kodéry a programátory. Základní verze je ZDARMA, takže si ji klidně vyzkoušejte a zkuste si ji osahat. Pokud vás Figma zajímá více a chcete si prohloubit vaše znalosti, tak určitě dejte chvilku mému online Figma kurzu. Probírám tam vše od úplných základů až po složitější témata.
