Photoshopból Figmára — A WIZZ Air-sztori

A Mitóban szerencsés helyzetben vagyunk, ugyanis nincsen kifejezett szoftver policy. Magunk határozhatjuk meg, hogy mivel szeretnénk dolgozni — persze bizonyos kereteken belül, ugyanis ezt be kell ágyaznunk egy bejáratott munkafolyamatba is –, de például olyan biztosan nem fordulhat elő nálunk a gyakorlatban, hogy egy munkaállomásra csak az admin jogokkal rendelkező rendszergazda telepíthet bármit. Ebből kifolyólag a GFX-en belül (is) sokféle szoftvert kipróbálhatunk, és végül azt vásároljuk meg, ami a legjobban kézre esik a személyes preferenciák vagy a projektoldali elvárások végett.

A kezdetek

Mikor a WIZZ redizájn előtti koncepció fázisban voltunk, a Photoshop volt a kézenfekvő megoldás, viszonylag gyorsan lehetett vele haladni, és minden felmerülő problémát meg tudtunk vele oldani. Később, mikor a következő lépésben finalizáltuk az oldalakat, akkor ezt egyelőre így is hagytuk. Külső fájlból behúzható smart objectek már léteztek, az artboardokat pedig akkoriban hákolta bele az Adobe a Photoshopba, megijedve a Sketch dinamikus térnyerésétől. Direkt írtam hákolást, mert borzasztóan erőforrásigényes és néhol bugos a működése a mai napig.

Egy ideig nem is volt semmi baj, azonban a munka jellegéből adódóan szépen híztak a Photoshop-fájlok, szaporodtak az artboardok, növekedtek a verziószámok az égig, nem is beszélve a Photoshop amúgy is gyalázatosan pocsékoló erőforráskezeléséről. Emiatt kénytelenek voltunk egy jóval kezesebben viselkedő, gyorsabban reagáló alternatíva után nézni, mielőtt végleg betemet minket a smart objectek és artboardok halmaza.

Mi legyen a következő lépés?

Először a Sketchet vizsgáltuk meg, hogy alkalmas lenne-e egy olyan jellegű munkafolyamatra, ami jó a designernek, megkönnyíti a munkát frontend oldalon és az ügyfél felé prezentálás sem egy túlbonyolított rémálom. A Sketchet amúgy sikeresen használtuk és használjuk a mai napig is a WIZZ iOS és Android appok tervezéséhez, de ebben az esetben a projekten lévő szervezeti felépítés sem könnyíti meg a közös munkát: a project manager, UX- és UI-csapat a Mitóban, míg a frontendes csapat az ügyféllel ül egy irodaházban.

Mivel a projekten több designer is dolgozik párhuzamosan különböző modulokon, ezért nem szerencsés mindent egy fájlban tárolni. Azonban a fájloknak (azokon belül is az artboardoknak) vannak közös elemeik, amiket jó lenne egy helyről menedzselni. Bármikor belefuthatunk olyan blokkok módosításába, amit végig kell frissíteni rengeteg artboardon és azok állapotain.

Ebből a szempontból viszont a Sketch nem (volt) erős. Akkoriban egyáltalán nem, a cikk írásakor a library funkciója hasonlóképpen működik, de arról, hogy felhőből húzzuk be ezt a külső fájlt, nekünk kell gondoskodni.

A Figma fejlesztése viszont ez idő tájt ért egy olyan fázisba, amikor már komolyan lehetett őket venni. A felhasználók figyelmét első körben a multitasking funkciójával ragadta meg — jópofa volt egy böngészőn keresztül egymás fájljaiban mókolni. Nem volt még ugyan fizetős modell, de folyamatosan lapátolták bele a pénzt, és egyre több menő kaliforniai startup és sztár UI-designer kapott rá és vitte jó hírét a közösségi csatornákon.

Elsőre ígéretesnek tűnt, így megvizsgáltuk, mely funkciói lennének nekünk alkalmasak:

1. Platformfüggetlen

Nem számít, milyen oprendszered van (Sketchnél ugye Machez vagy kötve, Windowsos verzió a láthatáron sincs), dolgozhatsz akár egy böngészőből, de a natív appját is letöltheted, ami ugyanolyan webview élményt ad, de nem a böngésződ zabál még több memóriát.

2. Multitasking

Több designer és frontendes is dolgozhat egy időben a projekten, a PM pedig pontosan látja, milyen állapotban vannak a kért taszkok.

3. Verziókövetés

Egy nagyon hasznos beépített funkció. Nem veszel el a verziószámozott .psd-k erdejében, és nem kell fizetned egy third party cégnek külön verziókövetésért. Képes vagy visszaállítani bármilyen régi állapotot.

4. Team Library

Bármelyik komponens elérhető az adott Teamen belül, ami globálisan megosztásra került, ez a külső fájlból behívható symbol megfelelője.

5. Code

Komplett CSS kódot tudsz copy-paste-elni az adott elemről, ikonokat, illusztrációkat tudsz közvetlenül svg kódba exportálni, szintén nem szükséges hozzá egy third party app.

6. Sketch file importálás

Már meglévő projektedet tudod nagyon könnyen adaptálni, nem tökéletes a funkció, de nagyon sokat segíthet, hogy maximum fixálni szükséges a dolgokat, és nem elölről kezdeni egy projektet.

7. Prototipizálás

Könnyen össze lehet hajítani benne egyszerű prototípusokat, és különböző usecase-eket megmutatni az ügyfélnek.

8. Copy-paste

Illusztrátorból borzasztó egyszerűen lehet másolni illusztrációkat, logókat, ikonokat, bármit.

És akkor nézzük az árnyoldalakat és a félelmeimet, amiket számba kellett venni egy ilyen nagy döntés kapcsán.

Először is ott a fájlformátum. Forrást csak .fig formátumban lehet elmenteni, ez ugye nemigen kompatibilis semmilyen más szoftverrel. Ha bármi para van, akkor nem tudom megnyitni semmivel a fájlt. Azonban, ha biztosan tudják üzemeltetni a rendszert, akkor egyáltalán nem szükséges a fájl exporttal bajlódni, hiszen minden ott van azonnal online, ráadásul verziókövetéssel együtt. Mindenesetre a biztonságos tárolás/üzemeltetés témára rákérdeztem náluk, de megnyugtattak, hogy minden szuperbiztonságos és backupolva van, meg minden (mondjuk mi mást mondhattak volna), szóval ezt fejben kipipáltam.

A másik félelmem volt, hogy aktív netkapcsolat nélkül nem elérhetőek azok a funkciók, amik miatt választanánk a Figmát. Ez mondjuk egy bérelt vonallal rendelkező irodában nem okoz akkora problémát — bár láttunk már csodát –, azonban ha úton vagyunk vagy valamilyen okból kifolyólag nem érhető el a net, akkor nem tudunk gyorsan fixálni dolgokat. Igazából ez a része főleg munkaszervezés kérdése, így nem igazi probléma, maximum esetenként okozhat kényelmetlenségeket. Pipa.

És az utolsó dolog, ami még megfordult a fejemben, hogy valamelyik riválisnak megtetszik a Figma, és szépen megveszi kilóra, ilyen is volt pár a történelem folyamán. Ez esetben két opcióval számolhatunk: amennyiben van hasonló szoftvere és csak userbázist/szakembergárdát akart vásárolni, akkor beszántja az egészet és beszórja sóval. Ha azonban nincs, és azért vásárolta meg, hogy még teljesebb szolgáltatást tudjon nyújtani az eddigi portfóliója mellé (pl. az InVisionnél lehetett volna — időközben ők inkább fejlesztettek egy sajátot), akkor semmi para, több pénz, stabilabb háttér, és mindenki vidáman vágtat tovább a naplementébe.

Amennyiben beszántják, mivel valószínűleg nem akarnak magukra haragítani több ezer szakmabeli usert, biztosan adnak valami alternatívát akár csak korlátozott ideig, amivel backupolhatunk/konvertálhatunk valami értelmes formátumba, így ez nem tűnt annyira súlyos veszélynek.

Vagy van a harmadik út, amit a Sketch is bejárt, azaz olyan gyorsan lesz népszerű, hogy egyszerűen nem éri meg eladni a terméket. Mindenesetre eddig minden jól alakul, beindult a fizetős modell, úgy tűnik egyre többen használják, és szépen érkeznek bele az új funkciók.

Mindezeket összevetve úgy döntöttünk, hogy beleugrunk a buliba, és azóta sem bántuk meg, a szolgáltatás gördülékeny, soha nem volt fennakadás, mióta használjuk, és rengeteg ponton egyszerűsíti le a napi munkát.

Az utóbbi időben kezd bedurvulni a verseny a UI-tervező eszközök piacán — Sketch, Adobe XD, Figma, InVision Studio, Framer –, az ember csak kapkodja a fejét, és egyre nehezebb eldönteni, közép- vagy hosszú távon melyik szoftver lesz a helyes választás. Hasznos lehet azonban főként a projekt oldaláról megközelíteni a kérdést, és azt választani, ami a legjobban megfelel az adott projekten alkalmazott folyamatok szempontjából. Mi a Mitóban ezen filozófia mentén haladunk, és mivel mi dönthetjük el, mivel szeretnénk dolgozni, ezért örülünk, hogy egyre szélesedik a paletta, amiből végül kiválaszthatjuk az egy igaz szoftvert.

Rólunk

A Mitóban az ügynökségi munkák mellett komoly fejlesztéseket is végzünk, büszkék vagyunk rá, hogy többek közt az OTP Bank, a Magyar Telekom, a Deutsche Telekom, a WIZZ Air, a Szerencsejáték Zrt., valamint az izlandi lottótársaság számára szállíthatunk webes és mobil megoldásokat.

http://mito.hu és http://mito.hu/jobs