Puterea Figma ca instrument de proiectare

Publicat: 2022-03-11

Figma este un instrument de proiectare bazat pe cloud, care este similar cu Sketch în ceea ce privește funcționalitatea și caracteristicile, dar cu diferențe mari care îl fac pe Figma mai bun pentru colaborarea în echipă. Pentru cei sceptici cu privire la astfel de afirmații, le vom explica cum Figma simplifică procesul de proiectare și este mai eficient decât alte programe pentru a ajuta designerii și echipele să lucreze împreună eficient.

Să aruncăm o privire mai atentă.

Designul interfeței în Figma
Figma are o interfață familiară care o face ușor de adoptat.

Figma funcționează pe orice platformă

Figma funcționează pe orice sistem de operare care rulează un browser web. Mac-urile, computerele Windows, computerele Linux și chiar și Chromebook-urile pot fi folosite cu Figma. Este singurul instrument de design de acest tip care face acest lucru, iar în magazinele care utilizează hardware care rulează diferite sisteme de operare, toată lumea poate partaja, deschide și edita fișierele Figma.

În multe organizații, designerii folosesc Mac-uri, iar dezvoltatorii folosesc PC-uri Windows. Figma ajută la reunirea acestor grupuri. Natura universală a lui Figma previne, de asemenea, supărarea PNG-pong (unde imaginile actualizate sunt trimise înainte și înapoi între disciplinele echipei de proiectare). În Figma, nu este nevoie de un mecanism de mediere pentru a face munca de proiectare la dispoziția tuturor.

Colaborarea în Figma este simplă și familiară

Deoarece Figma se bazează pe browser, echipele pot colabora așa cum ar face-o în Google Docs. Persoanele care vizualizează și editează un fișier sunt afișate în partea de sus a aplicației ca avatare circulare. Fiecare persoană are, de asemenea, un cursor numit, așa că este ușor să urmăriți cine face ceea ce face. Făcând clic pe avatarul altcuiva, se mărește ceea ce vizionează în acel moment.

Instrumente de colaborare pentru proiectare Figma
În timp ce colaborezi în Figma, poți să dai clic pe avatarul oricui pentru a-și vedea vizualizarea.

Colaborarea în timp real a fișierelor ajută la atenuarea „derivei de proiectare” – definită ca interpretare greșită sau abatere de la un design convenit. Derivarea designului are loc de obicei atunci când o idee este concepută și implementată rapid în timp ce un proiect este în derulare. Din păcate, acest lucru duce adesea la devierea de la designul stabilit, provocând frecare și reluare.

Folosind Figma, un lider de proiectare se poate verifica pentru a vedea ce proiectează echipa în timp real, prin simpla deschidere a unui fișier partajat. Dacă un designer interpretează greșit cumva scurta sau povestea utilizatorului, această caracteristică permite conducerii de proiectare să intervină, să corecteze cursul și să salveze nenumărate ore care altfel ar fi fost irosite. (Prin comparație, echipele care folosesc Sketch nu au un mod imediat de a spune dacă designerii se rătăcesc.)

Notă secundară: unor designeri nu le place să fie „spionați” atunci când lucrează, așa că depinde de conducerea de proiectare să explice beneficiile. În general, majoritatea designerilor văd rapid valoarea unei astfel de caracteristici și se adaptează cu ușurință la lucrul într-un mediu comun.

Figma folosește Slack pentru comunicarea în echipă

Figma folosește Slack ca canal de comunicare. Când un canal Figma este creat în Slack, orice comentarii sau modificări de design făcute în Figma sunt „slack” echipei. Această funcționalitate este crucială atunci când proiectați live, deoarece modificările aduse unui fișier Figma vor actualiza fiecare altă instanță în care fișierul este încorporat (o potențială durere de cap pentru dezvoltatori). Modificările aduse unei machete, garantate sau nu, sunt verificate imediat, iar canalul de feedback este live.

Comunicarea echipei de proiectare Figma în Slack
Proiectele Figma pot folosi canalele Slack pentru comentarii în fir în fișier.

Partajarea Figma este simplă și flexibilă

Figma permite, de asemenea, partajarea pe bază de permisiuni a oricărui fișier, pagină sau cadru (numită tablou de desen în alte instrumente de design). Când se creează un link de distribuire către un cadru dintr-o pagină, persoana care face clic pe acel link va deschide o versiune de browser a Figma și se încarcă o vedere mărită a cadrului.

Partajarea fișierelor cu instrument de proiectare a aplicațiilor
Figma partajează proiecte, fișiere, pagini și cadre cu oricine are permisiunea.

Această formă de partajare selectivă, de la fișier până la cadru, permite designerilor, proprietarilor de produse și dezvoltatorilor să împărtășească exact ceea ce este necesar în instrumentele de urmărire a erorilor și software-ul comunității precum Confluence sau SharePoint.

Fișierele Figma încorporate oferă actualizare în timp real

Figma partajează, de asemenea, fragmente de cod încorporate live pentru a lipi un iFrame în instrumente terțe. De exemplu, dacă Confluence este folosit pentru a afișa fișiere modele încorporate, acele fișiere nu sunt „actualizate” prin salvarea unui fișier Figma - acele fișiere încorporate SUNT fișierul Figma.

Dacă cineva din Figma face o modificare a machetei, acea modificare poate fi văzută în direct în modelul Confluence încorporat. (Puteți citi mai multe despre integrarea Figma și Confluence aici.)

Efectul acestei caracteristici asupra procesului UX este ilustrat în următoarea diagramă:

Figma îmbunătățește instrumentele de design UX
Figma elimină nevoia de aplicații dedicate pentru prototipare și comentare.

Înainte de Figma, au fost folosite câteva alte instrumente pentru a facilita schimbul de machete și actualizări de design. Ciclul de iterație a fost o serie de actualizări de fișiere înainte și înapoi, astfel încât echipele să poată revizui și implementa designul actual.

După Figma, instrumentele de la terți nu mai sunt necesare (dar ar putea fi folosite dacă se dorește). Deoarece Figma se ocupă de funcționalitatea instrumentelor terță parte descrise anterior, există doar un singur pas în proces - treceți de la schițe la Figma și toate grupurile au cele mai recente machete. Nu există „transfer” în cel mai strict sens al cuvântului.

Figma este excelentă pentru feedback-ul de revizuire a designului

Figma acceptă comentariile în aplicație atât în ​​modul de proiectare, cât și în cel de prototipare, iar firul de comentarii este urmărit în Slack și/sau e-mail. Nu este nevoie să publicați fișiere PNG sau să efectuați actualizări constante pentru a obține feedback de la o echipă care utilizează un instrument terță parte precum InVision sau Marvel.

Instrumente de proiectare a interfeței de utilizare web și feedback de revizuire
Designerii pot face comentarii în timpul recenziilor deschizând același fișier Figma.

În timpul analizelor de proiectare, designerii echipelor pot discuta despre munca lor pe un ecran mare, pot înregistra comentarii și pot remedia probleme — totul în Figma. Această formă de feedback live nu este posibilă cu Sketch, care necesită încărcarea într-un serviciu cloud pentru a obține contribuția echipei.

Doriți designeri de interfață de utilizare independenți cu normă întreagă din SUA

Handoff-ul dezvoltatorului este facilitat folosind Figma

Figma afișează fragmente de cod pe orice cadru sau obiect selectat în formate CSS, iOS sau Android pentru ca dezvoltatorii să le folosească atunci când examinează un fișier de design. Componentele de design pot fi inspectate de orice dezvoltator în orice fișier pe care îl poate vizualiza. Nu este nevoie să utilizați un instrument terță parte pentru a obține informațiile. Chiar și așa, Figma are o integrare completă cu Zeplin dacă echipele doresc să facă mai mult decât o simplă măsurare și afișare CSS.

Revizuirea prototipului Figma și transferul dezvoltatorului
Dezvoltatorii pot accesa codul din fișierul de design sau rulând un prototip Figma.

Fișierele de proiect Figma se află într-un singur loc—Online

Deoarece Figma este o aplicație online, se ocupă de organizarea fișierelor afișând proiectele și fișierele acestora într-o vizualizare dedicată. Figma acceptă, de asemenea, mai multe pagini per fișier, cum ar fi Sketch, astfel încât echipele Agile își pot organiza proiectele în mod logic:

  • Creați un proiect pentru tema caracteristică.
  • Creați un fișier pentru o caracteristică epică sau mare.
  • Creați pagini în acel fișier pentru fiecare poveste de utilizator.

Aceasta este doar o metodă de organizare a fișierelor care ar putea fi mai mult sau mai puțin granulară, în funcție de ceea ce necesită procesul.

Alternativă online Sketch pentru Windows
Fișierele de proiect pot fi organizate cu ușurință într-o vizualizare dedicată.

API-urile Figma asigură integrarea instrumentelor terță parte

Figma are acum API-uri pentru dezvoltatori pentru a permite integrarea reală cu orice aplicație bazată pe browser. Companiile folosesc acest lucru pentru a integra afișări în timp real ale fișierelor de design în aplicațiile lor. De exemplu, Uber are ecrane mari care afișează fișiere de design „în direct” în jurul companiei. Modelele sunt partajate, iar feedbackul este binevenit din partea oricui din companie.

Software-ul JIRA de la Atlassian a implementat un add-on Figma, astfel încât proprietarii de produse, dezvoltatorii și inginerii de calitate să vadă mereu cea mai recentă versiune a oricărei machete de la designeri.

În plus, API-ul Figma promite să îndeplinească cererile clienților pentru pluginuri terță parte și îmbunătățiri ale caracteristicilor pe care Sketch le oferă deja.

Versiunea fișierelor este automată sau la cerere

Orice incertitudine legată de actualizarea fișierelor în direct este atenuată și mai mult de sistemul de versiuni încorporat Figma. În orice moment, un designer poate crea o versiune numită și o descriere a unui fișier Figma; acest lucru se poate face imediat după ce modificările convenite sunt aduse unui design.

Versiune automată a fișierelor de proiectare a interfeței web
Versiunile fișierelor sunt salvate manual pentru a crea ramuri de design.

Fișierul live din mediul partajat nu va fi afectat până când modificările sunt efectuate în mod deliberat în versiunea originală. De asemenea, este posibil să restaurați orice versiune salvată automat pentru a crea un duplicat sau a suprascrie originalul.

Prototiparea în Figma este simplă și intuitivă

În timp ce Sketch a adăugat recent planșa de grafică la prototiparea plansei de artă, Figma a mers mai departe oferind tranziții între cadre. Caracteristica simplă de prototipare a Figma elimină necesitatea unui alt instrument care face prototipuri în stil prezentare de diapozitive, cum ar fi InVision sau Marvel. Când tot ceea ce este nevoie este o prezentare simplă cu tranziții, nu este nevoie să exportați instrumente de revizuire.

Prototiparea intuitivă a designului web
Prototiparea Figma funcționează ca și alte instrumente folosind săgeți de conectare între cadre.

Prototipurile Figma pot fi distribuite la fel ca fișierele de design Figma; oricine are permisiunea de link poate vizualiza și comenta un prototip și, din nou, acel feedback este capturat în panoul de comentarii al instrumentului și înregistrat în Slack. Dezvoltatorii pot vedea fluxul de lucru de proiectare, pot lăsa @mesaje directe pentru designeri și pot obține măsurători și atribute CSS din interiorul prototipului.

Bibliotecile echipei Figma sunt ideale pentru sistemele de proiectare

Sistemele de design au devenit o necesitate pentru multe companii și este nevoie de componente (simboluri în Sketch și Illustrator) care sunt reutilizabile, scalabile și „tokenizate” pentru a fi utilizate în bibliotecile de modele disponibile pentru designerii UX și dezvoltatorii front-end.

Biblioteca sistemului de design Figma
Dialogul fără model al bibliotecii echipei Figma oferă acces nelimitat la componente și stiluri.

Expresia des folosită „sursă unică de adevăr” se potrivește aici – odată ce o bibliotecă de echipă Figma este creată, oricine are acces la un proiect poate folosi exemple ale componentelor din designul lor și poate fi sigur că lucrează cu cele mai recente versiuni.

Proiectare bibliotecă de componente ale sistemului
Organizarea componentelor este simplă și flexibilă folosind fișiere și cadre.

Abordarea Figma față de bibliotecile de componente este simplă și ușor de gestionat. Designerii pot crea fișiere care sunt pline de componente sau pot folosi componente de pe pagină pentru a organiza o bibliotecă de modele. Fiecare cadru dintr-o pagină Figma devine secțiunea organizatorică din biblioteca echipei (nu este nevoie să creați ierarhii\ca\aceasta).

O modalitate de a organiza bibliotecile este de a avea un proiect dedicat exclusiv componentelor. Fișierele din acel proiect pot fi organizate după cum este necesar, iar paginile din acele fișiere pot fi aranjate în consecință.

Figma este construită pentru a îmbunătăți munca în echipă de proiectare

Utilizarea Figma pentru orice perioadă de timp va demonstra beneficiile acestui instrument de colaborare live. Menține echipele pe sarcină și încurajează dezvăluirea completă, esențială atunci când se construiește un sistem de proiectare pentru o varietate de discipline. Figma este ușor de utilizat pentru oricine pe orice platformă și permite echipelor să-și partajeze rapid munca și bibliotecile.

Experții în design care folosesc Figma după trecerea de la Sketch (fișierele Sketch pot fi importate cu paritate în Figma) nu sunt dezamăgiți:

… transformă complet modul în care poți lucra cu colegii și clienții tăi – Streamline Collaborative Design with Figma

Figma a reunit tot ce este mai bun din lumea instrumentelor de design UI în ultimii ani - De ce echipa ta de proiectare ar trebui să ia în considerare trecerea la Figma

În ultimul an, am folosit Figma pentru procesul meu de design UI/UX și mi-a economisit ore de muncă. Mi-a transformat cu adevărat fluxul de lucru de proiectare – Cum să-ți eficientizezi fluxul de lucru UI/UX cu Figma

Timpul petrecut în Figma este de obicei cea mai plăcută și mai productivă parte a zilei mele – Figma îmi transformă întregul flux de lucru și este minunat!

• • •

Lectură suplimentară:

  • Stăpânește-ți meseria cu aceste instrumente UX de top
  • Eficientizați designul colaborativ cu Figma
  • Utilizați Craft by InVision pentru a eficientiza colaborarea în echipă
  • Moarte pentru Wireframe. Direct la înaltă fidelitate!
  • Deveniți un designer de clasă mondială făcând din Globe biroul dvs