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í.
Naučte se design

###### Online kurzy

###### Mentoring

###### Povídání nejen o designu

Produkty

Naučte se design

###### Online kurzy

###### Mentoring

###### Povídání nejen o designu

Produkty

###### Produkty

# Figma očima grafika a vývojáře



  
  


Osnova

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?

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.

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.

### 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.

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í.

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á:

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 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á.

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.

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ů.

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.

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.

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:

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.

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.

##### Tagy

### Největší online kurz na Figmu v Česku

MasterClass jsem postavil jako komplexní hub vědomostí. Najdete v něm vše o Figmě a práci v ní. Od jednoduchého nastavení po složitější prototypy a aplikace.

Kurz obsahuje 14+ hodin contentu. Konkrétně 127 videolekcích, díky kterým se rychle naučíte to, co zrovna potřebujete.

#### Osnova

###### Blog

## Další články

#### Newsletter

### Moje know-how do vaší schránky.

Přihlaste se k newsletteru a získejte best practices a tipy z oblasti UX & Product designu a života designera.

Jméno *

E-mail *

Let’s talk now!

Vyplňte prosím všechna pole. Nebo si zkontrolujte, jestli máte e-mail ve správném tvaru.

###### FAQ

## Na co se nejčastěji ptáte

Na jakých projektech nejčastěji pracujete?



Zaměřuji se především na e-commerce projekty nebo nástroje, které úzce pracují s e-commerce zákazníkem.

E-commerce se věnuji přes 6 let. Za tu dobu jsem spolupracoval s několika velkými, mezinárodními klienty na redesignu, výzkumu, expanzi a mobilních aplikacích.

Jaký je typický timeline projektu?



Stejně jako u ceny i timeline je jiná projekt od projektu. Poté co mě kontaktujete se snažím do pár dnů naplánovat kick-off meeting.

Na něm probereme váš projekt dopodrobna – očekávání, budgety, termíny a vše potřebné. Po meetingu už vám budu schopný vykopnout timeline projektu, pod kterou se podepíšu.

Jak vypadá celý design proces?



Ať už se jedná o design nového produktu (webu, e-shopu, mobilní aplikace) nebo redesign, vždy postupuji takto:

- Kick-off meeting

- Proposal

- Úvodní briefing

- Analýza dat

- Výzkum

- Návrh řešení

- Validace řešení

- Dohled na implementaci

Jaká je vaše hodinová sazba?



To se odvíjí podle toho, jestli se jedná o jednorázovou konzultaci nebo dlouhodobý projekt.

- Za konzultaci se má sazba pohybuje od 3 500 Kč / h.

- Školení přesně pro vaše potřeby připravené na míru (nezáleží na poštu účastníků) se pohybuje kolem 50 000 Kč. Zahrnuje kick-off meeting, přípravu školení na míru a celý den školení.

- Hodina mé práce na projektu se pohybuje od 2 500 Kč / h.

Vše je ale o detailech a domluvě. Každý projekt naceňuji individuálně a předem. Vždy tedy víte, do čeho jdete.

Kdy můžeme začít spolupracovat?



Vše záleží na mém aktuálním vytížení a náročnosti projektu. Vždy se snažím do pár dní od doby kontaktu naplánovat kick-off meeting, kde vše probereme dopodrobna.

Je možné si objednat školení na míru?



Ano. Momentálně nabízím 2 školení – Figmu a zákaznický výzkum.

‍

Zjistil jsem, že obecná školení nejsou zdaleka tak efektivní jako ta na míru. Proto si nejdříve sednu s celým týmem a dívám se detailně na to, co je trápí a jak zlepšit jejich workflow.

‍

Poté potřebuji čas na přípravu školení, aby odpovídalo potřebám vaší firmy a týmu. To mi zabere kolem 2 až 3 týdnů.

Po školení nabízím i další support nebo pravidelné check cally, kde společně sledujeme implementaci nově nabytých vědomostí.

## Připravujete projekt?

Copyright © 2024 I don't know OÜ