Figma vs. Sketch vs. Axure – O revizuire bazată pe sarcini

Într-o infografică recentă Toptal: „Cele mai bune instrumente UX”, am examinat gama largă de instrumente de design digital de pe piață, dintre care majoritatea sunt capabile să asiste în sarcinile de zi cu zi ale designerului UX individual.

Trei dintre instrumentele prezentate, Sketch, Figma și Axure, au generat urmăritori fideli, deoarece excelează la anumite locuri de muncă din cadrul fluxului de lucru de design UX.

Cu toate acestea, performanța acestor instrumente variază în funcție de sarcina de proiectare la îndemână . În loc să enumeram toate caracteristicile lor într-un tabel de comparație, le vom determina eficacitatea printr-o examinare bazată pe sarcini.

Iată o scurtă prezentare generală a concurenților:

• Schiță de Bohemian Coding cu sediul în Haga, NL. Sketch este o aplicație numai pentru Mac.
• Figma by Figma cu sediul în San Francisco, California. Figma rulează pe orice sistem de operare prin intermediul unui browser.
• Axure by Axure Software Solutions cu sediul în San Diego, California. Axure are o versiune pentru Windows și Mac.

Vom nota fiecare instrument în funcție de cât de bine îndeplinește sarcinile de proiectare de zi cu zi din cutie, fără pluginuri, suplimente sau aplicații terță parte. Sarcinile includ:

1. Efectuarea ideii de concept
2. Crearea de livrabile cu fidelitate scăzută
3. Crearea de livrabile de înaltă fidelitate
4. Crearea de prototipuri interactive
5. Crearea unui sistem de proiectare
6. Livrarea către Dezvoltare

Notă: atunci când instrumentele au caracteristici aproape identice necesare pentru a finaliza o sarcină, câștigul va reveni instrumentului care este mai ușor de utilizat și oferă o livrare mai rapidă. Dacă această determinare pare prea aproape de a fi apelată, asistența terță parte este factorul de departajare.

Sarcină: Realizarea ideii de concept

Idearea este un proces creativ pentru generarea de idei noi și, de obicei, este realizat de grupuri interdisciplinare formate din designeri, dezvoltatori, proprietari de produse și manageri de proiect.

Scopul este crearea de noi idei de utilizat într-un produs, după ce s-au luat în considerare cerințele de bază și orice lucrare care este deja în construcție. De exemplu, o echipă poate fi supusă unei sesiuni de idee de concept pentru a crea un set de funcții MVP pentru o aplicație nouă sau funcții de generație următoare într-o aplicație existentă.

Mulți designeri fac idei de concept pe o tablă sau hârtie. Cu toate acestea, idearea se face și digital, mai ales în birourile distribuite. Generarea conceptului este un sport de echipă și include non-designeri, cum ar fi proprietarul/managerii de produs și dezvoltatorii front-end. Instrumentele care favorizează colaborarea și sunt ușor de utilizat sunt cele mai bune pentru această sarcină.

Câștigător: Figma

Sketch și Axure oferă ambele servicii de partajare în cloud, dar nu există nicio modalitate de a partaja ecranele în timp real cu colaboratorii.

Fișierele partajate în Figma pot fi conectate în timp real și este afișat cursorul etichetat fiecărui participant. Un clic pe avatarele reprezentative din bara de instrumente comută vizualizările la perspectiva acelei persoane, facilitând partajarea rapidă a unei idei. În plus, Figma nu cere ca non-designerii să dețină o copie; deschid linkul la fișier și încep să lucreze.

Alte instrumente de colaborare cu tablă albă pot fi mai potrivite pentru ideea de concept decât Figma, cum ar fi Mural și Realtimeboard, dar pentru un instrument de proiectare, Figma este mai bună decât Sketch și Axure cu o milă.

Sarcină: Crearea de livrabile cu fidelitate scăzută

Produsele de slabă fidelitate sunt de obicei produse ca wireframes sau schițe digitale care pot fi distribuite și revizuite de alți designeri și proprietari de produse. În funcție de procesul UX, acestea pot fi vizualizate și de dezvoltatori și alte părți interesate.

Wireframes-urile sunt menite să arate structura de bază a unei aplicații, astfel încât modelul de interacțiune să poată fi definit înainte de a petrece timp creând machete de înaltă fidelitate.

Crearea de wireframes de lo-fidelitate se poate face cu instrumente care sunt dedicate în mod special sarcinii, inclusiv Balsamiq Mockups, Moqups și FluidUI. Cu toate acestea, Sketch, Axure și Figma pot îndeplini aceeași sarcină, mai ales atunci când utilizatorii creează biblioteci de componente wireframe.

Deoarece wireframes-urile servesc de obicei ca aspect inițial al interfeței de utilizare pentru o aplicație sau o pagină, acestea sunt execuții brute monocromatice care se schimbă des. Acest lucru ajută la menținerea sub control a așteptărilor părților interesate.

Pentru wireframes, ușurința de utilizare, viteza de livrare și modificarea sunt esențiale, deoarece permit designerilor să producă variante de design în mod eficient.

Câștigător: Axure

Axure obține câștigul aici, deoarece are componente pre-ambalate pentru wireframing imediat după instalarea software-ului. Sketch și Figma au instrumentele care vă permit să creați wireframe, dar trebuie fie să desenați o componentă wireframe, fie să descărcați un fișier care le conține. În ambele cazuri, acestea trebuie să fie integrate într-o bibliotecă de simboluri (Sketch) sau de componente (Figma) pentru a fi glisate și plasate ca și componentele Axure.

Axure are multe biblioteci terțe pentru a crea livrabile cu fidelitate scăzută, iar Sketch are o multitudine de fișiere gratuite și plătite care pot fi descărcate, în timp ce resursele publice ale Figma sunt încă la început.

Odată ce un designer a creat biblioteci de componente wireframe, cele trei instrumente sunt egale. Rețineți că componentele lui Axure posedă proprietăți parametrice și ajustabile, dar pentru wireframes statice, toate cele trei instrumente funcționează bine atunci când bibliotecile sunt disponibile.

Sarcină: Crearea de livrabile de înaltă fidelitate

Livrabilele de înaltă fidelitate se nasc din feedback-ul și învățăturile adunate din wireframe de joasă fidelitate. Sunt machete care arată culoarea, detaliile vizuale și modelele finale propuse pentru o aplicație.

Înaltă fidelitate înseamnă, de asemenea, machete de ecran care sunt gata de prezentare și afișate clienților, directorilor interni și altor părți interesate non-designer. Instrumentele de proiectare care excelează la această sarcină au toate caracteristicile necesare pentru a adăuga luciul necesar pentru a crea o reprezentare a rezultatelor finale adresate clienților.

Aceasta include controlul asupra umplerilor și liniilor de obiecte, adăugarea de efecte precum umbre și umpleri cu gradient și exportul de artă într-un format ușor de digerat (png, pdf, jpg).

Câștigător: Figma

Sketch și Figma au seturi de instrumente aproape identice care pot crea machete de înaltă fidelitate, dar modelul de interacțiune al Figma este mai rafinat și instrumentul este mai ușor de utilizat de la început. Ambele instrumente au acces ușor la comenzi de editare avansată și boolean, cum ar fi Join, Intersect, Union și Subtract. Deși suportul pentru pluginuri Sketch permite terților să creeze funcții suplimentare, aceste instrumente nu sunt disponibile imediat după instalare.

Toate cele trei instrumente au caracteristici care permit crearea de obiecte personalizate, dar Axure face oarecum dificilă accesarea comenzilor. Editările menționate mai sus nu sunt disponibile pe bara de instrumente. Accesul se obține doar prin meniul contextual atunci când sunt selectate mai multe obiecte.

În plus, rețelele vectoriale Figma fac ca lucrul cu instrumentele de linie să fie o ușoară.

Sarcină: Crearea de prototipuri interactive

Prototipurile interactive pot fi la fel de grosolane ca un prototip de hârtie sau la fel de detaliate ca o versiune ramificată a unei aplicații existente care a fost modificată pentru a explora funcții noi. De obicei, prototipurile interactive permit utilizatorilor să navigheze de la ecran la ecran și să utilizeze funcționalități precum meniuri și liste.

Pentru mulți designeri, o prezentare interactivă de bază va fi suficientă atunci când își prezintă munca. Acest lucru este valabil mai ales pentru aplicațiile mobile, deoarece tranzițiile simple oferă suficientă interacțiune cu dispozitivul pentru a explica designul.

Modelul de prototipare Figma este bine integrat și simplu de utilizat și, deoarece este o aplicație în timp real bazată pe cloud, nu este nevoie să reîmprospătați paginile HTML atunci când un fișier este actualizat.

Ocazional, părțile interesate doresc conexiuni de date live pentru a încărca un prototip cu date din lumea reală pentru a testa scalabilitatea unui design, dar marea majoritate a designerilor au acum puțină nevoie de prototipuri complexe.

Câștigător: Figma

Sketch și Figma acceptă ambele prototipuri simple cu legătură „obiect la artboard” și un set limitat de tranziții. Pluginurile ajută la consolidarea capabilităților simple de prototipare ale lui Sketch, dar Axure este cel mai puternic atunci când vine vorba de furnizarea unui model de interacțiune robust pentru prototipuri.

Sarcină: Crearea unui sistem de proiectare

Sistemele de design, deși sunt relativ noi în domeniul designului UX, există de zeci de ani. Acestea includ un limbaj de design comun, componente, resurse și linii directoare care permit echipelor să colaboreze și să ia decizii mai bune. O bibliotecă de sistem de design este de obicei implementată ca un site web și acționează ca sursă unică de adevăr pentru un produs în întreaga companie.

Câștigător: Figma

În timp ce bibliotecile de componente pot fi construite în oricare dintre programe, niciunul dintre ele nu permite designerilor să răsucească un comutator și să producă o bibliotecă de componente viabilă de la început. Axure poate genera o pagină HTML cu componente personalizate pe ea, dar nu există nicio modalitate de a interoga singura componentă pentru a afla valoarea culorii, dimensiunea și alte proprietăți.

Construirea unui sistem de proiectare folosind oricare dintre aceste instrumente este încă un proces manual. Cu toate acestea, există pluginuri pentru Sketch (cum ar fi pluginul Material Design lansat recent de Google) și cel puțin un instrument terță parte în lucru pentru Figma.

Figma obține câștigul, deoarece colaborarea este în centrul unui sistem de design bun. Angajații companiei din mai multe discipline (design, dezvoltare, calitate, conținut) trebuie să acceseze o bibliotecă de sistem de proiectare, iar mulți vor adăuga la fișierul componentă de design care se sincronizează cu biblioteca partajată. Figma poate fi folosită de oricine, nu doar de un deținător de licență, astfel încât accesul și adăugarea la un fișier partajat sunt nedureroase.

Sarcină: Livrarea către dezvoltare

Când designerii UI termină de a crea o interfață, este responsabilitatea lor să predea fișierele de proiectare către dezvoltatori, astfel încât proiectul să fie finalizat. Dar o transferare este mai mult decât un simplu schimb de date, este o oportunitate pentru designeri de a comunica rațiunea muncii lor și, prin urmare, de a ajuta dezvoltatorii să îmbine forma cu funcția.

Există zeci de metode de transfer și chiar mai multe instrumente terță parte pentru a facilita interogările de informații despre obiecte și redline din fișierele Sketch și Figma (vezi Avocode și Zeplin). Cu toate acestea, în această comparație, ne uităm la instrumentul de design original înainte de a fi completat cu pluginuri sau alte aplicații.

În mod interesant, creșterea sistemelor de design UX atenuează necesitatea acestei forme de transfer, deoarece bibliotecile de componente publicate sunt singura sursă de adevăr pentru dezvoltator. Aceștia pot extrage informațiile exacte despre aspectul și designul componentelor fără a aștepta o consultare pentru livrabil sau UX.

De asemenea, obținerea de informații de la obiectele dintr-un fișier de proiectare poate fi utilă în timpul construcției unui sistem de proiectare, așa că o anumită vizualizare a CSS este un lucru bun.

Sketch vă permite să selectați obiecte și să utilizați un meniu contextual pentru „Copiați atribute CSS”, dar nu este ideal. Figma face o treabă corectă furnizând o filă „Cod” în panoul de proprietăți care produce valori CSS, iOS sau Android pentru obiectele selectate (dezvoltatorii pot folosi această caracteristică în modul doar vizualizare sau prototip).

Câștigător: Axure

În acest moment, numai Axure are „generatoare” puternice care produc fișiere HTML care pot fi publicate complet, specificații Word și chiar rapoarte formatate CSV pentru a le importa într-o foaie de calcul. Deși rezultatele nu sunt o bibliotecă de design, aplicația oferă materiale utile pentru dezvoltatori.

Câștigătorul general al instrumentului de design: Figma

După cifre, Figma este câștigătorul acestei comparații, în primul rând datorită naturii sale colaborative și a disponibilității pe mai multe platforme. Pe măsură ce mai multe echipe folosesc sisteme de proiectare care necesită o integrare mai strânsă în dezvoltarea și designul front-end, colaborarea în timp real și funcția de încorporare live a Figma îi oferă un mare avantaj. În dezavantaj, Figma este o aplicație online care ar putea fi interzisă de utilizare într-o întreprindere din motive de securitate.

Axure ocupă locul al doilea datorită puterii sale din cutie, cu componente pre-construite, funcții puternice de prototipare interactivă și generare de documente. În cazul mai rar în care o companie trebuie să acceseze magazinele de date din lumea reală pentru a vedea cum se comportă o anumită caracteristică, Axure este cea mai bună sau singura opțiune.

Este posibil ca Sketch să fi ajuns ultimul, dar odată ce utilizatorii profită de numeroasele pluginuri și resurse disponibile pentru instrument, este extrem de puternic și poate fi adaptat pentru a satisface nevoile unui grup de design. Avertismentul aici este că pluginurile trebuie să fie actualizate după fiecare actualizare Sketch și, ca aplicație numai pentru Mac, companiile care folosesc computere Windows nu o pot folosi.

Toate cele trei instrumente analizate în acest articol sunt puternice în sine. Cu toate acestea, fiecare are limitări. Depinde de designerii și echipele individuali să își identifice nevoile fluxului de lucru, să cântărească avantajele și dezavantajele fiecărui program și să facă o alegere adecvată.

Citiri suplimentare pe Blogul Toptal Design:

• Renunțați la MVP, adoptați prototipuri minime viabile (MVPr)
• Puterea Figma ca instrument de proiectare
• Cum să creați un ghid de stil de schiță, o bibliotecă și un kit UI
• Înțelegerea sistemelor și modelelor de proiectare
• Moarte pentru Wireframe. Direct la înaltă fidelitate!