Sketch vs XD vs Figma: vajon ki nyeri a UI háborút?

A manapság alkotó UX/UI designerek nincsenek könnyű helyzetben, ha szoftverválasztásról van szó, ugyanis ellepték a piacot a (jobbnál-jobb?) különböző digitális tervezői szoftverek. A Cheppers UX csapatánál is előfordult átmenetileg egy olyan körülményes és nem fenntartható helyzet, hogy négyen használtunk három különböző alkalmazást. Döntenünk kellett hát, a munkáink könnyebb átjárhatósága érdekében is, hogy végül melyik mellett tegyük le a voksunkat.

A kezdetekben azért nem lubickoltunk ekkora alkalmazás palettában. Emlékszem még azokra az időkre, amikor Photoshopban tologattuk a pixeleket, voltak akik Illustratorban terveztek jobb szoftverek híján. Félreértés ne essék, alkalmas mind a két program felhasználó felületeket (user Interface) létrehozni, viszont nem kifejezetten arra való.

Az webes és natív alkalmazások előretörésével, az érintőképernyők fejlődésével párhuzamosan a designereknek is egyre többet kellett tervezniük digitális felületekre.

Minél nagyobbra nyílt ez a piaci rés, egyre nyílvánvalóbb volt, hogy előbb vagy utóbb, de valaki be fogja tömni ezt a tátongó hasadékot.

Gyors áttekintés

Sketch

A Bohemian Coding volt először a megfelelő helyen és időben, hogy kitöltsék ezt az űrt, fejlesztői csapatuk áll ugyanis a 2010-ben megjelent Sketch mögött. Azt gondolom, hogy a Sketch berobbanásától számíthatjuk az első olyan mérföldkövet, ami meteorként vágódott be az addig vegetáló digitális sivatagba. Akkora detonációt okozott ez a becsapódás, hogy az Adobenak 7 évébe tellett magához térnie, ennyi idő után jelent meg ugyanis hivatalosan a (hibamentes) Adobe XD. De róla egy picit később. A Sketch Elsősorban UX/UI designerek, product designerek és hobbi vektorgrafikus művészek számára született.

A konkurensekhez hasonlóan a Sketch is egy vektor alapú szoftver. A felhasználói felületet vizslatva már-már zavarba jöhetnénk, ha előtte sokáig pixel paranoidkodtunk Photoshopban, ugyanis az említett szoftverhez képest meglepően letisztult a felület, szinte hiányérzetünk támadhatna funkcionalitás tekintetében. De nem, bőven elég (volt) a webre való tervezéshez, és a UX-eseik is remek munkát végeztek ugyanis egy átlag designer aki már használt valamilyen tervezős applikációt előtte, az viszonylag gyorsan és fájdalommentesen beletanult a használatába.

Adobe XD

Hahó Adobe!? Sikerült a béta verziót 2016 márciusában kipréselni MacOS-re, a Windowsos XD-re pedig 2016 decemberéig kellett várjunk. 2017 októberére pedig elhagyhattuk a béta jelzőt (hurrá).

Az Adobe ökoszisztémához tartozó ikszdé szélsebesen terjedt az addig Adobe appokat előnyben részesítő tervezők körében. Windowsos támogatottsága pedig megváltó üstökösként ragyoghatott fel a PC felhasználók - addig a UI tervezés sötét fellegekkel borított - égboltján.

A kezdeti döcögés után szinte havonta szállingóztak az új funkciók, és elkezdett felzárkózni a Sketch mellé, Fontos megemlítenem, hogy villámgyorsan működik rengeteg artboard esetén is. Egyik legnagyobb előnye pedig a konkurenciához képest, hogy remekül kommunikál a még mindig piacvezető Photoshoppal, Illustratorral illetve After Effectssel.

Figma

A Figma egyik ereje a fénysebességgel száguldó felhőalapúságából fakad, ami elengedhetetlen ha csapatban dolgozunk és látni szeretnénk kedvenc kollégánk egerét, együtt dolgozni az aktuális projekten. A másik erőssége az intuitív használatából ered. Egy hasonló szoftverekben jártas designer körülbelül egy hétvége alatt sikeresen elsajátíthatja a használatát, a mélységeit és az újabb és újabb funkciókat persze kicsit nehezebb magunkévá tenni, de remek oktató fájlok segítenek bennünket felfedezni ezeket. Ha már egy ideje használjuk a Figmát, akkor egyre fájdalmasabb lesz megnyissunk egy-egy korábbi projektet, ami XD-ben vagy Sketchben lett végigtolva (aprópó Sketch, szinte csontnélkül tudunk .sketch állományokat importálni), így könnyedén tetten érhető az a fantasztikus meló, amit a Figma UX kutatói és tervezői beleraktak az eszközbe. Bravó!

Támogatott platformok

Sketch

Jelenleg a Sketch kizárólag macOS alatt fut, nem is nagyon tervezik hogy nyitnának Windows-zos irányba, esetleg böngészőből futtatható verzióval rukkoljanak elő.

Adobe XD

MacOs és Windows felhasználók egyaránt garázdálkodhatnak XD-ben, illetve létezik mobilalkalmazás is hozzá, amin keresztül iOS illetve Android eszközökön is megvizsgálhatjuk az elkészült (és csodálatos) terveinket.

Figma

A túlnyomórészt böngészőalapú szoftver, a Figma mindenen megy, beleértve a macOS-t, a Windows-t, a Linuxot és a Chrome OS-t is. a Figma Mirror appal pedig iOS-en és Androidon is megtapizhatjuk a fantasztikus terveinket.

Csapatmunka

Sketch

Ha kollaborációban dolgozunk, először az aktív kollégák avatárjai fognak feltűnni a jobb felső sarokban. Majd láthatjuk a kis színes kurzorocskákat mozogni a projekt fájlban. Ami különbség a konkurenciához képest, hogy ha valaki az együttműködés során megfog egy gombot és nekiáll szöszmötölni vele, csak az akció befejezése után látjuk - mi többiek a végeredményt - ... ami egyébként helyes megközelítés! Így nehezebben esünk ki a rettenetesen befókuszált állapotunkból, nem vonja el a figyelmünket egy a képernyőn épp elsuhanó hamburgermenü.

Adobe XD

Az Adobe XD 2019-ben, a Figma után kullogva kicsit, de bejelentette a “coediting” funkcióját, ami valós idejű együttműködést tesz lehetővé a felhőbe mentett dokumentumjaink esetében. Az első beszámolók némi szinkronizációs és laggolós problémákról panaszkodtak testesebb projektek esetén.

Figma

Amikor a Figma 2016-ban elindult meghódítani a designerek szívét, már akkor egy innovatív és borzasztóan intuitív real-time együttműködési képességgel kecsegtettek, a Google Dokumentumokhoz hasonlították az élményt. Egyeseknek kissé frusztráló lehet élőben együtt dolgozgatni a többiekkel - szinte George Orwell predikciójában találhatjuk magunkat, ahogyan a kollégánk éppen megfigyeli a munkánkat. Egy kissé más - és kevésbé paranoid - megközelítés szerint, az élő együttműködés funkció segít egyben tartani az összefüggő design elemeket.

Design system

Sketch

A Sketchben leginkább “symbolok”-nak hívjuk azokat az elemeket, amiket újra tudunk hasznosítani később, a design systemünk megalkotása során. 2021 májusa környékén debütált a - végre külső plugin nélkül is használható - prototyping megoldásuk a handoff eszközükkel egyetemben, így teljes lett sketchéknél is az ökoszisztéma. Az említett időpont előtt csak harmadik féltől származó pluginok (pl. Zeplin) segítségével tudtuk átadni a fejlesztőknek a pontos paramétereket.

Adobe XD

Az Adobe XD újrahasznosítható komponenseivel segíti frissen tartani a kialakított rendszerünket. Elég egyszer megépítenünk mondjuk egy gombot, és utána lehetőségünk van újra és újra felhasználni azt, a legkülönbözőbb projektekben. Léteznek remek pluginok is, amik megkönnyítik a rendszerünk karbantartását.

Figma

A Figma csapata keményen dolgozik azon, hogy a folyamatos fejlesztéseikkel egyre gördülékenyebbé tegyék a komponens alapú tervezést. Szerintem az egyik legkönnyebben átlátható megoldás az övék, könnyedén tudjuk ki-be kapcsolgatni a különböző, előre definiált rendszereinket eltérő projektjeinkben. Az egyik legújabb húzások pedig az “interaktív komponens” funkció, aminek a segítségével már a komponenseket is tudjuk prototípizálni, például egy checkboxnak meg tudjuk adni a bepipált és az “üres” állapotait.

Animációk

Sketch

Animációk tekintetében leginkább a Sketch van lemaradva a többiek mögött, bonyolultabb mikrointerakciókat létrehozni vagy a sketchhez letölthető pluginok segítségével (pl.: Timeline) vagy másik alkalmazásba átexportálva a layoutokat lehet.

Adobe XD

A Smart animate funkció először az XD-ben debütált, amikor én is épp ezt az alkalmazást nyüstöltem leginkább, szóval rögtön volt lehetőségem kipróbálni is. Szinte Principle-i (jelenleg az egyik legösszetettebb UI animációk létrehozására alkalmas app) magasságokba repítette az XD-ben létrehozható, immmáron rendkívül interaktív és nyomkodható prototípusokat.

Figma

Kapcsoltak azonnal Figmáék is, és az XD-hez hasonlóan ők is lefeljesztették a saját smart animate funkciójukat, így Figmában is remek interaktív protók készíthetőek. Azonban ők még csavartak egyet nemrég a sztorin, és bevezették - a már fentebb említett - interaktív komponenseket is, így már azon a szinten lehetőségünk van pipálható checkboxok, mozgolódó switchek, hoverre megváltozó gombok létrehozására.

Megosztás

Sketch

Sketchben csak idén debütált az a funkció, hogy külső alkalmazás vagy plugin mellőzésével is meg lehessen osztani megfelelő módon a fejlesztőkkel a terveinket. Előtte én leginkább a Zeplint használtam erre, de egy idő után az inVision “inspect” módja is elérte azt a szintet, hogy használható legyen a fejlesztőink számára.

Adobe XD

XD-ben a “share” funkció tölti be az átadás szerepét mind ügyfelek részére, mind pedig fejlesztők számára. Gyakorlatilag generálhatunk egy linket, amiről eldönthetjük hogy esetünkben mondjuk “developer” módon osztjuk meg a célcsoporttal. A link birtokában lehetőség van átlátni az összekötött folyamatokat, megvizsgálni az eltartásokat, és bizonyos limitációk mellett letölteni az elemeket (asset).

Figma

A Figmában is egy egyszerű Share gombbal oszthatjuk meg a remekbeszabott terveinket. A fejlesztőgárda regisztrációt követően ugyanúgy zoomolgathat ki-be az artboardjaink között, akárcsak mi tervezés közben, és az elemekre kattintgatva megkaphatják a releváns információkat, a képekre vagy ikonokra fókuszálva pedig letölthetik a nekik tetsző kiterjesztésben és felbontásban őket. Zseniális.

Konklúzió

Tökéletesen igaz a mondás, akárcsak egy fényképezőgép esetében, hogy ezek a szoftverek csak eszközök, szerszámok. Közhelyes ugyan, de igaz, hogy a titkos összetevő a designer, igazából csak a végeredmény számít, amit ki tudunk hozni a témából!

A Figma, az Adobe XD és a Sketch a maguk módján (főleg így 2021 végén) mindenre alkalmasak, de talán a legfontosabb az, hogy az igényeinknek (és a platformnak amin dolgozunk) leginkább megfelelő alkalmazást válasszuk.

Én személy szerint a Figmát használom mostanában a legtöbbet, még ezt a blogposztot is Figmában írom, sőt a weboldalak és alkalmazások tervezésén túl, prezentációkat, social media kreatívokat, bannereket is leginkább ebben rakok össze.