Crearea tabelelor în Figma

În acest tutorial, vom vorbi despre cum pot fi create tabelele în Figma folosind componente și metodologia Atomic Design. De asemenea, vom arunca o privire asupra elementelor de bază ale aspectului tabelului și asupra modului în care componentele pot fi incluse în biblioteca de componente, astfel încât acestea să poată deveni parte a sistemului de proiectare pe care îl utilizați.

Pentru a vă fi ușor, am pregătit un exemplu de machetă care utilizează toate componentele de care avem nevoie pentru acest tutorial.

Pentru a urma, va trebui să înțelegeți cel puțin conceptele de bază Figma, interfața sa și cum să lucrați cu componentele Figma. Cu toate acestea, dacă sunteți nou în Figma și lucrați cu date de tabel, vă recomand să vizionați videoclipul „Noțiuni introductive” pentru a vă ajuta să înțelegeți mai bine Figma de la capăt la capăt, precum și articolul „Cum să arhitecți un tabel web complex” care a fost publicat nu cu mult timp în urmă aici pe Smashing Magazine.

Pentru a simplifica scopul acestui tutorial, să presupunem că culorile, fonturile și efectele există deja ca stiluri în proiectul Figma pe care urmează să-l începeți. În ceea ce privește designul atomic, ei sunt atomi . (Pentru a afla mai multe, cei de la littleBits au scris un articol grozav pe această temă.)

Publicul țintă pentru acest tutorial sunt designeri (UX, UI) care fie au adoptat deja Figma în fluxurile lor de lucru, fie intenționează să încerce Figma în următoarele proiecte de design, dar nu sunt siguri cum să înceapă.

Așa că, fără alte prelungiri, haideți să pătrundem!

Notă rapidă : în timpul scrierii acestui articol, Figma a introdus pluginuri. La momentul publicării, nu existau unele bune pentru lucrul cu tabele, dar lucrurile s-ar putea schimba rapid. Cine știe, poate că acest articol va ajuta de fapt un dezvoltator de plugin Figma aspirant să creeze un plugin Figma Tables cu adevărat îngrijit, sau cel puțin, sper că o va face.

Introducere

Imaginează-ți masa ca pe un organism. Celula de tabel este apoi o moleculă care este compusă din atomi individuali. În termeni de design, acestea sunt proprietăți ale celulei .

Deci, să începem cu celula. Are trei proprietăți:

1. fundal
2. Frontieră
3. Conţinut

Acum vom arunca o privire mai atentă la fiecare dintre ele.

fundal

Fundalul va fi o componentă separată în Figma. Dimensiunea nu contează cu adevărat, deoarece putem întinde componenta după cum avem nevoie, dar să începem cu setarea dimensiunii la 100×36 pixeli.

În această componentă, adăugați un dreptunghi de aceeași dimensiune ca și componenta în sine. Va fi singurul obiect din interiorul componentei. Trebuie să atașăm marginile dreptunghiului la marginile componentei utilizând constrângeri (setați constrângeri la „Stânga și Dreapta” și „Sus și Jos” în panoul din dreapta în secțiunea Constrângeri ), astfel încât dreptunghiul să se întindă automat la dimensiunea componentă.

Dacă doriți să vedeți acest lucru în acțiune, urmăriți acest tutorial despre cum funcționează constrângerile în Figma.

Culoarea de umplere a dreptunghiului va determina culoarea de fundal a celulei. Să alegem culoarea albă pentru el. Recomand alegerea acelei culori dintre stilurile de culoare care sunt configurate la începutul proiectului.

Frontieră

Acesta este un pic mai complicat decât fundalul. Nu puteți crea doar un dreptunghi cu un accident vascular cerebral. Este posibil să avem nevoie de diferite tipuri de margini: unul pentru celulele separate (cu margini în jur), unul pentru întregul rând de celule cu doar margini de sus și de jos sau unul pentru antetul tabelului pe care ar putea dori să îl separăm de restul cu un linie mai lată. Există multe opțiuni.

Proprietăți de frontieră:

• Linia de chenar (stânga, dreapta, sus, jos sau absența oricăruia dintre ele)
• Lățimea liniei
• Culoarea liniei
• Stilul de linie

Fiecare linie din chenarul celulei poate avea o lățime, culoare și stil diferite. De exemplu, cea din stânga ar putea fi o linie roșie continuă, iar cea de sus o linie gri punctată.

Să creăm o componentă cu o dimensiune de 100×36 pixeli (la fel ca și înainte). În interiorul componentei, trebuie să adăugăm 4 linii pentru fiecare chenar. Acum fiți atenți la cum vom face asta.

1. Adăugați o linie pentru marginea de jos cu lungimea lățimii componentei;
2. Setați-i poziția la marginea de jos și constrângerile pentru a se întinde pe orizontală și lipiți-vă de marginea de jos;
3. Pentru marginea de sus , duplicați linia pentru marginea de jos, rotiți-o cu 180 de grade și rămâneți în partea de sus a componentei. (Nu uitați să-i schimbați constrângerile pentru a rămâne în vârf și întindeți pe orizontală.);
4. Apoi, pentru marginea din stânga , rotiți pur și simplu cu -90 de grade și setați poziția și constrângerile acestuia să fie în partea stângă, lipindu-se de marginea stângă și întinzându-se vertical;
5. Nu în ultimul rând, puteți crea chenarul potrivit rotindu-l cu 90 de grade și setându-i poziția și constrângerile. Setați culoarea și lățimea conturului pentru fiecare linie la gri (selectați dintre stilurile de culoare) și, respectiv, 1 pixel.

Notă : s-ar putea să vă întrebați de ce am rotit linia pentru marginea de jos. Ei bine, atunci când modificați lățimea cursei pentru o linie în Figma, aceasta va crește. Așa că a trebuit să setăm această direcție de „creștere” în centrul componentei. Modificarea lățimii liniii (în cazul nostru este dimensiunea marginii) nu se va extinde în afara componentului (celulă).

Acum putem ascunde sau personaliza stilurile separat pentru fiecare chenar din celulă.

Dacă proiectul dvs. are mai multe stiluri pentru marginile tabelului (câteva exemple de margine prezentate mai jos), ar trebui să creați o componentă separată pentru fiecare stil. Pur și simplu creați o nouă componentă principală așa cum am făcut înainte și personalizați-o așa cum aveți nevoie.

Componenta de cursă separată vă va economisi mult timp și vă va adăuga scalabilitate . Dacă modificați culoarea conturului în interiorul componentei master, întregul tabel se va ajusta. La fel ca și cu culoarea de fundal de mai sus, fiecare celulă individuală poate avea propriii parametri de cursă.

Conţinut

Aceasta este cea mai complexă componentă dintre toate.

Trebuie să creăm toate variantele posibile ale conținutului tabelului în proiect: text simplu, un text cu o pictogramă (stânga sau dreapta, aliniere diferită), casete de selectare, comutatoare și orice alt conținut pe care o celulă îl poate conține. Pentru a simplifica acest tutorial, vă rugăm să verificați componentele din fișierul model. Cum să creați și să organizați componente în Figma este un subiect pentru un alt articol.

Cu toate acestea, există câteva cerințe pentru componentele de conținut:

• Componentele ar trebui să se întindă ușor atât pe verticală, cât și pe orizontală pentru a se potrivi în interiorul unei celule;
• Dimensiunea minimă a componentei ar trebui să fie mai mică decât dimensiunea implicită a celulei (în special înălțimea, țineți cont de posibilele umpluturi de celule);
• Evitați orice margini, astfel încât componentele să se poată alinia corect în interiorul unei celule;
• Evitați fundalurile inutile, deoarece o celulă în sine o are deja.

Componentele de conținut pot fi create treptat: începeți cu cele de bază, cum ar fi componentele text și adăugați altele noi pe măsură ce proiectul crește în dimensiune.

Motivul pentru care dorim ca conținutul să fie în componente este același ca și în cazul altor elemente - economisește timp de funcționare. Pentru a schimba conținutul celulei, trebuie doar să o comutăm în componentă.

Crearea unei componente celulare

Am creat toți atomii de care avem nevoie: fundal, chenar, conținut. Este timpul să creăm o componentă celulară, adică molecula făcută din atomi. Să adunăm toate componentele într-o celulă.

Setați componenta de fundal ca strat inferior și întindeți-o la întreaga dimensiune a celulei (setați constrângeri la „Stânga și Dreapta” și „Sus și Jos”).

Adăugați componenta de chenar cu aceleași constrângeri ca și componenta de fundal.

Acum, la partea cea mai complicată - conținutul .

Celula are umplutură, așa că trebuie să faceți un cadru cu conținutul componentei. Acest cadru ar trebui să fie întins la toată dimensiunea celulei, cu excepția umpluturilor. Componenta de conținut ar trebui, de asemenea, extinsă la întreaga dimensiune a cadrului. Conținutul în sine trebuie să fie lipsit de orice marjă, astfel încât toate umpluturile vor fi setate de celulă.

La sfârșitul zilei, umpluturile de celule sunt singura proprietate dintr-o componentă pe care o vom seta o singură dată, fără posibilitatea de a o modifica ulterior. În exemplul de mai sus, l-am făcut 4px pentru toate părțile.

Notă : Ca remediere, puteți crea coloane cu celule goale (fără conținut și lățime de 16 pixeli, de exemplu) la stânga și la dreapta către coloana unde este necesară o marjă suplimentară. Sau, dacă designul mesei dvs. permite, puteți adăuga umpluturi orizontale în interiorul componentei celulei. De exemplu, celulele din Google Material Design au în mod implicit căptușeală de 16 pixeli.

Nu uitați să eliminați opțiunea „ Clipați conținut ” pentru celulă și cadru (acest lucru se poate face în panoul din dreapta în secțiunea Proprietăți). Conținutul celulei poate ieși din granițele sale; de exemplu, atunci când în interiorul celulei dvs. se află un meniu derulant și doriți să îi afișați starea printr-un pop-up.

Notă : Vom folosi acest stil de celulă ca stil principal. Nu vă faceți griji dacă tabelul dvs. are stiluri suplimentare - vom acoperi asta în secțiunile Stări și componente ale tabelului, Nu suprascrie.

Opțiuni de celule pentru un tabel standard

Acest pas ar putea fi opțional, dar dacă tabelul dvs. are nevoie de state, atunci nu puteți merge fără el. Și cu atât mai mult dacă există mai mult de un stil de chenar în tabel.

Deci, haideți să creăm componente de celule suplimentare din care ar fi mai ușor să construiți un tabel. Atunci când lucrăm cu un tabel, vom selecta componenta potrivită în funcție de poziția acesteia în tabel (de exemplu, în funcție de tipul de chenar).

Pentru a face asta, să luăm componenta noastră celulară și să creăm încă opt maeștri din ea. De asemenea, trebuie să dezactivăm straturile adecvate responsabile de frontiere. Rezultatul ar trebui să arate ca imaginea de mai jos.

Rândul de sus este pentru celulele de deasupra și din mijlocul tabelului. Rândul de jos este doar pentru celulele din partea de jos. În acest fel, vom putea pune celulele una după alta fără goluri și vom păstra aceeași lățime a cursei.

Câteva exemple:

Notă : Pentru fiecare stil de chenar creat mai sus, ar fi bine să adăugați componente principale, cum ar fi cele descrise mai devreme.

Așadar, am exclus necesitatea suprascrierii instanțelor celulei (dezactivarea straturilor adecvate, pentru a fi precis). În loc de asta, folosim diverse componente. Acum, dacă, de exemplu, o coloană folosește un stil diferit de cel implicit (culoarea de umplere sau chenarul), puteți alege această coloană și pur și simplu modificați componenta relativă. Și totul va fi în regulă. Pe partea opusă, schimbarea manuală a unei margini a fiecărei celule (dezactivarea marginilor corespunzătoare) este o durere cu care nu doriți să vă deranjați.

Acum suntem gata să creăm tabele (în ceea ce privește designul atomic - organisme) din diferitele componente celulare (molecule) pe care le-am făcut.

Personalizarea Tabelului

Modificarea înălțimii rândului în întregul tabel este relativ ușoară: evidențiați tabelul, modificați înălțimea elementului (în acest caz, înălțimea celulei, H în panoul din dreapta în secțiunea Proprietăți), apoi modificați marginea verticală din element la 0. Asta este: schimbarea înălțimii liniei a durat două clicuri!

Modificarea lățimii coloanei: evidențiați coloana și modificați dimensiunea lățimii. După ce mutați restul tabelului de aproape, selectați întregul tabel utilizând opțiunea Tide Up din panoul Aliniere , precum și primul element din lista derulantă de sub pictograma din dreapta.

Notă: nu aș recomanda gruparea rândurilor și coloanelor. Dacă modificați dimensiunea coloanei extinzând elementele, veți obține valori fracționale pentru lățime și înălțime. Dacă nu le grupați și nu faceți clic pe grila de pixeli, dimensiunea celulei va rămâne un număr întreg.

Culoarea de fundal, tipul de contur și datele de conținut pot fi modificate în componenta corespunzătoare sau într-una dintre cele opt componente principale de celule (celule care aveau stiluri de contur diferite). Singurul parametru care nu poate fi modificat imediat sunt marginile celulelor, de exemplu , umpluturile de conținut . Restul sunt ușor de personalizat.

Componente, nu suprascrie

Privind la ceea ce am primit până la urmă, ar putea părea exagerat. Și asta dacă există un singur tabel în proiectul tău. În acest caz, puteți crea pur și simplu o componentă de celulă și lăsați componentele de fundal și de contur dezactivate. Pur și simplu includeți-le în componenta de celule, creați tabelul și faceți personalizarea necesară pentru fiecare celulă separată.

Dar dacă componentele sunt incluse într-o bibliotecă care este utilizată de o serie de alte fișiere, aici vin cele mai interesante lucruri.

Notă : *Nu recomand schimbarea culorii de fundal și a conturului în cazurile componentelor. Schimbați-le doar în master . Procedând astfel, acele instanțe cu suprascrieri nu vor fi actualizate. Aceasta înseamnă că ar trebui să faci asta manual și asta încercăm să evităm. Deci, să rămânem la componentele principale.*

Dacă trebuie să creăm un tip suplimentar de celule de tabel (de exemplu, antetul tabelului), adăugăm setul necesar de componente principale pentru celulele cu stilurile adecvate (la fel cum am făcut mai sus cu cele opt celule care aveau stiluri diferite de contur) și foloseste-l. Da, durează mai mult decât suprascrierea instanțelor componentelor, dar în acest fel veți evita cazul când schimbarea master-urilor va aplica acele modificări tuturor layout-urilor.

Tabelul Statelor

Să vorbim despre stările elementelor tabelului. O celulă poate avea trei stări: implicit, hover și selectat. Același lucru pentru coloane și rânduri.

Dacă proiectul dvs. este relativ mic, toate stările pot fi setate prin înlocuiri în interiorul instanțelor componentelor tabelului. Dar dacă este unul mare și ați dori să puteți schimba aspectul statelor în viitor, va trebui să creați componente separate pentru toate.

Va trebui să adăugați toate cele opt celule cu variante diferite de contur pentru fiecare dintre stări (poate mai puțin, depinde de stilul de contur). Și da, vom avea nevoie de componente separate pentru culoarea de fundal și pentru contur și pentru stări.

În cele din urmă, va arăta similar cu acesta:

Aici intervine un pic de necaz. Din păcate, dacă facem totul așa cum este descris mai sus (atunci când schimbăm starea componentei de la una la alta), există riscul de a pierde conținutul celulei. Va trebui să-l actualizăm în afară de cazul în care tipul de conținut este același ca în celula principală. În acest moment, nu putem face nimic în privința asta.

Am adăugat tabele în fișierul model care au fost realizate în câteva moduri diferite:

• Utilizarea acestui tutorial (componente separate pentru stilurile de celule);
• Utilizarea componentei de celule (componente pentru chenare, fundal și conținut);
• Folosind componenta celulară care unește totul (cu doar componente de conținut în plus).

Încercați să vă jucați și să schimbați stilurile celulei.

Concluzie

Dacă utilizați aceeași bibliotecă de componente în mai multe proiecte și aveți un număr rezonabil de tabele în fiecare dintre ele, puteți crea o copie locală a componentelor (componente de celule cu stiluri de contur și, dacă este necesar, componente de celule cu diferite state), personalizați-le și utilizați-le în proiect. Conținutul celulei poate fi setat pe baza componentelor locale.

De asemenea, dacă utilizați tabelul pentru un proiect mare cu diferite tipuri de tabele, toate componentele menționate mai sus sunt ușor de scalat. Componentele tabelului pot fi îmbunătățite la infinit și mai departe, cum ar fi crearea stărilor celulei atunci când treceți cu mouse-ul și alte tipuri de interacțiuni.

Întrebări, feedback, gânduri? Lasă un comentariu mai jos și voi face tot posibilul să te ajut!

Descărcare model Figma Table

După cum am promis, am creat o versiune completă a machetei de masă Figma pe care sunteți binevenit să o utilizați în scopuri de învățare sau orice altceva doriți. Bucurați-vă!

Lectură aferentă

• „Design atomic”, Brad Frost
• „Cum să arhitecți un tabel web complex”, Slava Shestopalov, Smashing Magazine
• „Crearea componentelor atomice în Figma”, echipa de proiectare și inginerie, littleBits
• „Tabelele Figma: Designul grilei de date printr-o singură componentă de celulă”, Roman Kamushken, Setproduct

Resurse utile

• Canalul de YouTube Figma
  Canalul oficial Figma de pe YouTube — este primul lucru pe care trebuie să îl urmăriți dacă sunteți nou la Figma.
• Google Sheets Sync
  Un plugin Figma care vă ajută să obțineți date din Foi de calcul Google în fișierul dvs. Figma. Acest lucru ar trebui să funcționeze bine cu tehnicile din acest tutorial, dar va trebui să investiți ceva timp în redenumirea tuturor straturilor de text pentru ca acest lucru să funcționeze corect.