Cum să utilizați aspectul automat în Figma

Auto Layout este un instrument esențial pentru fiecare designer și utilizator Figma. Această caracteristică vă permite să faceți modificări, cum ar fi redimensionarea sau repoziționarea cadrelor și obiectelor. Dispunerea automată vă va permite să reglați înălțimea și greutatea unui element, de exemplu, cu o setare automată, reducând munca la jumătate.

Deoarece dimensiunea ecranului se modifică în funcție de dispozitivul sau browserul pe care îl va folosi utilizatorul pentru a accesa site-ul web, Auto Layout face ca elementele din interiorul cadrelor să se adapteze la aceste modificări. Acest lucru face ca aspectul și structura să pară mai precise și în sinergie. Citiți mai departe pentru a afla cum să utilizați aspectul automat în Figma și caracteristicile sale.

Utilizarea aspectului automat

Pentru a utiliza Auto Layout și toate caracteristicile sale, trebuie mai întâi să îl adăugați la un cadru la care lucrați, care poate fi un cadru nou sau unul cu conținut, obiecte și componente. După ce selectați cadrul sau obiectele, iată cum să adăugați aspect automat la acesta:

• Apăsați „Alt + A” tastatură (funcționează pe Mac și Windows).
• Faceți clic dreapta pe obiecte sau componente și faceți clic pe Aspect automat (Trebuie să adăugați această caracteristică la fiecare componentă, deoarece este imposibil în vrac).
• Atingeți pictograma plus de lângă opțiunea „Aspect automat” din meniul Figma.

Pe lângă adăugarea unui aspect automat în cadrul dvs., puteți face diverse lucruri, de la stivuirea cadrelor până la duplicarea, aranjarea și eliminarea obiectelor.

Adăugarea și eliminarea obiectelor

Adăugarea de obiecte în cadrul dvs. este destul de simplă. Trebuie doar să prindeți obiectul pe care doriți să-l adăugați și să urmați indicatorul. Și dacă intenționați să eliminați unul, trageți-l înapoi și apăsați pe ștergere. Dacă alegeți să adăugați un obiect mai mare decât cadrul părinte, va trebui să evitați setările implicite Figma pentru a putea face acest lucru. Puteți face acest lucru ținând apăsat butonul „Ctrl” pentru Windows și „Comandă” pentru Mac.

Duplicarea obiectelor

Dacă doriți să adăugați două sau mai multe obiecte identice la cadru, le puteți duplica, ceea ce este o caracteristică utilă Strat automat. Iată cum o poți face:

1. Atingeți obiectul pe care doriți să îl duplicați.
   
2. Țineți apăsate butoanele „Ctrl” și „D” simultan dacă aveți Windows.
   
3. Pentru Mac, duplicați ținând apăsat butoanele „Comandă” și „D”.
   

Aranjarea obiectelor

Dacă nu vă place aspectul cadrului dvs. și organizarea obiectelor și componentelor din interiorul acestuia, le puteți rearanja. Dacă ați îmbinat două straturi, trebuie să ocoliți setările implicite Figma apăsând „Ctrl” pentru Windows și „Command” pentru Mac pentru a accesa opțiunea de selecție profundă și a muta componenta din stratul inițial. Cu toate acestea, dacă este un cadru, puteți selecta un obiect și îl puteți muta în altă parte, similar cu adăugarea de obiecte, sau puteți utiliza tasta săgeată.

Niveluri de aspect automat

O altă caracteristică a Aspectului automat este combinarea mai multor cadre într-unul singur pentru a crea o interfață mai complicată în care puteți suprapune diferite niveluri de aspect automat, cum ar fi rândurile de butoane și butoane, o postare și o cronologie. Fiecare nivel vă permite să adăugați un obiect suplimentar la cadru. Nivelurile de butoane și rânduri de butoane sunt orizontale, în timp ce o postare este un strat vertical în care puteți introduce descrieri, imagini etc.

Când stivuiți două cadre împreună, acestea îmbină și câștigă proprietățile unui cadru părinte. Acest lucru permite utilizatorului să implementeze obiecte reglabile. Puteți prinde unul și îl puteți pune pe altul pentru a uni două cadre. Pentru a face acest lucru, trebuie să:

1. Alegeți un cadru și tot ce doriți să adăugați la el.
   
2. Apăsați „Shift + A” pentru a adăuga un cadru cu aspect automat.
   

Funcții de aspect automat

Opțiunea Auto Layout din Figma are multe proprietăți sau funcții valoroase, de la direcție și ordine de stivuire până la spațiere, redimensionare și aliniere. Această secțiune va vorbi despre fiecare dintre aceste funcții mai detaliat.

Direcţie

După cum sugerează și numele, direcția se referă la ordinea obiectelor dintr-un cadru. Când utilizați Dispunerea automată, obiectele pot fi plasate:

• Pe verticală – obiectele sunt plasate pe axa y. Această opțiune este potrivită pentru liste, meniuri, fluxuri de știri etc.
• Orizontal – Obiecte și componente de pe axa x (butoane, pictograme etc.).
• Poziție de înfășurare – Obiectele sunt setate în mai multe coloane și rânduri.

Ordine de stivuire

Puteți alege ce ordine de stivuire se potrivește cel mai bine cadrul dvs. Aceasta este o schimbare vizuală doar din moment ce ordinea de stivuire rămâne aceeași (dacă este 1,2,3, rămâne 1,2,3 dar cu ajustări vizuale). Când obiectele sunt stivuite una peste alta, puteți alege care dintre ele va fi deasupra. Deci, de exemplu, dacă aveți trei lucruri marcate cu 1, 2 și 3, puteți fie 1, fie 3. Iată cum puteți face acest lucru:

1. Alegeți cadrul Aspect automat.
   
2. Navigați la opțiunea Aspect automat din partea dreaptă a ecranului.
   
3. Atingeți cele trei puncte orizontale pentru a deschide opțiunile avansate.
   
4. Găsiți opțiunea „Stivuire pânză”.
   
5. Alegeți „Primul de sus” sau „Ultimul de sus”.
   

Poziția absolută

O altă proprietate „Layer Flow” este o poziție absolută, în afară de ordinea și direcția de stivuire. Această caracteristică vă permite să plasați un obiect oriunde doriți, ignorând limitele cadrului. Iată cum se poate activa:

1. Luați un obiect și plasați-l în interiorul cadrului.
   
2. În meniul din dreapta, lângă valorile pentru „X” și „Y”, atingeți pictograma care seamănă cu un pătrat fără margini cu plus în interior.
   
3. Mutați obiectul de-a lungul liniilor cadrului.
   

Setarea decalajului

Există câteva caracteristici pe care le puteți ajusta când vine vorba de spațiere, cum ar fi decalajul. Aveți două moduri de a modifica decalajul: automat și introducerea unui interval specific. Dacă doriți ca decalajul dvs. să fie cât mai mare posibil, atunci trebuie să selectați setarea automată din meniul Aspect automat. Dar dacă urmează să introduceți valorile, introduceți-le în casetele alocate.

În plus, setarea decalajului poate fi setată pentru toate direcțiile. Dacă pictogramele sunt doar orizontale și verticale, puteți selecta un spațiu orizontal între ele. Cu toate acestea, dacă sunt într-o poziție de înfășurare, puteți ajusta setările de decalaj vertical și orizontal.

Setare de aliniere

După ce ați configurat funcțiile de direcție, umplutură și spațiu, puteți ajusta alinierea obiectului copil în cadrul dvs., deoarece această caracteristică depinde de setările de spațiere. Nu puteți modifica alinierea fiecărui obiect, ci alegeți un model oferit în meniul Aspect automat. Puteți face clic pe grila 3×3 din meniu și puteți selecta ce aliniere doriți. Acest lucru se poate face cu tastele săgeți sau butoanele WSAD de pe tastatură.

În plus, puteți alege setarea automată aici pentru a comuta alinierea orizontală și verticală ca un rând. Cu valori specifice, puteți avea toate cele nouă opțiuni (stânga sus, stânga jos, stânga, dreapta stânga, dreapta jos etc.).

De asemenea, puteți ajusta alinierea textului activând această opțiune din meniu și ținând apăsat butonul „B”.

Redimensionare

Opțiunile de redimensionare ale Aspectului automat au multe proprietăți suplimentare, cum ar fi conținutul îmbrățișării, opțiunea de umplere a containerului, ajustarea lățimii și înălțimii, dimensiunilor etc. Puteți selecta opțiunea automată dacă doriți ca valorile dvs. să fie fixe, dar asta limitează posibilitățile. Pentru redimensionare, este recomandat să vă setați valorile.

Puteți selecta o valoare fixă ​​sau o puteți seta la dimensiunile maxime sau minime posibile pentru lățime și înălțime. Conținutul îmbrățișării vă permite să ajustați dimensiunea unui cadru pe baza obiectului copil, în timp ce opțiunea de umplere a containerului redimensionează un obiect în funcție de cadrul părinte.

Crearea de cadre unice cu aspect automat

Auto Layout, ca una dintre caracteristicile esențiale Figma, vă poate ajusta cadrul și obiectele și compartimentele din interior după preferințele dvs. Proprietățile și caracteristicile sale sunt multiple, permițându-vă să creați un produs adecvat și îngrijit. Auto Layout este un instrument fundamental pe care trebuie să-l stăpânești înainte de a lucra în Figma.

Ce funcție Auto Layout folosești cel mai mult? Anunțați-ne în secțiunea de comentarii de mai jos.