Nástroje

Nová appka od tvůrců Figmy: FigJam

Osnova

Figma je v posledních letech jeden z nejpoužívanějších design nástrojů na tvorbu webů a mobilních aplikací. Její obliba mezi designery stoupá každým dnem. Důkazem toho je i narůstající měsíční návštěvnost mého článku o Figmě.

Když jsem dostal do inboxu informaci o nové appce od tvůrců Figmy, hned jsem věděl, že to bude krásný přírůstek do skupiny design nástrojů, které používám každý den. FigJam staví na základech Figmy, což je spolupráce týmů. Je to taková online nástěnka. Samotný nápad není nijak přelomový. Možná znáte např. Miro, které je hlavním hráčem na poli online kolaborativních whiteboardů. Napjatě jsem čekal, kdy Figma začne rozšiřovat svůj design Suite aplikací po vzoru Adobe – a už je to tady. V tomhle článku popíšu své první dojmy z Bety, která se spustila teprve před pár dny.

Co je FigJam a k čemu slouží

FigJam je online nástěnka, která má pomoci vám a vašemu týmu spolupracovat na projektu v různých fázích. Většinou jsou to fáze před samotným designem, na který použije Figmu. Jedná se tedy hlavně o Brainstormingy, User Flows, Diagramy atd. Představivosti se samozřejmě meze nekladou a ti co četli můj článek o Figmě ví, že Figmu používám opravdu na všechno... i na tvorbu faktur. Věřím, že s FigJamem to bude dost podobné a už vidím, jak si do toho někteří designeři píší i seznam s nákupem, dělají SWOT analýzu, proč by měli už konečně začít pracovat na svém vysněném projektu nebo vytvářejí moodboardy přestavby bytu.

Momentálně jako online nástěnku používám Miro, takže budu vycházet z toho, k čemu Miro používám a pokusím se to přenést do FigJamu. Zároveň jsem tento seznam doplnil o pár bodů od Paty (doporučuji její blog), která používá Miro s klienty na denní bázi. Konkrétně se jedná o tyto scénáře:

  1. Brainstorming
  2. MindMapa (Workmapa)
  3. Organizační struktura týmu pro Stakeholdery
  4. Basic timeline projektů
  5. User Flow
  6. Retrospektiva
  7. Persony
  8. Customer Journey
  9. Basic Wireframy
  10. Moodboardy

Onboarding a pracovní plocha FigJamu

Už na začátku musím přidat bod FigJamu nad Mirem a to za to, že se spouští ze stejné aplikace jako Figma. S tímhle bodem nemůže Miro bojovat. Je pohodlnější, když se všechno spouští z jednoho ekosystému a nemusíte tak přepínat mezi aplikacemi. Vaše projekty ve FigJamu jsou zároveň vedle projektů ve Figmě na jedné nástěnce. Tím pádem máte celý projekt pohromadě a týmu se bude se všemi materiály lépe pracovat.

Hned po vytvoření nového souboru se mi FigJam otevřel v novém UI, které nemůžu úplně přirovnat k tomu ve Figmě. Trošku mě překvapilo, jak je UI rozdílné. Když vezmu např. produkty od Adobe, mají velice podobné UI a vy víte na první dobrou, kde co hledat. U FigJamu tomu tak není. 

Online kolaborační nástroj od Figmy – FigJam

Onboarding byl jinak bez problémů, protože se mi hned nabídl krátký tutoriál, kde byliy ukázány všechny pilíře aplikace a jak s nimi pracovat. Malé plus na víc má FigJam za to, že v tutoriálu byly i klávesové zkratky, které vám rapidně zrychlí práci v jakémkoli nástroji.

FigJam vám dává k dispozici pouze hrst nástrojů, které můžete použít jak se vám zlíbí. V základu máte přístup k:

  • Fixe (Marker), 
  • Tvarům (od kolečka, přes čtverec až po trojúhelník)
  • Lístečkům (Sticky notes). 

Tyto hlavní nástroje doplňují další minoritní jako jsou:

  • Text, omezený editor textu s výběrem barvy, pár stylů, zarovnání atd. 
  • Spojovníky (Šipky)
  • Knihovna komponent, kterou lze synchronizovat s vaší knihovnou ve Figmě
  • Razítka – takové předvybrané emotikony. Jsou zde věci jako palce nahoru, dolů, srdíčka. Ideální pro rozhodování se v týmu mezi více možnostmi. Nemusíte se překřikovat při hlasování, stačí přidat palce a máte jasno, který návrh vede.
  • Obrázky – samozřejmě jde do FigJamu nahrát i ty.

FigJam vs. Miro: Scénáře a porovnání

FigJam je teprve v beta verzi, takže jsem očekával podstatně osekané funkce než nabízí konkurenční Miro, které aktuálně používám. Zároveň to ale nemůže být omluva. Nikdo nechce používat horší nástroj s vidinou toho, že jednou v budoucnu možná bude použitelnější, než jeho aktuální řešení. Podrobil jsem tedy FigJam pár scénářům, které jsem zmínil výše a takhle obstál...

Než se pustíme do podrobnějšího rozboru, mám pro vás jednoduché srovnání, pokud nechcete číst dopodrobna všechny možné scénáře. 

Máte rádi nové nástroje a pocit z jejich objevování vám dělá radost? Zvolte FigJam. Pokud chcete rychle udělat práci z předpřipravených šablon, zvolte Miro.

FigJam je v betě a jde to vidět hned při tvorbě projektu. Miro obsahuje desítky, né-li stovky předpřipravených šablon pro všechny různé scénáře. Věřím, že toto FigJam časem dožene, ale realita je taková, že aktuálně to nemá. Pokud tedy chcete jen rychle skočit do nástroje a udělat práci za 10 minut, rozhodně zvolte Miro.

// Edit FigJam už má plno templatů, které vytvořila komunita sama. Pořád, ale musíte složitěji hledat ten správný a nejsou tak dobře udržované jako je má Miro.

Scénář 1 – Brainstorming

Troufám si říct, že pokud používáte Miro čistě na týmový brainstorming, bude vám FigJam vyhovovat taky. Je možné, že ještě více díky rychlé funkci přidávání emotikonů a samolepek. Každého potěší dostat srdíčko za svou práci. Tahle “blbost” neskutečně pomohla online testovacímu brainstormingu, který jsem přes FigJam vedl. Nemusíte se překřikovat, co se komu líbí nebo nelíbí a kdo volí takovou či makovou variantu. Jednoduše to dáte ostatním v týmu vědět samolepkou nebo emoji. 

Miro má taky Voting systém, ale dle mého názoru je o dost sušší a při permanentním Home-officu, který se pro některé stal standardem v roce 2021, je odlehčená atmosféra více než vítaná.


Hodnocení pomocí emoji ve FigJamu

Scénář 2 – Mindmaping

Mindmapy jsou jedním z mých nejoblíbenějších nástrojů na začátku projektu. Používám je u plánování, content map na můj blog nebo při tvorbě workmap do proposalu pro klienty.

Figma na to nikdy nebyla designovaná a tvořit tam mindmapy bylo téměř nereálně, respektive to nedávalo smysl z časových důvodů. Tvorba byla vždy složitá, ale jak jsem psal Figma pro to nikdy nebyla vytvořena.
FigJam konečně tuto díru zalepil a nyní můžete tvořit mindmapy jako na běžícím páse. Každopádně to pořád není tak jednoduché jako v Miru. FigJam obsahuje diagram template, který můžete používat, ale je to hodně kopírování objektů a celý proces není tak intuitivní a hlavně rychlý jako v Miru.
Snad to FigJam dotáhne do stavu, které používá Miro, protože tohle je jeden z hlavních důvodů, proč jsem vůbec začal Miro používat. Momentálně bohužel musím říct, že než se toto dotáhne budu muset zůstat u Mira.

Scénář 3 – Persony

FigJam umí rychle importovat všechno, co máte ve Figmě. Jelikož tvořím své persony výhradně ve Figmě (připravil jsem pro váš šablony, které si můžete zdarma stáhnout) je možné je rychle nahrát do FigJamu a dále s nimi pracovat. Osobně vidím FigJam při tvorbě person jako skvělé místo na sběr feedbacku od zbytku týmu. Všichni můžou přidávat již zmíněné samolepky a komentáře k částem, se kterými nesouhlasí. Ideální pomocník do celého procesu.


Šablona persony Šimon Jůn

Pohled od Paty: Scénář 4 – Wireframy

Pokud vzniká jakýkoli nový projekt, pilot, lander – you name it, začínali jsme společně s UX designerem v Miru. Po základním researchy a branstormingu přišly na řadu většinou wireframy. Kouzlo Mira pro mě je asi vždycky v tom, že díky x předvytvořeným šablonám zkrátka použijete to, co zrovna potřebujete. Na jedné “nástěnce” jsme tak vedle sebe měli často porovnání konkurence, data, user flow, customer journey, persony i zmiňované wireframy. Všechno pěkně pohromadě. Na základní fungování tak určitě stačí. Feedback k wireframům jsme si dávali pomocí komentářů nebo lístečků – osobně mám raději komentáře, protože jsou přehlednější.

Na první pohled má FigJam všechno to, co má Miro. Věřím, že svou nabídku šablon časem rozšíří. Musím se přiznat, že je pro mě FigJam asi intuitivnější a baví mě i její čistý design. Osobně se asi nedokážu rozhodnout pro vítěze, ale tuším, že příští projekt už budu tvořit ve FigJamu a ne v Miru.

Budoucnost a cena FigJamu

Na závěr bych otevřel rád dvě důležitá témata, a to je budoucnost nástroje a pricing. Nikdo nechce používat nástroj, který se po chvilce přestane updatovat nebo úplně skončí. Toto naštěstí u FigJamu nehrozí, protože za ním stojí Figma. Budoucnost vidím v šablonách, které budou připravené na všechny možné scénáře a na implementaci pluginů. Když Figma umožnila implementovat pluginy, rozšířilo to její možnost na skoro nekonečno možných scénářů. To stejné si dokážu představit u pluginů do FigJamu. Budoucnost je tedy z mého pohledu jen částečně nastíněna tím, co momentálně obsahuje Figma. Je pravděpodobné, že vývoj aplikací půjde ruku v ruce stejně jako tomu je např. u Adobe Suite.

Pricing je však již pevně daný. FigJam bude v roce 2021 kompletně zdarma a v roce 2022 přijde následující pricing model. Z tohoto lze usuzovat, že beta bude trvat ještě určitě do konce roku 2021. FigJam pricing je rozdělen do 3 skupin stejně jako tomu je u Figmy:

  • Free (zatím to vypadá, že je to pouze na koukání do FigJamu. Nevím jak to bude s možností komentovat, přidávat emotikony a samolepky).
  • Professional: $8 za editora/měsíčně při platbě na rok (nebo $10 při platbě měsíčně).
  • Organization: $15 za editora/měsíčně při platbě na rok.

$10 měsíčně se nezdá jako velká částka, ale celá Figma, která je dle mého názoru mnohem výkonnější a přínosnější nástroj, stojí $15 při měsíční platbě. Nevím, jestli z FigJamu dostanete přínos, který bude srovnatelný s přínosem Figmy pro vaší firmu či studio.
Tak i tak samozřejmě budu FigJam platit. Celý tým bude rozdělený na ty, co mají placený přístup do Figmy a do FigJamu, takže je možné náklady snížit tím, že prostě lidem, co nebudou FigJam používat jako editoři, dáte jen Free tarif.

Figma Kurz

Pokud vás Figma nebo FigJam zajímá více a chcete se podívat pořádně pod pokličku oboum aplikacím, mám pro vás svůj komplexní online Figma kurz. Každý kapitola kurzu se věnuje jiné části Figmy a dopodrobna rozebírá všechny nástroje, workflow a moje doporučení, jak s nástrojem pracovat. Ve Figmě pracuji od roku 2018 a za tu dobu jsem v ní vybudoval nespočet webů, e-shopů a dalších maličkostí jako jsou např. šablony na persony, které si můžete zdarma stáhnout.