Creați un tablou de bord receptiv cu FIGMA

Feb 4, 2026

să

FIGMA este un instrument grafic pentru designerii UI. Are o interfață simplă și vă permite să colaborați lucrul cu colegii de echipă. Dacă doriți să lucrați offline, puteți alege să utilizați aplicația desktop. Alternativ, FIGMA funcționează pe orice sistem de operare (Hello, Windows), deci nu trebuie să instalați nimic deloc. Și începerea este ușor - puteți importa desenele anterioare de aspect de la schiță.

Alegeți un constructor de site-uri: 16 instrumente de top

În FIGMA, puteți crea tot ce aveți nevoie pentru interfața dvs., de la icoane vectoriale ilustrate la aspectul personalizat. Editarea multiplayer ar putea economisi mult timp pentru echipe de proiectare, deoarece înseamnă că toți membrii echipei pot lucra în același aspect în același timp. Și acestea nu sunt chiar toate trăsăturile sale minunate.

În acest tutorial vă voi arăta cum să vă configurați cu FIGMA, apoi treceți prin modul de a crea un ecran de aplicație mobilă, pas-cu-pas. În acest caz, vom proiecta tabloul de bord pentru o aplicație de statistică fictivă. Când ați terminat, veți putea crea diferite interfețe în FIGMA și veți lucra la ele cu echipa dvs. în timp real.

01. Înscrieți-vă

În primul rând, trebuie să vă înscrieți la www.figma.com. . Decideți dacă doriți să utilizați instrumentul din browserul dvs. sau să descărcați aplicația desktop. Pentru a descărca versiunea desktop, accesați meniul Hamburger din colțul din stânga sus și faceți clic pe "Obțineți aplicația desktop".

02. Creați o placă de artă și grilă

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Adăugați o grilă de bază pentru a vă ajuta să poziționați elementele armonios (faceți clic pe imagine pentru a mări)

Lovit A pentru a crea un tablă de artă. Puteți alege una dintre presetări sau creați propria dimensiune personalizată. Pentru acest proiect, vom folosi telefonul & GT; iPhone 7 (375x667px). Pentru a crea o rețea, selectați mai întâi tablă de artă. Apoi, pe bara laterală dreaptă, găsiți "grila de layout" și apăsați "+". Configurarea numărului de coloane: 6, jgheab: 16, margini: 8 și Tip: Stretch.

03. Desenați un dreptunghi pentru fundal

Să începem cu fundalul. presa R. Pentru a aduce instrumentul dreptunghi și a desena un dreptunghi # 5f98fa fără frontiere. Setați dimensiunile la 375x363 utilizând panoul Proprietăți din partea dreaptă.

04. Adăugați o bară de stare

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Setați gradientul pentru bara de stare utilizând panoul Proprietăți din dreapta de pe ecran. Aici puteți ajusta opțiunile de culoare pentru a crea un gradient liniar (faceți clic pe imagine pentru a mări)

Apoi, vrem să plasăm o bară de stare în partea de sus a ecranului. presa R. Pentru a seta lățimea: 375, înălțime: 64, poziție (x: 0; y: 0). Pentru bara noastră de navigare, să setăm gradientul să umple utilizarea panoului Inspector de proprietate din dreapta. Găsiți opțiunea "Fill", apăsați pe previzualizarea culorilor și selectați "Linear" din meniul derulant. Culoarea de sus ar trebui să fie # 77A6F7, iar la partea de jos # 5A93F5 (opacitate 100% pentru ambele).

05. Importați o bară de stare iOS

Din păcate, FIGMA nu include elemente IOS UI în mod implicit. Cu toate acestea, există un fișier numit "Fișier de eșantion", care este un design al aplicației iOS, astfel încât să putem împrumuta bara de stare de la asta. Copiați opțiunea Bara de stare a luminii, lipiți-o în fișierul curent și plasați-o la (X: 0; Y: 0). Utilizarea instrumentului Text ( T. ), faceți clic pe tabla de artă pentru a adăuga un antet la bara de navigare. Am plecat la Avenir Heavy, 15px, #ffffff. Aliniați poziția de către centrul orizontal, Y: 33.

06. Creați o pictogramă din spate

În partea stângă a barei de navigare ar trebui să fie o pictogramă "spate". Voi crea asta de la zero. Creați un dreptunghi 14x14px, adăugați rotație de 45 de grade, X: 14; Y: 43. Duplicați acest dreptunghi și plasați-l la X: 18; Y: 43. Selectați ambele dreptunghiuri, cât și în meniul de sus Du-te la Boolean Group & GT; Scăderea selecției. După aceea, întoarceți-vă în grupuri Boolean & GT; Flatten selecția sau apăsați cmd + E. .

07. Finalizați pictograma săgeată

Pictograma noastră săgeată este aproape terminată. Acum, trebuie doar să stabilim lățimea și înălțimea valorilor numerice - în lățimea cazului meu: 12px; Înălțime: 20px. Pasul final este de a seta culoarea de umplere la #FFFFFFF.

08. Creați un grafic

Acum vom crea un grafic. În primul rând, vom pune în câteva linii directoare. Selectați instrumentul dreptunghi ( R. ) și setați X: 24 Y: 147; Lățime: 1; Înălțime: 166; Umpleți culoarea # b3dcff și opacitatea 20%.

Duplicați acest dreptunghi de patru ori cu margini de 80px. În partea de jos a fiecărei orientări, trebuie să adăugăm o etichetă de dată utilizând straturi de text ("2 februarie", "Feb 9", "16 februarie", "Feb 23", "Mar 1"). Am folosit mediu Avenir, la 11px, # C1D8FF.

09. Faceți linia de date

Utilizarea instrumentului Pen ( P. ) Trebuie să creăm un vector pentru a reprezenta linia de date. Faceți clic și trageți pentru a crea un punct bézier. Această formă ar trebui să aibă o cursă de 4px și nici o umplere, #ffffff.

Să adăugăm o umbră de picătură pentru a ajuta linia să iasă în evidență: faceți clic pe "+" pe secțiunea de efecte și alegeți "Drop Shadow". Utilizați următoarele setări pentru a face o umbra lină și elegantă: Blur: 3px, y: 7px, # 2951ff, opacitate: 100%.

10. Adăugați detalii la grafic

Use the Text tool to add values to the places the guidelines intersect with the data line — Utilizați instrumentul de text pentru a adăuga valori în locurile pe care liniile directoare le intersectează cu linia de date

În punctele în care orientările se intersectează cu linia de date vom adăuga cercuri. De data aceasta vom folosi instrumentul Ellipse ( O. ), pe care îl veți găsi în meniul derulant care însoțește instrumentul dreptunghiular. Desenați cercuri 8x8px pe fiecare intersecție și setați culoarea de umplere la # 5F98FA. Trebuie să adăugăm un accident vascular cerebral: faceți clic pe butonul "+" de lângă secțiunea Curse, setați greutatea: 2px și aliniați: centru.

11. LOCURI FINALE

Pentru a termina secțiunea grafică, trebuie doar să adăugăm valori la punctele noastre de intersecție. Cu instrumentul text ( T. ) Selectați Avenir Black, 11px, # 1F4991.

12. Trei casete informative

Sub graficul liniei vom crea trei celule care afișează mai multe informații. Utilizarea instrumentului Text ( T. ) Să creăm prima noastră poziție: "Valoarea estimată a acțiunilor dvs.": X: 16; Y: 391, Mediu Avenir, 15px, # 5d7eb6. În partea dreaptă a celulei, valoarea "$ 1,115", stilul de text: Avenir Heavy, 22Px, # 5F98FA, alinierea textului: stânga, X: 287; Y: 387.

13. Efectuarea unui separator

Desenați un dreptunghi care este de 1px în înălțime și se întinde pe lățimea completă a ecranului (# F5F5F5; X: 0; Y: 435) - acest lucru va acționa ca separator între celule. Selectați rubrica, valoarea și separatorul și creați un grup ( cmd + G. ).

14. Adăugarea rubricii

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Sub graficul vor fi trei celule care prezintă piese cheie de date (faceți clic pe imagine pentru a mări)

Duplicați acest grup, astfel încât aveți trei grupe cu distanța verticală de 24px între ele. Schimbați al doilea titlu la "membrii totali" și al treilea grup de la "Prietenii înscriși" și actualizați valorile relevante.

15. Desenați și aliniați un alt dreptunghi

Acum vom adăuga un apel la acțiune. Desenați un dreptunghi sub ultima celulă, lățimea: 195; Înălțime: 44, distanța de axă Y de la ultimul separator 21px.

Folosind uneltele de aliniere, aliniați dreptunghiul de către centrul orizontal. Apoi, setați culoarea de umplere la # 5F98FA și rotunjirea la 22 (veți găsi acest câmp după "rotație" în panoul de proprietăți). După aceea, adăugați un efect de umbră de picătură (culoare: #ABDAFF, Opacitate: 100%; Y: 5; Blur: 11).

16. Puneți un text pe buton

Adăugați textul la buton utilizând instrumentul text ( T. ): "Obțineți mai multe acțiuni!" Setați acest lucru în Avenir Black, 15px, #FFFFFFFFFFF. Aliniați textul prin centrul butonului. În cele din urmă, grupați toate elementele împreună și le numiți în mod corespunzător.

17. Faceți-o receptivă

Acum ne vom adapta aspectul nostru, astfel încât este receptiv la diferite iPhone (320x568, 375x667 și 414x736). Pentru a face acest lucru, trebuie să folosim constrângeri, pe care le veți găsi în meniul Proprietăți din dreapta.

18. Obținerea dreptului de aspect

Dacă selectați "Stânga" sau "dreapta" pe drop-down orizontal, grupul se va fixa pe partea aleasă a ecranului și nu se va întinde. Dacă selectați "Centrul", grupul sau stratul se vor întinde astfel încât umple lățimea ecranului. Trebuie să facem ca bara de stare să fie plutită, așa că dorim opțiunea "dreapta și amplasată" (sau țineți apăsat "cmd" și faceți clic pe barele din stânga și din dreapta pe diagrama).

19. Testați-l

Să încercăm asta. Cu bara de stare selectată, apăsați opțiunea "dreapta și amplasată". Selectați o placă de artă și, în loc de iPhone 7, alegeți iPhone 7 Plus. Funcționează corect, chiar dacă selectați dimensiunea iPhone SE.

20. Verificați fiecare strat

Să luăm în considerare restul straturilor. Pentru fundalul barului de navigare, vrem să folosim "dreapta + stânga". Pentru titlul barei de navigare: "centru". Pentru pictograma arrow spate, este mai bine să utilizați opțiunea "Stânga" - în acest fel săgeata va fi fixată în partea stângă a ecranului.

21. Setați graficul de linie

Acum, să punem graficul liniei. Pentru orientările, datele și cercurile de intersecție, vrem să folosim "centru". Pentru linia de date și fundal, vom folosi "drept și amperi; stânga". În secțiunea de date suplimentare, dorim să folosim "stânga" pentru fiecare titlu, "dreapta" pentru fiecare valoare și "dreapta și amplasat" pentru liniile de separare. Pentru grupul Button CTA hai să se stabilească "centru".

22. Setați constrângerile verticale

Pasul final este de a seta constrângerile verticale. Bara de stare, bara de navigare, linia de date și cercurile de intersecție și titlurile asociate trebuie să fie setate la "TOP". Contextul graficului, datele și liniile directoare ar trebui să fie setat la "centru". Fiecare grup de date suplimentare trebuie să fie setat la vertical "centru", iar grupul de butoane CTA trebuie să fie setat la "fund".

23. Faceți-o să funcționeze pentru fiecare dimensiune a ecranului

Să duplicăm tabla de depozit de două ori și să se stabilească una la dimensiunea unui iPhone 7 Plus și cealaltă la dimensiunea unui iPhone SE. În versiunea plus, va trebui să reduceți decalajul dintre ultima celulă de informații suplimentare și butonul CTA selectând grupul celulelor și creșterea înălțimii sale de la 195 la 225. Pe versiunea SE veți vedea că celulele informaționale depășesc Butonul CTA, așa că trebuie să selectăm grupul celulelor și să reducem înălțimea la 150.

24. Totul făcut!

Hei, felicitări! Am terminat întregul ecran al aplicației în FIGMA. Deocamdată, doar verificați totul, și puteți să vă așezați și să vă simțiți ca un expert.

Acest articol a fost inițial prezentat în revista netă Ediția 288; Cumpărați-l aici.

Articole similare:

Conceptul New Behence arată ca o aplicație ucigașă
Proiectarea impactului social
8 sfaturi pentru acele interviuri de locuri de muncă