Construirea unei biblioteci de componente folosind Figma

Am lucrat la crearea și întreținerea bibliotecii principale a sistemului nostru de design, Lexicon. Am folosit aplicația Sketch pentru primul an și apoi ne-am mutat la Figma, unde managementul bibliotecii a fost diferit în anumite aspecte, făcând schimbarea destul de dificilă pentru noi.

Sincer să fiu, ca și în cazul oricărei construcții de bibliotecă, necesită timp, efort și planificare, dar merită efortul, deoarece va ajuta la furnizarea de componente detaliate pentru echipa ta. De asemenea, va ajuta la creșterea consistenței generale a designului și va face întreținerea mai ușoară pe termen lung. Sper că sfaturile pe care le voi oferi în acest articol vor face procesul mai ușor și pentru tine.

Acest articol va sublinia pașii necesari pentru construirea unei biblioteci de componente cu Figma, folosind stiluri și o componentă principală. (O componentă principală vă va permite să aplicați mai multe modificări simultan.) De asemenea, voi acoperi în detaliu organizarea componentelor și vă voi oferi o posibilă soluție dacă aveți un număr mare de pictograme în bibliotecă.

Notă: Pentru a fi mai ușor de utilizat, actualizat și întreținut, am constatat că cel mai bine este să folosiți un fișier Figma separat pentru bibliotecă și apoi să îl publicați ca o „bibliotecă” de echipă în loc să publicați componentele individual.

Noțiuni de bază

Acest ghid a fost creat din perspectiva unui designer și, dacă aveți cel puțin cunoștințe de bază despre Figma (sau Sketch), ar trebui să vă ajute să începeți cu crearea, organizarea și întreținerea unei biblioteci de componente pentru echipa dvs. de proiectare.

Dacă sunteți nou la Figma, verificați următoarele tutoriale înainte de a continua cu articolul:

• Cele mai bune practici: componente, stiluri și biblioteci partajate
• Introducere în Figma: Ghid pentru începători pentru noțiunile de bază Figma (video)
• Figma pentru începători
• Figma 101

Cerințe

Înainte de a începe, există câteva cerințe pe care trebuie să le acoperim pentru a defini stilurile pentru bibliotecă.

Scara de tipografie

Primul pas de făcut este să definiți scara tipografică; vă ajută să vă concentrați asupra modului în care dimensiunea textului și înălțimea liniei cresc în sistemul dvs., permițându-vă să definiți ierarhia vizuală a textelor dvs.

Tipul de scară depinde de ceea ce proiectați. Este obișnuit să folosiți un raport mai mare pentru designul site-urilor web și un raport mai mic atunci când proiectați produse digitale.

Motivul pentru acest lucru se află în spatele obiectivului designului - un site web este de obicei conceput pentru a comunica și a converti, astfel încât să vă ofere una sau două acțiuni directe. În acest context, este mai ușor să ai 36 px pentru un titlu principal, 24 px pentru un titlu secundar și 16 px pentru un text de descriere.

Resursă înrudită: „Grilă în 8 puncte: tipografie pe web” de Elliot Dahl.

Pe de altă parte, produsele sau serviciile digitale sunt concepute pentru a oferi o soluție la o problemă specifică, de obicei cu acțiuni multiple și posibile fluxuri. Înseamnă mai multe informații, mai mult conținut și mai multe componente, toate în același spațiu.

Pentru acest caz, personal mi se pare rar să folosesc mai mult de 24px pentru texte. Este mai obișnuit să folosiți dimensiuni mici pentru componente - de obicei, de la 12 la 18 pixeli, în funcție de importanța textului.

Dacă proiectați un produs digital, este util să discutați mai întâi cu dezvoltatorii. Este mai ușor să mențineți o scară tipografică bazată pe EM/REM mai mult decât pe pixeli reali. Crearea unei reguli pentru a converti pixelii în multipli EM/REM este întotdeauna recomandată.

Resursă înrudită: „Defining A Modular Type Scale For Web UI” de Kelly Dern.

Schema de culori

În al doilea rând, trebuie să definim schema de culori. Cred că cel mai bine este să împărțiți această sarcină în două părți.

1. Mai întâi, trebuie să definiți culorile principale ale sistemului . Recomand să o păstrați simplu și să folosiți maximum patru sau cinci culori (inclusiv culori de validare) deoarece cu cât includeți mai multe culori aici, cu atât va trebui să păstrați mai multe lucruri în viitor.
2. Apoi, generați mai multe valori de culoare utilizând funcțiile Sass, cum ar fi „Lighten” și „Darken” - acest lucru funcționează foarte bine pentru interfețele cu utilizatorul. Principalul beneficiu al acestei tehnici este de a folosi aceeași nuanță pentru diferitele variante și de a obține o regulă matematică care poate fi automatizată în cod. Nu o puteți face direct cu Figma, dar orice generator de culori Sass va funcționa bine - de exemplu, SassMe de Jim Nielsen. Îmi place să măresc funcțiile cu 1% pentru a avea mai multă selecție de culori.

Sfat : Pentru a putea aplica modificările viitoare fără a fi nevoie să redenumiți variabilele, evitați să utilizați culoarea ca parte a numelui culorii. De exemplu, în loc de $blue , utilizați $primary .

Lectură recomandată : „Cum denumești variabilele de culoare?” de Chris Coyier

Stiluri Figma

Odată ce avem setate scara tipografiei și schema de culori, le putem folosi pentru a defini stilurile Bibliotecii.

Acesta este primul pas efectiv în crearea bibliotecii. Această caracteristică vă permite să utilizați un singur set de proprietăți în mai multe elemente .

Exemplu concret

Să presupunem că definiți culoarea mărcii dvs. ca un stil, este un albastru moale și o aplicați inițial la 500 de elemente diferite. Dacă ulterior se decide că trebuie să-l schimbi într-un albastru mai închis, cu mai mult contrast, datorită stilurilor poți actualiza toate cele 500 de elemente stilizate deodată, astfel încât nu va trebui să o faci manual, element cu element.

Putem defini stiluri pentru următoarele:

• Text
• Culori
• Efecte
• Grile

Dacă aveți variații ale aceluiași stil, pentru a le găsi mai ușor mai târziu, puteți denumi stilurile individuale și le puteți aranja în interiorul panoului ca grupuri. Pentru a face acest lucru, trebuie doar să utilizați această formulă:

Nume grup/nume stil

Am inclus mai jos o sugestie despre cum să denumesc textele și stilurile de culori.

Stiluri de text

Proprietăți pe care le puteți defini într-un stil de text:

• Marimea fontului
• Grosimea fontului
• Inaltimea liniei
• Spațiul dintre litere

Sfat : Figma reduce drastic numărul de stiluri pe care trebuie să le definim în bibliotecă, deoarece aliniamentele și culorile sunt independente de stil. Puteți combina un stil de text cu un stil de culoare în același element de text.

Denumirea stilurilor de text

Recomand să folosiți o regulă de denumire, cum ar fi „Mărime/Greutate”
(de exemplu: 16/Regular, 16/SemiGradin, 16/Aldin).

Figma permite doar un nivel de indentare, dacă trebuie să includeți fontul, puteți adăuga oricând un prefix înainte de dimensiune:
FontFamily Size/Greutate sau FF Size/Greutate
*(de exemplu: SourceSansPro 16/Regular sau SSP 16/Regular ).*

Stiluri de culoare

Stilul de culoare folosește valoarea hex ( #FFF ) și opacitatea ca proprietăți.

Sfat : Figma vă permite să setați un stil de culoare pentru umplere și unul diferit pentru chenar în cadrul aceluiași element, făcându-le independente unul de celălalt.

Denumirea stilurilor de culoare

Pentru o mai bună organizare recomand să folosiți această regulă „Culoare/Variant”. Ne-am denumit stilurile de culoare folosind „Primar/Implicit” pentru culoarea de pornire, „Primar/L1”, „Primar/L2” pentru variantele de lumină și „Primar/D1”, „Primar/D2” pentru variantele de întuneric.

Efecte

Când proiectați o interfață, s-ar putea să fie necesar să creați și elemente care utilizează unele efecte, cum ar fi umbrele (glisarea și plasarea ar putea fi un exemplu de model care utilizează efecte de umbre). Pentru a avea control asupra acestor detalii grafice, puteți include în bibliotecă stiluri de efect, cum ar fi umbre sau straturi, și, de asemenea, le puteți împărți pe grupuri, dacă este necesar.

Grile

Pentru a oferi ceva foarte util echipei dvs., includeți stilurile de grilă. Puteți defini grila de 8 px, grilă de 12 coloane, grile flexibile, astfel încât echipa dvs. să nu fie nevoie să le recreeze.

Sfat : Profitând de această caracteristică, puteți furniza toate punctele de întrerupere diferite ca „stiluri de grilă”.

Componentă principală

Figma vă permite să generați mai multe instanțe ale aceleiași componente și să le actualizați printr-o singură componentă principală. Este mai ușor decât ați crede, puteți începe cu câteva elemente mici și apoi le utilizați pentru a vă dezvolta biblioteca.

Pentru a explica mai bine acest flux de lucru, voi folosi una dintre componentele de bază pe care le au toate bibliotecile: butoanele.

Butoane!

Fiecare sistem are diferite tipuri de butoane pentru a reprezenta importanța acțiunilor. Puteți începe să aveți atât butoane primare, cât și secundare cu doar texte și o singură dimensiune, dar realitatea este că probabil va trebui să mențineți ceva de genul acesta:

• 2 tipuri de culori ( Primar | Secundar )
• 2 marimi de nasturi ( obisnuiti | mici )
• 4 tipuri de conținut ( Numai text | Doar pictogramă | Text + Pictogramă dreapta | Pictogramă Stânga + Text )
• 5 stări ( Implicit | Hover | Activ | Dezactivat | Focalizare )

Acest lucru ne-ar oferi până la 88 de componente diferite de întreținut doar cu setul de butoane menționat mai sus!

Să începem pas cu pas

Primul pas este să includeți toate variațiile împreună în același loc. Pentru butoanele pe care le vom folosi:

• O singură formă pentru fundalul butonului astfel încât să putem plasa apoi stilurile de culoare pentru umplere și chenar;
• Singurul text care va avea atât stiluri de text, cât și stiluri de culoare;
• Trei componente de pictograme (poziționate la dreapta, centru și stânga) completate cu stilul de culoare (veți putea schimba cu ușurință pictogramele).

Al doilea pas este să creați componenta principală (utilizați comanda rapidă Cmd + Alt + K pe Mac sau Ctrl + Alt + K pe Windows) cu toate variațiile ca instanțe. Vă sugerez să folosiți un stil diferit și neutru pentru elementele din interiorul componentei master și să folosiți stilurile reale pe sub-componente, acest truc va ajuta echipa să folosească numai sub-componente.

Puteți vedea diferența vizuală dintre o componentă principală și o subcomponentă în pasul următor:

În al treilea pas trebuie să duplicați componenta principală pentru a genera o instanță, acum puteți utiliza acea instanță pentru a crea o subcomponentă, iar de acum înainte fiecare modificare pe care o faceți componentei master va schimba și subcomponenta pe care o faceți. am creat.

Acum puteți începe să aplicați diferitele stiluri pe care le-am văzut anterior elementelor din interiorul subcomponentei și, desigur, puteți ascunde elementele de care nu aveți nevoie în acea subcomponentă.

Alinierea textului

După cum v-am arătat în stiluri, aliniamentele sunt independente de stil. Deci, dacă doriți să modificați alinierea textului, selectați-l apăsând Cmd / Ctrl și modificându-l. Stânga, centru sau dreapta: totul va funcționa și puteți defini diferite subcomponente așa cum am făcut eu cu butoanele.

Sfat : Pentru a vă ajuta să lucrați mai rapid fără a fi nevoie să găsiți stratul exact al elementului, dacă ștergeți un element din interiorul instanței, acesta va ascunde elementul în loc să îl ștergeți efectiv.

Organizarea componentelor

Dacă veniți de la Sketch, este posibil să aveți probleme cu organizarea componentelor din Figma, deoarece există câteva diferențe cheie între aceste două instrumente. Acesta este un scurt ghid pentru a vă ajuta să organizați bine componentele, astfel încât meniul de instanță să nu afecteze negativ eficiența echipei dvs.

Am fost cu toții acolo, soluția este mai ușoară decât crezi!

Iată ce am învățat despre cum să organizez componentele.

Numirea Figma

În timp ce în Sketch toată organizarea depinde doar de numele unei singure componente, în Figma depinde de numele paginii , numele cadrului și numele unic al componentei - exact în această ordine.

Pentru a oferi o bibliotecă bine organizată, trebuie să vă gândiți la ea ca la o organizare vizuală. Atâta timp cât respectați comanda, puteți personaliza denumirea pentru a se potrivi nevoilor dvs.

Iată cum l-am împărțit:

• Nume fișier = Nume bibliotecă (ex. Lexicon);
• Nume pagină = Grup de componente (de ex. Carduri);
• Nume cadru = Tip de componentă (de exemplu, card imagine, card utilizator, card folder etc);
• Numele componentei = starea componentei (de exemplu, Implicit, Hover, Activ, Selectat etc).

Adăugarea nivelurilor de indentare

Când am creat biblioteca Lexicon, am descoperit că aveam nevoie de mai mult de trei niveluri de indentare pentru unele componente, cum ar fi butoanele pe care le-am văzut înainte.

Pentru aceste cazuri, puteți extinde denumirea folosind aceeași metodă ca Sketch pentru simbolurile imbricate (folosind barele oblice din numele componentei, de exemplu „Component/Sub-Component”), cu condiția să o faceți numai după al treilea nivel de indentare, respectând ordinea structurală a primelor trei niveluri, așa cum sa explicat la punctul anterior.

Iată cum ne-am organizat butoanele:

• Nume pagină = Grup de componente (de ex. Butoane);
• Numele cadrului = Dimensiunea componentei (de ex. Regular sau Mic);
• Numele componentei = Stil/Tip/State (de exemplu, Primar/Text/Hover).

Sfat : Puteți include numele componentei (sau un prefix al numelui) în ultimul nivel, acest lucru vă va ajuta echipa să identifice mai bine straturile atunci când importă componentele din bibliotecă.

Organizarea pictogramelor

Organizarea pictogramelor în Figma poate fi o provocare atunci când includeți un număr mare de pictograme.

Spre deosebire de Sketch care utilizează o funcționalitate de defilare, Figma folosește submeniurile pentru a împărți componentele. Problema este că, dacă aveți un număr mare de pictograme grupate în submeniuri, la un moment dat acestea ar putea să iasă din ecran (experiența mea cu Figma pe un MacBook Pro).

Iată două soluții posibile:

• Soluția 1
  Creați o pagină numită „Icoane” și apoi un cadru pentru fiecare literă a alfabetului, apoi plasați fiecare pictogramă în cadru pe baza numelui pictogramei. De exemplu, dacă aveți o pictogramă numită „Plus”, aceasta va merge în cadrul „P”.
• Soluția 2
  Creați o pagină numită „Icoane” și apoi împărțiți pe cadre pe baza categoriilor de pictograme. De exemplu, dacă aveți pictograme care reprezintă o barcă, o mașină și o motocicletă, le puteți plasa într-un cadru numit „vehicule”.

Concluzie

Acum că știți ce se află exact în spatele construcției unei biblioteci a unei echipe în Figma, puteți începe să construiți una singur! Figma are un plan de abonament gratuit care vă va ajuta să începeți și să experimentați această metodologie într-un singur fișier (cu toate acestea, dacă doriți să partajați o bibliotecă de echipă, va trebui să vă abonați la opțiunea „Profesional”).

Încercați, creați și organizați câteva componente avansate, apoi prezentați biblioteca membrilor echipei dvs., astfel încât să îi puteți uimi sau, eventual, să-i convingeți să adauge Figma la setul lor de instrumente.

În sfârșit, permiteți-mi să menționez că aici, în Liferay, ne plac proiectele open-source și, prin urmare, partajăm o copie a bibliotecii noastre Lexicon împreună cu alte resurse. Puteți folosi gratuit componentele bibliotecii Lexicon și celelalte resurse, iar feedbackul dumneavoastră este întotdeauna binevenit (inclusiv sub formă de comentarii Figma, dacă preferați).

• Descărcați biblioteca „Lexicon”.

Dacă aveți întrebări sau aveți nevoie de ajutor cu prima bibliotecă de componente din Figma, întrebați-mă în comentariile de mai jos sau trimiteți-mi un rând pe Twitter.

Resurse suplimentare

• „Grilă în 8 puncte: tipografie pe web”, Elliot Dahl, freeCodeCamp
• Definirea unei scale de tip modular pentru interfața de utilizare web”, Kelly Dern, Medium
• „Palete de culori relativ cu Sass”, Ethan Muller, Sparkbox
• SassMe (instrument creat de Jim Nielsen care vă permite să vizualizați funcțiile de culoare Sass HSL în timp real)
• „Cum numești variabilele de culoare?” Chris Coyier, CSS-Tricks
• „Cele mai bune practici: componente, stiluri și biblioteci partajate”, Thomas Lowry, Figma
• Canalul de YouTube Figma
• Articole de ajutor Figma