Perspectiva unui utilizator de Sketch cu privire la trecerea la Figma

Tot ce trebuie să știți

Ilustrație creată pentru blogul Figma de Peter Barnaba

Nota editorului Figma: de obicei nu punem recenzii Figma pe blogul nostru, dar aici am făcut o excepție. Marco Pacifico a explicat avantajele instrumentului nostru mai bune decât am putea avea, așa că am dorit ca articolul său (care a apărut inițial pe Prototypr.io) să fie o resursă pentru utilizatorii noștri. Mulțumim Marco pentru că ne-a lăsat să îl postăm post!

Am folosit Figma timp de o lună și am fost șters de caracteristicile sale și de cât de bine funcționează. Mi-a plăcut atât de mult încât am făcut campanie pentru ca echipa mea să treacă de la Sketch. Această postare este adaptată din conversațiile pe care le-am avut la locul de muncă și este un fel de ton pentru echipele de produse, în special cele distribuite, care vorbește despre motivul pentru care Figma este mai bun în multe feluri.

În primul rând, să eliminăm elementele de bază

Figma este un instrument de design web bazat pe colaborare în timp real

Este ca Craft Freehand, dar cu toate caracteristicile Sketch (și altele). Funcționează în browserele web și există și aplicații native care vă permit să lucrați offline.

De ce este bazat pe web un lucru bun?

  • Nu există software de descărcare, instalare și actualizare continuă.
  • Nu este nevoie să vă salvați și să vă organizați fișierele. Lucrarea dvs. este salvată automat într-un spațiu comun din cloud.
  • O adresă URL devine sursa de adevăr pe care toată lumea o vede. Care înseamnă…
  • Nu este necesară încărcarea continuă, sincronizarea și aranjarea PNG-urilor în mai multe locuri.

Dar Figma este lent?

Nu. Oamenii experimentează că Figma este mai performantă decât Sketch. Aceasta a fost și experiența mea, chiar și atunci când lucrez cu un fișier mare.

Dar despre ecosistemul Sketch? Sketch are atât de multe plugin-uri pe care ne bazăm pentru fluxul nostru de lucru

Ei bine, sunt aici să vă spun că nu vom pierde nimic semnificativ folosind Figma; nu vom câștiga decât

Figma are toate caracteristicile și capabilitățile Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox toate într-un singur, plus multe alte. Iată doar câteva dintre caracteristicile pe care Figma le are:

  • O interfață similară și toate aceleași instrumente de desen ca Sketch.
  • Prototyping. Figma are o caracteristică de prototipare cu clic, similară cu Craft + InVision.
  • Comentarii încorporate. Oricine are linkul poate adăuga comentarii oriunde pe design, similar cu modul în care comentarii funcționează în InVision. Puteți eticheta oamenii în comentarii, marca comentariile ca soluționate și chiar puteți integra cu Slack.
  • Dezvoltator Handoff. Device-urile pot obține dimensiuni, stiluri și pot descărca pictograme și imagini de pe adresa URL a proiectului. Este ca Zeplin, dar, din nou, nu trebuie să vă sincronizați tablourile de artă ori de câte ori vă actualizați designurile.
  • Controlul versiunii. Figma include istoricul versiunilor pentru toți colaboratorii. Puteți trece înapoi sau furca dintr-o stare anterioară. Aceasta funcționează ca mașina timpului pe un Mac.
  • Colaborare multiplayer. Mai multe persoane pot colabora în timp real. Similar cu Freehand, cu toții vedem pe ecran cursoarele și putem desena lucrurile și a face comentarii.
  • Liveshare. Dacă faceți clic pe avatarul cuiva, veți vedea ce văd pe ecranul lor și urmați cursorul. Aceasta funcționează la fel ca InVision Liveshare (RIP Liveshare).
  • Componente. Similar cu simbolurile din Sketch, dar mai flexibil și mai ușor de proiectat cu. (Mai multe despre aceasta mai jos)
  • Constrângeri. Similar cu redimensionarea în Sketch, dar mai intuitiv.
  • Bibliotecile echipei Puteți partaja și actualiza colecțiile de componente între proiecte.
  • Bonus: puteți chiar încorpora proiecte Figma în Dropbox Paper.

Acum să trecem la lucrurile cu adevărat bune ...

Figma acoperă toate bazele cu caracteristicile menționate mai sus. Dar devine foarte interesant atunci când aveți în vedere modul în care ne îmbunătățește fluxul de lucru.

Mai jos sunt patru moduri în care Figma poate îmbunătăți fundamental modul de lucru.

1. Putem itera WAY mai repede cu colaborarea în timp real

Puteți face o recenzie de proiectare, puteți face actualizări din timp și puteți primi instantaneu feedback despre modificările dvs. Timpul dintre iterații poate merge de la câteva zile la minute, deoarece este pierdut zero timp pentru încărcarea sau sincronizarea ecranelor, crearea de link-uri de partajare, mesageria oamenilor să se uite la link-uri etc. Când am experimentat această primă mână a fost atât de uimitor încât am vărsat o singură lacrimă de bucurie.

Mai jos sunt câteva scenarii din viața reală care pot face munca lentă și obositoare în cele mai bune momente și incredibil de frustrantă în cele mai grave perioade. Toate aceste scenarii dispar prin utilizarea Figma:

  • Când după sincronizarea tuturor ecranelor cu InVision vă dați seama că doriți să creșteți ușor dimensiunea fontului într-o componentă a antetului, astfel încât să efectuați modificarea fișierului de design și apoi să re-sincronizați toate ecranele cu InVision.
  • Când utilizați Craft pentru a sincroniza un prototip complex, multi-ecran, cu InVision, apoi trebuie să petreceți ceea ce se simte ca o oră târând și aruncând ecranele în ordinea corectă în InVision, deoarece Craft le încărcă într-o secvență aleatoare.
  • Când cineva dintr-un alt fus orar uită să se angajeze sau să își încarce munca, trebuie să așteptați până când va reveni online pentru a obține cele mai noi modele.
  • Când există o actualizare software și toate pluginurile terță parte se întrerup și pierdeți ore.

2. Procesul nostru de proiectare devine mai incluziv și mai transparent

Dintr-o dată, fișierul de design devine un loc unde oricine se poate întâlni și avea o discuție despre design. Acest lucru înseamnă că este mai ușor pentru proiectanți să lucreze în paralel, explorând opțiunile și iterând în pași mai scurti. Acest lucru înseamnă că dezvoltatorii pot detecta probleme vocale mai devreme decât mai târziu. Și acest lucru înseamnă că părțile interesate, managerii de proiect sau oricine are legătura pot vedea cum proiectul se desfășoară de la o idee la un aspect vizual lustruit, în loc să aștepte o dezvăluire mare.

În loc să fragmentăm procesul de proiectare în mai multe fișiere, acum există un singur loc care poate spune întreaga poveste și să evolueze pe măsură ce procesul de proiectare se desfășoară.

Îmi place ceea ce Thomas Lowry, designer la OpenText, a scris despre modul în care procesul său de design s-a schimbat folosind Figma:

Pe măsură ce începem să ne cufundăm într-un proiect web masiv, Figma devine rapid o parte esențială a procesului nostru. Vom produce prototipurile noastre de tip wireframing și fidelitate scăzută în Figma până la faza de proiectare vizuală. În timpul acestui proces, vom începe să stabilim componente și să le împingem la biblioteca echipei pentru a fi utilizate în mai multe fișiere. Pe măsură ce extragem componentele în diferite scenarii, iar designul evoluează, posibilitatea de a efectua modificări globale pe toate fișierele va fi o economie de timp imensă.

3. Trecerea noastră de la design la cod este probabil să fie mai rapidă și mai consistentă

Pentru că, cu Figma, este mai ușor să ne structurăm desenele într-un mod care să reflecte modul în care aceste designuri vor fi codate.

Pentru a înțelege de ce, trebuie să știți cum funcționează cadrele. Figma folosește cadre în loc de tablouri de artă. Cadrele sunt diferite, deoarece puteți cuibă cadre în cadrul unui cadru. Când așezați un cadru mai mic peste un cadru mai mare, cele două cadre sunt grupate automat, iar cadrul mai mic devine copilul cadrului părinte mai mare. Cadrele pentru copii sunt poziționate și restricționate în raport cu părintele. Acesta este unul dintre acele lucruri pe care le obișnuiești să le obișnuiești, dar atunci când o faci, te întrebi cum ai făcut-o vreodată fără asta.

Puteți utiliza cadre pentru a împărți un ecran în zone de conținut și apoi a adăuga componente (care sunt ele însele o grămadă de cadre) în interiorul secțiunilor respective. Această abordare combinată cu gruparea automată, poziționarea relativă și constrângerile face ușoară realizarea rapidă a unor modele consecvente și responsive.

Utilizarea cadrelor de acest fel este utilă pentru dezvoltatori, deoarece un cadru din Figma este similar cu un container în HTML. Atunci când dezvoltatorii inspectează desenele, vor putea vedea elemente de interfață interioară amplasate în containerele respective, ceea ce înseamnă că vor avea un model mai precis la care se vor referi în timp ce își scriu codul.

4. Sistemele noastre de proiectare vor fi mai flexibile și mai ușor de proiectat, ceea ce înseamnă că vom economisi timp și vom câștiga consecvență în cadrul proiectelor

Schița are simboluri și Figma are componente. Diferența este că componentele sunt mai flexibile decât simbolurile, ceea ce înseamnă că putem face mai mult cu mai puțin dintre ele, ceea ce înseamnă că avem mai multe șanse să le utilizăm în loc să le rupem sau să începem de la zero.

Cum sunt componentele mai flexibile decât simbolurile?

În Sketch puteți utiliza Simboluri de înlocuire pentru a edita textul sau pentru a schimba simbolurile cuibărite. Dar dacă doriți să modificați orice altceva - spuneți, dimensiunea textului, greutatea bordurii sau culoarea de fundal - va trebui să vă detașați de simbol și să creați o versiune ușor diferită a aceluiași element UI. Pentru a rezolva acest lucru, puteți cuibări fiecare variație într-un singur simbol, dar apoi veți termina cu un panou care înlocuiește din iad. Cu proiecte mari și interfețe de utilizare complexe, organizarea și menținerea tuturor permutiilor devine rapid de neatins.

Cu Figma, puteți accesa și modifica proprietățile oricărui strat dintr-o componentă fără a-l detașa de master. Același lucru este valabil și pentru componentele imbricate. Acum, ori de câte ori schimbați o proprietate a unui strat din componenta principală, aceste modificări vor fi propagate doar la instanțele pentru care proprietatea respectivă nu a fost deja anulată.

Cred că aceste trei gif-uri fac o treabă bună în a descrie vizual cum funcționează.

1. Creați o componentă și copiați-o pentru a crea două instanțe ale masterului.2. Modificările componentei principale sunt propagate instantaneu la toate instanțele sale.3. Cu excepția faptului că orice proprietate suprasolicitată va rămâne anulată, chiar și atunci când stăpânul este schimbat.

Cum sunt mai ușor de proiectat componentele decât simbolurile?

În primul rând, nu trebuie să vă faceți griji cu privire la o structură de denumire (de exemplu, pictograme / Căutare), deoarece creați componente. Puteți redenumi o componentă principală mai târziu și va actualiza toate instanțele - nu este cazul în Sketch. Pentru a crea o categorie de componente, trebuie doar să le grupați într-un cadru și un nume care să încadreze orice categorie este. Aceasta înseamnă că este ușor să reorganizezi lucrurile mai târziu doar prin glisarea componentelor. Pentru mine, acest lucru a redus cu adevărat cheltuielile cognitive ale creării de componente și urmărirea lor.

În al doilea rând, accesarea componentelor din Figma este mult mai ușoară decât accesarea simbolurilor din Sketch. Încă o dată nu trebuie să vă gândiți la o structură de denumire pentru a naviga într-un meniu cu nume de simboluri. În schimb, puteți găsi (și vedeți!) Componente ca listă de miniaturi. Pentru a adăuga o componentă pe un ecran sau pentru a schimba o instanță, trebuie doar să trageți și să o fixați pe panză. Sau puteți copia-lipi componenta principală pentru a crea o nouă instanță - nu o puteți face chiar în Sketch fără a crea un simbol nou.

Vedeți și accesați componentele dintr-o filă din panoul de straturi

Un alt lucru care face mai ușor proiectarea cu componente este faptul că în Figma puteți edita componenta principală în contextul vizualizării mai mari, în loc să fie nevoie să mergeți la o pagină separată pentru a face modificări. Mi se pare super enervant să mă anunț pe o altă pagină din Sketch de fiecare dată când vreau să editez un simbol, apoi trebuie să revin la design pentru a vedea dacă modificările mele se aliniază.

De la https://blog.figma.com/components-in-figma-e7e80fcf6fd2

Înveliți

Cu cât folosesc mai mult Figma, cu atât sunt mai multe motive pentru care îmi place. Există o mulțime de detalii pe care le sfârșești descoperind pe măsură ce începi să lucrezi cu el. În general, se simte ca un instrument mai evoluat și mai bine gândit pentru proiectarea interfeței.

Alte resurse

Nota editorului: Publicată inițial la blog.prototypr.io pe 6 aprilie 2018. Figma nu a sponsorizat crearea acestei postări.