Lucruri minunate în Figma

A trecut foarte mult timp de când îmi amintesc că sunt atât de entuziasmat de starea instrumentelor de proiectare. De la migrarea Adobe către Creative Cloud, părea să existe un interval de timp stagnant comparativ [până în prezent], în care abordarea gamei extinse de dimensiuni de viewport și densități de pixeli devenea din ce în ce mai frustrantă. Din fericire, există companii software mai mici și mai agile, care construiesc produse fantastice, care oferă abordări și fluxuri de lucru complet noi pentru instrumentele de proiectare din genul UI / UX.

Sketch a câștigat o bază de utilizator meritată și deși Adobe a încercat să răspundă cu XD (este prea devreme să spun că nu sunt impresionat?), Sunt cel mai încântat de potențialul Figma.

Dacă sunteți nou la Figma, se va simți foarte familiar dacă ați folosit vreodată Sketch. Configurația ferestrei este aproape identică: instrumente în partea de sus, straturi în stânga, inspector în dreapta și pânză în mijloc - interfața de utilizare este însă diferită: plat (în stilul său) și minimă în comparație cu GUI-ul OSX din Sketch. Plăcile sunt numite cadre, iar simbolurile sunt numite componente în Figma. Editarea componentelor are loc în linie (nu pe o pagină separată, așa cum se întâmplă în Sketch) și chiar culorile de umplere și cursă și alte atribute pot fi ignorate pe lângă schimbarea textului. Una dintre cele mai impresionante și unice caracteristici ale Figma este modul multiplayer care permite utilizatorilor să colaboreze în timp real - veți vedea cursorii colaboratorilor dvs. care lucrează pe aceeași pânză interacționând cu designul. Deoarece este bazat pe browser (nu vă lăsați să vă speriați - este rapid și receptiv), oricine are un browser îl poate utiliza, indiferent de sistem de operare. Acest lucru înseamnă că nu este necesar niciun software proprietar, ceea ce duce la o distribuire și mai ușoară dezvoltatorilor.

În timp ce modul multiplayer s-ar putea să nu se încadreze în fluxurile de lucru din ziua de azi, bănuiesc că acest lucru se va schimba. Am găsit deja că este foarte util să lucrez de la distanță cu colegii, chiar și ca o tablă virtuală pentru a elimina cadrele de filetare brute și a curge în fazele incipiente ale unui proiect. Văzând că cursorul colaboratorilor dvs. construiește designul alături de dvs. este inspirat de încredere - elimină sentimentul de incertitudine pe care îl obțineți deseori despre controlul versiunii și suprascrierea care apare atunci când utilizați unele aplicații cloud.

La întâmplare la o parte: După ani în care am folosit Illustrator, îmi place foarte mult că pot doar să apăs „I” pentru a accesa instrumentul de plecare.

În timp ce Figma (în acest moment) lipsește unele caracteristici pe care Sketch le are (în special în jurul definițiilor de stil și o API accesibilă pentru dezvoltarea plugin-urilor), există o mulțime de funcții cu adevărat inteligente, de care sunt încântat. Programul lor de lansare rapidă mă lasă încrezător că multe dintre funcțiile și funcțiile lipsă pe care utilizatorii le sugerează nu sunt prea departe. Scopul acestei postări este de a nu da detalii despre multe dintre caracteristicile caracteristice ale Figma care au fost documentate în altă parte (aici, aici, aici și aici); în schimb, am vrut să evidențiez câteva dintre „micile detalii” preferate pe care le aplaud echipa echipei Figma pentru implementare. Aceste detalii fac cumulativ o diferență uriașă.

Selectarea obiectelor de prim plan

Când aveți o varietate de obiecte stivuite deasupra unui obiect de fundal (cum ar fi o interfață de utilizare a cardului sau care conține fundal), puteți selecta cu ușurință obiecte deasupra fără a fi nevoie să schimbați + faceți clic pe ele individual sau blocați stratul de fundal pentru a face o casă de selecție. Acest lucru va funcționa chiar și pentru a selecta obiecte din componente sau grupuri. Pur și simplu țineți CMD și trageți o casetă de selecție în jurul obiectelor pe care doriți să le selectați. Înainte de a trage, în timp ce apăsați CMD, treceți mouse-ul peste obiectul care conține - îl va evidenția cu un contur - odată ce faceți clic și începeți să glisați pentru a selecta, va ignora acel obiect și vă va permite să selectați obiecte în prim plan. Inteligent!

Dimensiunea și alinierea casetei de text

Figma vă permite să setați atât lățimile, cât și înălțimile casetelor de text și, pe lângă alinierea verticală a textului. Aceasta este o caracteristică de bază, dar lipsește din Sketch. Luați cazul de mai sus. În Sketch, ar trebui să creez două simboluri: unul pentru etichete cu un singur buton de linie și unul pentru două configurații de linie - sau - aș avea nevoie să creez trei simboluri; două pentru a găzdui fiecare configurație a casetei de text și pentru a le schimba ca înlocuind un al treilea simbol maestru. În timp ce este posibil, soluția este greoaie și are drept consecință simboluri suplimentare, iar problema adăugată este necesară pentru a schimba anularea atunci când descoper că un anumit șir de text este prea lung. În Figma pot realiza acest lucru cu un singur simbol. Când șirul de text este prea lung pentru o singură linie, se înfășoară în două linii și rămâne centrat vertical în caseta de text a înălțimii fixe.

La fiecare cadru pot fi adăugate mai multe grile. Grilele pot fi setate ca fiind fixe sau stângi sau pentru a se întinde. Fiecare grilă poate fi colorată independent.

Grile

Setările grilei (aspectului) din Sketch funcționează ... dar există ceva despre asta care nu m-a simțit niciodată corect. Crearea grilei în Figma se simte mult mai simplu și versatil. Puteți adăuga cât mai multe grile într-un cadru doriți și puteți adăuga chiar și grile în componentele dvs. Puteți stila fiecare grilă individual pentru identificare. De exemplu, puteți avea o grilă cu 3 coloane și o grilă cu 6 coloane și să le colorați în mod unic. Figma are, de asemenea, o setare care va întinde grila și o va scala la dimensiunile cadrului. Posibilitatea de a specifica rețele fixe și lichide (întinse) este foarte utilă atunci când construiți un sistem care să funcționeze într-o gamă de dimensiuni de afișare. Adăugarea de rânduri la grilă funcționează exact în același mod, dar este controlată independent de coloane ca un strat suplimentar de grilă. Fiecare grilă poate fi controlată independent și comutat de inspector. CTRL + G va comuta rapid grilele pe toate cadrele.

Alinia la grilă

Când creați componente în Figma, puteți să fixați obiecte din componenta dvs. în grila cadrului dvs. Alinierea este menținută pe măsură ce scalați componenta sau cadrul. Aceste detalii au puterea de a face adaptarea design-urilor la diferite dimensiuni de portofoliu mult mai ușor și mai rapid!

Conținut clip

Figma are o caracteristică facilă și ridicol de simplă, care vă permite să comutați dacă opera dvs. de artă este sau nu decupată în cadru. La început nu m-am gândit prea mult la această caracteristică până când nu a trebuit să evidențiez câteva fluxuri între tablourile de artă din Sketch. Când doriți să faceți ceva simplu, cum ar fi săgeți săgeți care conectează butoanele de pe o placă de artă la un alt cadru, săgețile sunt decupate în tabloul tău. Soluțiile posibile sunt să vă păstrați săgețile în afara planșei de artă sau să conțineți toate plăcile dvs. de artă în cadrul altei planșe de artă. În Figma trebuie doar să debifați caseta - acest lucru este și mai util atunci când lucrați pe ecrane cu conținut lung de defilare, deoarece puteți previzualiza ceea ce puteți vedea în viewport, dar puteți accesa cu ușurință pentru a edita conținutul care se află în afara cadrului.

Constrângerile

Nu aveam să intru în detalii deosebite cu privire la constrângeri, deoarece aceasta este o caracteristică destul de bine documentată, dar ar fi greu să scriu despre Figma fără să menționez cei care nu sunt familiarizați cu ei. În comparație cu Sketch (care vă oferă 4 moduri de restricție diferite), Figma vă oferă 5 moduri diferite și vă permite să le atribuiți independent ca atribute verticale sau orizontale. Interfața de utilizator pentru controlul constrângerilor este surprinzător de simplă. Poate fi controlată prin selectarea meniului derulant sau prin identificarea locațiilor de constrângere pe o vizualizare mică a părului încrucișat. Dacă diagrama nu are sens la început, odată ce începeți să faceți selecții din lista verticală. Îmi place că aici nu au încercat să opteze pentru pictograme confuze în lista verticală, opțiunile de text sunt mult mai descriptive. Figma vă permite să definiți constrângerile din componentele dvs. și ale componentei dvs. în ansamblu în raport cu cadrul dvs., astfel încât acestea să răspundă modificărilor la dimensiunea cadrului.

Câteva lucruri pe care aș dori să le văd în Figma

Restricții de la component la component
Capacitatea de a defini constrângerile sau relațiile dintre două sau mai multe componente. Când un obiect sau casetă de text devine mai lung, capacitatea acestuia de a repoziționa / schimba un obiect adiacent sau chiar de a se extinde.

Date live
Posibilitatea de a insera date în direct sau seturi de date personalizate, inclusiv imagini în design (așa cum vedem cu Craft de la Invision).

Lățimea grilei
Posibilitatea de a defini, de asemenea, rețelele în funcție de lățimea lor totală și de a calcula lățimile automate ale coloanelor.

Controale de tip
Mai multe opțiuni pentru controlul tipului, cum ar fi accesul la funcțiile OpenType, liste ordonate și numerotate, punctuație suspendată, acces la o paletă glifă și capacitatea de a defini stiluri de tip universal.

Pagini
Paginile sunt o caracteristică care îmi place foarte mult și le-am găsit utile în Sketch pentru a separa, organiza și grupa ecrane.

Figma nu și-a anunțat încă modelul de prețuri pe termen lung (în prezent este gratuit), sau dacă există planuri pentru un mod de lucru offline sau metode alternative de gestionare a proiectelor prea sensibile pentru a fi stocate în cloud - dar caut cu entuziasm înainte pentru a vedea ce urmează. De asemenea, trebuie să remarc faptul că, deși mi-au plăcut multe dintre aceste funcții, folosesc și Sketch zilnic și mă bucur foarte mult să o folosesc. Există o comunitate fantastică de dezvoltare de plugin-uri cu Sketch și suplimente utile precum Craft. Deocamdată nu am citit nimic despre dezvoltarea plugin-urilor sau despre o API accesibilă pentru Figma, dar am citit că echipa explorează modalități prin care utilizatorii pot aduce date reale în proiectare. Îmi place că o mare parte din funcționalitatea Sketch este extinsă generos de o comunitate de dezvoltatori de pluginuri, dar mă întreb dacă acest lucru introduce provocări pe măsură ce versiunile noi ale Sketch sunt lansate. Pluginul open-source pe care ai ajuns să te bazezi pe același lucru funcționează la fel după fiecare actualizare? Este dificil să mențineți compatibilitatea sau testarea conflictelor / bug-urilor? Sunt cu adevărat curios. În orice caz, abia aștept să văd ce urmează!

Partajează mai jos caracteristicile / detaliile tale preferate în Figma!