Mini Tutorial – Utilizarea caracteristicilor Figma pentru întregul proces de proiectare

Lumea instrumentelor de design emergente este incredibil de interesantă. Noi programe promițătoare sunt lansate într-o succesiune rapidă, dar există unul în special care a devenit treptat cea mai bună alegere pentru echipele de proiectare mai mari și mai mult distribuite.

Figma are potențialul de a sprijini întregul proces de proiectare de la capăt la capăt. Primele schițe, colectarea feedback-ului, colaborarea, prototipurile gata de testat și transferul dezvoltatorului sunt bine în limitele capacităților sale. Figma simplifică, de asemenea, munca managerilor de produs și a liderilor de proiectare, precum și a tuturor celorlalți părți interesate.

Deci, ce diferențiază Figma de concurență? Există mai multe aspecte cheie, dar toate pot fi urmărite până la faptul că Figma este bazat pe web. Acest lucru a stârnit o mulțime de sprâncene când instrumentul a fost lansat pentru prima dată, dar, în cele din urmă, a deschis calea pentru flexibilitatea și funcționalitățile unice ale Figma.

Ce este fundamental pentru un proces neted de proiectare a produsului?

Deși este adevărat că fiecare echipă și proiect poate avea un flux de lucru diferit, există funcții și faze care sunt componente esențiale ale designului și managementului produsului. Figma acoperă fiecare.

1. Accesibilitate și colaborare . Indiferent de instrumentele pe care le folosește o echipă, trebuie să existe o modalitate de a lucra împreună, de a prezenta proiecte, de a aduna feedback și de a menține părțile interesate la curent. Toate aceste caracteristici sunt disponibile în Figma.
2. Flexibilitatea de a repeta și de a produce livrabile . Figma este flexibilă și poate fi folosită ca tablă albă colaborativă pentru schițarea ideilor inițiale și iterarea tuturor, de la wireframes la machete de înaltă fidelitate.
3. Abilitatea de a construi prototipuri și de a testa . Proiectați o aplicație mobilă? Construiți și publicați prototipuri interactive și testați-le direct pe smartphone-uri – toate de la Figma.
4. Stabilirea unei singure surse de adevăr . Figma este o modalitate excelentă de a defini sistemele de proiectare a produselor care se află complet online. Este o singură sursă de adevăr în mod implicit. Nu vă mai întrebați: „Este aceasta cea mai recentă versiune?”
5. Predare lină . Doar partajați un link cu dezvoltatorii și aceștia vor avea acces la toate informațiile necesare pentru a implementa designul – linii roșii, măsurători și elemente grafice gata de export.
6. Versatilitate care trebuie personalizată și îmbunătățită . API-ul pentru pluginuri Figma permite echipelor să-și scrie propriile pluginuri sau să acceseze comunitatea mai largă de utilizatori și să extindă instrumentul cu noi funcționalități.

1. Accesibilitate și colaborare

Ia echipa la bord

Să aruncăm o privire mai atentă asupra modului în care Figma contribuie la cele șase domenii cheie descrise mai sus. Utilizatorii noi ar putea dori să creeze un cont Figma gratuit, să înființeze o echipă și să urmărească cum începe cu Figma. Odată ce o echipă este creată, invitați membrii echipei și părțile interesate relevante să se alăture.

Există trei niveluri de acces disponibile. Este destul de explicit, dar de obicei, drepturile de editare sunt acordate echipei de proiectare și drepturile de vizualizare pentru toți ceilalți. Aceasta include dezvoltatorii și alte părți interesate care trebuie să poată urmări procesul de proiectare și să ofere feedback.

Opțiuni similare de partajare sunt disponibile la nivel de echipă (prezentat mai sus), la nivel de proiect și la nivel de fișier. Dacă nivelurile de acces nu sunt specificate, acestea se propagă de la echipă la proiect și de la proiect la fișiere.

Deoarece Figma este disponibil în browser, nu contează cum este invitat cineva sau pe ce sistem se află. Atâta timp cât dispozitivul și browserul pe care le folosesc îndeplinesc cerințele minime, aceștia pot sări direct cu un link, iar interfața se schimbă în funcție de dacă au drepturi de editare sau de vizualizare.

Încorporarea unui fișier de proiect

Fișierele de proiect Figma pot fi încorporate în software terță parte. De exemplu, un document Dropbox Paper partajat poate fi folosit pentru a prezenta starea curentă a unui proiect.

Pentru a încorpora fișiere de proiect, setați vizibilitatea fișierului la Oricine are linkul - poate vizualiza , copia codul de încorporare și încorpora fișierul de proiect în orice software terță parte care acceptă embed.ly.

Feedback și revizuiri

O altă funcționalitate cheie pentru procesul de proiectare a produsului este capacitatea de a distribui modele, de a colecta feedback și de a gestiona revizuirile. Oricine are un link Figma poate vedea cea mai recentă versiune și poate comenta direct punctul despre care dorește să ofere feedback.

Pentru a eticheta membrii echipei, utilizați caracterul @, iar sistemul va prezenta o listă de nume din care să alegeți. Procedând astfel, membrii echipei sunt înștiințați și, odată ce feedback-ul a fost procesat, discuțiile pot fi închise făcând clic pe Rezolvare .

Pentru a menține echipele aliniate, există o integrare frumoasă care poate publica discuții din fișierele Figma într-un canal Slack desemnat.

Colaborare în timp real

Una dintre cele mai interesante funcționalități ale Figma este ceea ce ei numesc multiplayer . Permite mai multor membri ai echipei să deschidă și să lucreze la un fișier de design în același timp. Toți cei care lucrează la fișier sunt vizibili în partea dreaptă sus a paginii, iar avatarurile lor sunt denumite și pe care se poate face clic.

Poate dura ceva timp pentru a aprecia ce înseamnă acest lucru în termeni practici. Deși este puțin probabil ca designerii să folosească multiplayer-ul pentru a lucra simultan la aceeași parte a unui fișier, este incredibil de reconfortant să nu vă faceți griji cu privire la conflictul versiunilor fișierului, în special pentru echipele mai mari distribuite.

Multiplayer-ul este util atunci când prezentați de la distanță, deoarece face posibil ca toți cei conectați la fișier să urmărească portul de vizualizare al prezentatorului. De asemenea, permite echipelor să ocolească programe suplimentare și să utilizeze Figma ca tablă online (deși soluțiile specifice, cum ar fi Miro, pot fi în cele din urmă mai potrivite pentru această activitate).

În acest scop, este recomandabil să creați componente personalizate pentru a reproduce anumite active ca note post-it virtuale sau elemente de diagramă.

2. Flexibilitatea de a repeta și produce rezultate

Odată ce membrii echipei au fost invitați și schițele inițiale sunt în curs de desfășurare, Figma poate fi folosită pentru a repeta. Motivul principal pentru care a fost creată Figma este proiectarea interfeței - cu tabla albă terminată, echipele pot trece la hărți de flux și wireframes. Din nou, este inteligent să construiești biblioteci de componente care pot fi reutilizate pentru aceste sarcini. Colecția oficială de șabloane oferă inspirație și aranjamente de design pentru a începe.

3. Abilitatea de a construi prototipuri și de a testa

Este destul de ușor să creezi prototipuri interactive cu Figma. Când un fișier Figma este deschis cu drepturi de editare, este posibil să comutați între modul de proiectare și cel de prototipare. Odată ajuns în modul prototip, este posibil să faceți clic pe un element pentru a-l face interactiv, fie din scenă, fie din bara laterală a straturilor.

Cu un element selectat în modul Prototip, în lateral apare un cerc mic. Când trageți, apar linii albastre și poate fi plasat pe ecran sau în stare pentru a afișa rezultatul interacțiunii.

Tranzițiile comune sunt disponibile în Figma, ceea ce face mult mai ușoară crearea de prototipuri de înaltă fidelitate. De fapt, echipa Figma a lansat recent o funcție inteligentă de animare și declanșare. Aspectul animat inteligent interpolează mișcarea elementelor similare, în timp ce declanșatorul de tragere este un nou tip de interacțiune. Ambele îmbunătățesc drastic calitatea prototipurilor interactive.

Testarea utilizatorului

Din nou, un link este tot ceea ce este necesar pentru a distribui prototipurile Figma, chiar și pentru testarea utilizatorilor. Făcând clic pe pictograma mică de redare din dreapta sus, se lansează prototipul și se generează o nouă adresă URL. Este posibil să copiați adresa URL sau să utilizați butonul albastru Share Prototype . Odată ce utilizatorii deschid linkul, li se prezintă un prototip interactiv și pot lăsa comentarii dacă doresc.

Testare pe mobil

Proiectele pentru dispozitive mobile sunt prezentate cu o machetă a unui dispozitiv real care înconjoară prototipul. Dacă este nevoie de mai mult realism pentru a testa interacțiunea, cel mai bine este să descărcați aplicația Figma Mirror pentru testarea specifică dispozitivului.

4. Stabilirea unei surse unice de adevăr

Versiunea istorică

N-ar fi grozav dacă fișierele de proiect ar fi mereu actuale și susținute în mod constant? Această funcționalitate este inclusă în Figma în mod implicit. Fiecare fișier este salvat automat în timp ce se lucrează la el, iar Figma creează o nouă intrare în istoricul versiunilor după 30 de minute de inactivitate. Este creat un jurnal cu toate versiunile salvate automat și fiecare versiune poate fi restaurată dacă este necesar.

Desigur, versiunea automată nu este singura opțiune pentru salvarea muncii. Este posibil să salvați o versiune manual sau să editați o anumită versiune în istoricul versiunilor.

Sisteme de proiectare și biblioteci de componente

Un alt aspect în care Figma strălucește este modul în care le permite designerilor să creeze, să organizeze și să distribuie biblioteci de componente. Orice fișier poate fi publicat ca bibliotecă și fiecare culoare, stil de text, efect, grilă sau componentă este disponibilă pentru a fi utilizată în alte fișiere Figma.

Când se fac modificări oricărui element dintr-o bibliotecă, editările pot fi publicate și propagate la fișierele care folosesc acele elemente. Designerii care lucrează la aceste fișiere pot decide apoi să accepte editările sau nu.

Capacitatea de a decide cum să distribuiți bibliotecile, combinată cu opțiunea de a comuta vizibilitatea sau invizibilitatea elementelor bibliotecii, face ca întreaga experiență să fie fluidă și puternică.

Componentele și bibliotecile pot fi imbricate pentru a crea sisteme de design sofisticate în care totul este versionat și actualizat pentru toți cei implicați. Și toate componentele pot fi adnotate cu comentarii.

5. Handoff lină

Dezvoltator Handoff

Cu Figma, designerii și dezvoltatorii nu au nevoie de un instrument separat, cum ar fi Zeplin, pentru a gestiona transferul. Aceștia pot deschide pur și simplu fișiere și pot trece la modul Cod în bara laterală din dreapta, chiar și cu acces doar pentru vizualizare.

Când modul Cod este activ, selectarea unui element pe scenă va dezvălui toate informațiile relevante necesare implementării, iar toate celelalte informații referitoare la poziția componentei în raport cu alte elemente sunt vizibile. Ca și în cazul soluțiilor similare, codul generat nu este menit să fie în întregime copiat-lipit, dar este util să aveți acces atât de ușor.

6. Versatilitatea care trebuie personalizată și îmbunătățită

API-uri Figma și pluginuri personalizate

API-ul și sistemul de pluginuri Figma facilitează pentru o gamă largă de echipe și discipline de proiectare personalizarea programului pentru nevoile lor specifice de proces. Flexibilitatea Figma oferă utilizatorilor posibilitatea de a interacționa programatic cu platforma. Câteva exemple:

Utilizarea datelor reale

Este extrem de valoros să poți folosi date reale în machete și prototipuri, iar Figma face posibil acest lucru, permițând importarea conținutului din surse externe. Prin valorificarea conținutului real, este posibilă testarea componentelor de design, menținerea actuală a machetelor și implicarea echipelor care nu au legătură cu designul.

Un plugin numit Google Sheets Sync este un exemplu perfect de ceea ce se poate face. Acest plugin simplifică integrarea Google Sheets ca sursă pentru a popula și a sincroniza conținutul componentelor din fișierele Figma.

Fluxuri de lucru avansate

Capacitatea de a găzdui un sistem de proiectare într-un program de proiectare UI este valoroasă doar dacă sistemul este implementat în mod consecvent pe ecrane orientate către client. Din fericire, există API-uri, pluginuri și integrări Figma care vă pot ajuta.

Suplimentul Storybook sincronizează fișierele Figma și arată componentele Figma-design într-un panou alături de componentele implementate. Un alt caz de utilizare interesant este Figma to React Converter, o îmbunătățire a fluxului de lucru care convertește componentele Figma în cod.

Caracteristicile Figma sunt ideale pentru întregul proces de proiectare

Nu există un singur program de proiectare care să poată face față nevoilor fiecărei probleme de proiectare sau proiectare și acesta este un lucru bun. Concurența între instrumentele de proiectare este avantajoasă pentru designeri. Se asigură că companiile care produc instrumentele noastre ascultă ceea ce avem nevoie și ne oferă caracteristici actualizate potrivite pentru locurile de muncă pe care le facem.

Acestea fiind spuse, Figma este un instrument avansat, dar intuitiv, care s-a dovedit mai mult decât capabil să abordeze întregul proces de design digital. Designerii individuali și echipele pot beneficia deopotrivă de funcțiile sale unice de colaborare și iterare, iar acolo unde programul nu este insuficient, o selecție uriașă de pluginuri umple golul.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Puterea Figma ca instrument de proiectare
• Figma vs. Sketch vs. Axure – O revizuire bazată pe sarcini
• Mini Tutorial – Lucrul cu componentele butonului Figma
• Stăpânește-ți meseria cu aceste instrumente UX de top
• Proiectați cu precizie – O revizuire Adobe XD