Consistența este cheia - Cum să construiți un sistem de proiectare Figma

Este cunoscut în rândul designerilor că un sistem de design bun poate avea un impact uriaș asupra calității produselor pe care le livrăm și asupra ritmului în care le putem dezvolta. Deoarece cazul pentru crearea unui sistem de proiectare cuprinzător a fost clarificat de mai multe ori, companii precum Google, GitHub, IBM și alții care le folosesc pentru a crea produse mai bune într-un ritm mai mare, întrebarea a trecut de la „De ce ar trebui să avem un design sistem?" la „Cum putem crea un sistem de design grozav?”

Deci, ce este mai exact un sistem de proiectare? Will Fanguy îl definește ca „o colecție de componente reutilizabile, ghidate de standarde clare, care pot fi asamblate pentru a construi orice număr de aplicații”. Un sistem de proiectare poate include nu numai o bibliotecă de componente UI și o bibliotecă de modele, ci și un ghid de stil, bune practici, cod și multe altele. La fel ca proiectul unui arhitect pentru o clădire, un sistem de proiectare servește, de asemenea, drept „sursă unică de adevăr” pentru echipa de produse în timp ce construiește produse, precum și ajută la menținerea coerenței.

GitHub a mers chiar atât de departe încât și-a partajat biblioteca de componente Figma – un exemplu grozav de sistem de proiectare bazat pe Figma. Instrumente mai extinse precum Storybook și Component-Driven Development sunt, de asemenea, resurse extrem de utile pentru implementarea și documentarea unui sistem de proiectare.

Un sistem de proiectare menține coerența designului și ar trebui să fie util tuturor celor implicați în crearea unui produs. Este un set de instrumente care îi ajută pe designeri să creeze noi ecrane, fluxuri și prototipuri mai rapid. Un sistem de proiectare bun ajută dezvoltatorii să înțeleagă logica din spatele deciziilor de proiectare și ajută la crearea unui produs mai coeziv. Acesta accelerează procesul de proiectare și oferă designerilor mai mult timp pentru experimentare.

Pentru acei designeri care lucrează cu Figma, să ne uităm la modul în care crearea unei biblioteci de componente în Figma poate fi o parte cheie a unui sistem de proiectare cuprinzător.

Puterea unei biblioteci de componente

Uneori, poate fi contraproductiv să investești în crearea unui sistem de design prea devreme. În primele etape ale proiectării unui produs, procesul este încă fluid. De exemplu, dacă sunt experimentate două bare de navigare principale, adăugarea ambelor la o bibliotecă de componente nu ar avea sens, deoarece va deruta pe toți membrii echipei. Este mai bine să așteptați până când designul produsului s-a stabilit - de preferință testat și oarecum finalizat.

Dacă un produs este unul matur și nu are o bibliotecă de componente existentă, sistemul de proiectare ar trebui să fie deja determinat de implementarea curentă. Dar nu este încă codificat. În acest moment, ar fi avantajos să definiți modelele UX comune și să distilați produsul într-un set de componente care sunt utilizate în mod regulat în întregul produs. În plus, este ideal dacă biblioteca de componente este păstrată într-o locație centrală, care este ușor accesibilă tuturor.

Un sistem de proiectare este în primul rând un set de instrumente

Încercarea de a utiliza un sistem de proiectare ca un set de instrumente este un mare test de turnesol pentru eficacitatea acestuia. Dacă mai mulți designeri îl folosesc în mod regulat pentru a-și accelera procesul, face o treabă bună. Dacă dezvoltatorii îl pot referi pentru culori, stiluri sau pentru a lucra cu mai puține contribuții din partea designerilor, acesta este și un semn bun.

În general, nu este util să includeți componente foarte complexe sau cele care pot fi utilizate doar o dată sau de două ori în produs. Cu cât ceva este mai reutilizabil, cu atât mai mult aparține unui sistem de design.

Figma a lansat recent analiza sistemelor de proiectare pentru organizații, în care echipele pot vedea cât de eficiente sunt diferitele părți ale unui sistem de proiectare și pot ajuta la optimizarea acestuia.

De ce Figma este excelentă pentru crearea unei biblioteci de componente

Figma este un instrument de proiectare puternic, cu multe caracteristici excelente, dar există un subset de elemente care devin deosebit de utile atunci când proiectați produse complexe: Stiluri , Componente și Fișiere de bibliotecă . Aceste caracteristici ajută la menținerea la zi a sistemelor de proiectare, ajută la menținerea coerenței între modele și oferă o comandă rapidă pentru actualizarea mai multor modele dintr-o locație centrală.

• Stilurile sunt culori și stiluri de tip (font, dimensiune, greutate etc.) care sunt definite într-un singur loc și pot fi aplicate mai multor obiecte.
• Componentele sunt lucruri precum butoanele sau bulele de chat și pot fi construite din stiluri, obiecte precum forme și text și alte componente.
• Fișierele de bibliotecă permit partajarea stilurilor și componentelor între mai multe fișiere și cu o echipă sau organizație.

Figma are la bază colaborarea și partajarea. Fișierele de design pot fi editate de oricine în browser, partajate liber și se actualizează în timp real, deoarece mai mulți utilizatori le pot edita simultan. Acest lucru deschide sistemul de proiectare către o colaborare mai eficientă nu numai între designeri, ci și cu dezvoltatorii și alte părți interesate.

Crearea unui fișier de bibliotecă

În Figma, poate fi creat un fișier de bibliotecă care va servi mai mult sau mai puțin ca inițiere a unui sistem de proiectare. Aici, putem defini stiluri și componente care sunt apoi partajate în cadrul echipei sau organizației și utilizate în mai multe modele. Stilurile și componentele pot fi actualizate într-un singur loc, iar aceste modificări pot fi apoi aduse automat în toate fișierele de design individuale.

Acest lucru are câteva avantaje cheie:

1. Viteza . Economisește timp prin eliminarea nevoii unui designer de a actualiza manual sute de modele. Având componentele gestionate într-un singur fișier de bibliotecă, actualizarea unei culori într-un singur loc se poate propaga în fiecare design creat folosind biblioteca de componente cu doar câteva clicuri.
2. Consecvență . Reduce probabilitatea de eroare prin automatizarea sarcinii.

Organizare

Când construiți un sistem de proiectare în Figma, este util să faceți paralele între instrumente și teorie. De exemplu, Styles in Figma ar putea fi considerat cel mai elementar nivel, chiar mai de bază decât Atoms în modelul Atomic Design al lui Brad Frost. Acestea sunt lucruri precum culoarea și fontul care ajută la formarea estetică a produsului.

O componentă Figma simplă ar fi considerată un atom în modelul de proiectare atomică, de exemplu, un buton. O componentă Figma mai complexă ar fi considerată o moleculă sau un organism , care este apoi folosit pentru a construi șabloane și pagini .

Unele dintre cele mai utile lucruri pe care le aveți într-o bibliotecă de componente sunt:

• Culori
• Fonturi
• Activele mărcii, logo-ul etc.
• Navigare
• Butoane
• Notificări
• Modale
• Elemente de formular și validare

Construirea unui sistem de proiectare în Figma – Noțiuni introductive

În acest exemplu, vom crea un formular simplu de conectare și vom explica Componentele și stilurile care pot fi deduse și utilizate.

În primul rând, să ne gândim la Componentele și stilurile care pot fi reutilizate din acest formular. Există un card care conține un logo, câmpuri de formular și un buton. Există, de asemenea, trei stiluri de font și câteva culori și efecte diferite care pot fi utile.

Odată ce stilurile și componentele care urmează să fie incluse sunt identificate în bibliotecă ca mai sus, este timpul să creați un fișier bibliotecă și să începeți să îl populați.

Creați un fișier de bibliotecă Figma

Creați un fișier nou și publicați-l ca bibliotecă. Odată ce un fișier nou este creat, faceți clic pe fila Active , faceți clic pe pictograma Bibliotecă , apoi faceți clic pe Publicare . Aceasta publică stilurile și componentele în fișierul bibliotecă, astfel încât acestea să poată fi utilizate în alte fișiere.

Stilurile și componentele pot fi acum create în fișierul bibliotecă și pot fi utilizate în alte fișiere și actualizate din fișierul bibliotecă centrală.

Cum se creează un stil Figma

Crearea stilurilor este aceeași în fișierele Bibliotecă ca și în orice alt fișier, prezentat în pașii de mai jos.

• Selectați obiectul din care doriți să creați un stil. Stilurile pot fi culori, proprietăți de text, efecte și grile de aspect.
• Faceți clic pe butonul Stiluri (patru puncte într-un pătrat) de lângă proprietatea care va fi utilizată în noul stil, apoi faceți clic pe butonul plus din popover pentru a crea un stil nou.

• Aceasta va afișa un modal pentru a denumi stilul. Este adesea util să folosiți un nume semantic mai degrabă decât un nume de prezentare, de exemplu, „Culoare primară” în loc de „Verde”, astfel încât să fie mai clar pentru ce este destinat stilului.
• Publicați stilul în Biblioteca de echipă folosind fereastra pop-up care apare în colțul din dreapta jos al ecranului sau repetați pașii făcuți pentru a publica Biblioteca în primă instanță.

Iată tutorialul Figma despre cum să creezi un stil .

Cum se creează o componentă Figma

Crearea unei componente este, de asemenea, foarte ușoară. Pur și simplu selectați obiectul din care doriți să creați o componentă, apoi faceți clic dreapta și selectați „Creează componentă”.

Componentele sunt publicate în Biblioteca echipei în același mod ca stilurile.

Iată tutorialul Figma despre cum să creați o componentă .

Odată ce au fost create câteva Stiluri și Componente, fișierul Bibliotecă poate fi partajat cu echipa, iar Stilurile și Componentele pot fi folosite în orice număr de fișiere.

Folosind Biblioteca Figma

Pentru a utiliza aceste stiluri și componente într-un alt fișier, fișierul Bibliotecă trebuie să se conecteze la un fișier de design existent în care dorim să folosim noile stiluri și componente. Pur și simplu deschideți din nou modulul Biblioteci (Assets, pictograma Bibliotecă) și porniți comutatorul de comutare. pentru ca fișierul Bibliotecă să fie utilizat.

Biblioteca de componente este acum gata de utilizare. Componentele pot fi plasate trăgându-le în fișierul de proiectare din fila Elemente din stânga ecranului. Stilurile de bibliotecă pot fi folosite în același mod ca și stilurile locale atunci când se schimbă stilurile de text, culorile de umplere, liniile, efectele și grilele de aspect.

Când Componentele și Stilurile sunt actualizate în Bibliotecă, fișierele care le folosesc trebuie să accepte modificările. Figma va afișa o notificare când se fac actualizări în fișierul Bibliotecă, oferind opțiunea de a le publica. Odată publicat, orice fișier care utilizează Componente și stiluri va trebui să accepte modificarea printr-o notificare similară sau fila de active pentru a-și actualiza componentele și stilurile. Acest lucru împiedică publicarea și actualizarea neașteptată a modificărilor.

Dincolo de construirea unei biblioteci de componente în Figma

Figma acoperă doar partea din biblioteca de componente a unui sistem de proiectare complet. Pentru un sistem de design complet, merită luate în considerare și alte piese care ar putea fi încorporate, cum ar fi ghidurile de marcă, ghidurile de stil de conținut și documentația pentru dezvoltatori.

Ghidul de stil al conținutului Mailchimp este un exemplu excelent, care detaliază tonul vocii și brandingul prin conținut. GitHub are o documentație grozavă despre cum funcționează biblioteca lor de componente în cod, iar Sistemul de design de materiale de la Google are, de asemenea, câteva exemple excelente de documentare a logicii din spatele sistemului de proiectare.

Ca instrument de design, Figma s-a maturizat foarte mult, iar noi funcții sunt adăugate constant. Adăugarea unui sistem de design Figma cu analize încorporate, care este accesibilă întregii organizații, este un pas uriaș înainte. Adăugarea acestor caracteristici indică faptul că Figma își propune să fie un instrument de proiectare complet și cuprinzător și este pe cale de a realiza acest lucru.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Puterea Figma ca instrument de proiectare
• Eficientizați designul colaborativ cu Figma
• Mini Tutorial – Utilizarea caracteristicilor Figma pentru întregul proces de proiectare
• Mini Tutorial – Lucrul cu componentele butonului Figma
• Stăpânește-ți meseria cu aceste instrumente UX de top