Kako koristiti Auto Layout u Figmi

Auto Layout je bitan alat za svakog dizajnera i korisnika Figme. Ova značajka vam omogućuje da napravite promjene kao što je promjena veličine ili premještanje okvira i objekata. Automatski raspored omogućit će vam podešavanje visine i težine elementa, na primjer, s automatskom postavkom, prepolovljujući vaš rad.

Budući da se veličina zaslona mijenja ovisno o uređaju ili pregledniku koji će korisnik koristiti za pristup web stranici, Auto Layout prilagođava elemente unutar okvira tim promjenama. Time izgled i struktura izgledaju preciznije i u sinergiji. Čitajte dalje kako biste saznali kako koristiti Auto Layout u Figmi i njegove značajke.

Korištenje automatskog izgleda

Da biste koristili Auto Layout i sve njegove značajke, prvo ga morate dodati okviru na kojem radite, a to može biti novi okvir ili okvir sa sadržajem, objektima i komponentama. Nakon što odaberete okvir ili objekte, evo kako im dodati Auto Layout:

• Pritisnite "Alt + A" na tipkovnici (radi na Macu i Windowsima).
• Kliknite desnom tipkom miša na objekte ili komponente i kliknite na Automatski raspored (Ovu značajku morate dodati svakoj komponenti budući da je nemoguće skupno).
• Dodirnite ikonu plus pored opcije "Auto Layout" u izborniku na Figmi.

Osim dodavanja automatskog rasporeda vašem okviru, možete raditi razne stvari, od slaganja okvira do dupliciranja, raspoređivanja i uklanjanja objekata.

Dodavanje i uklanjanje objekata

Dodavanje objekata vašem okviru prilično je jednostavno. Vi samo trebate zgrabiti objekt koji želite dodati i pratiti indikator. A ako namjeravate ukloniti jedan, povucite ga natrag i pritisnite delete. Ako odlučite dodati veći objekt od nadređenog okvira, morat ćete izbjeći zadane postavke Figme da biste to mogli učiniti. To možete učiniti držeći gumb "Ctrl" za Windows i "Command" za Mac.

Umnožavanje objekata

Ako želite dodati dva ili više identičnih objekata u okvir, možete ih duplicirati, što je korisna značajka Auto Layer. Evo kako to možete učiniti:

1. Dodirnite objekt koji želite duplicirati.
   
2. Ako imate Windows, istovremeno držite tipke "Ctrl" i "D".
   
3. Za Mac, duplicirajte držeći tipke "Command" i "D".
   

Aranžiranje objekata

Ako vam se ne sviđa izgled vašeg okvira i organizacija objekata i komponenti unutar njega, možete ih preurediti. Ako ste spojili dva sloja, morate zaobići zadane postavke Figme pritiskom na “Ctrl” za Windows i “Command” za Mac za pristup opciji dubokog odabira i premještanje komponente s početnog sloja. Međutim, ako je to jedan okvir, možete odabrati objekt i premjestiti ga na drugo mjesto, slično dodavanju objekata, ili koristiti tipku sa strelicom.

Razine automatskog izgleda

Još jedna značajka automatskog rasporeda je kombiniranje više okvira u jedan kako bi se stvorilo kompliciranije sučelje gdje možete preklapati različite razine automatskog rasporeda kao što su gumbi i redovi gumba, objava i vremenska traka. Svaka razina vam omogućuje da svom okviru dodate još jedan objekt. Razine gumba i reda gumba su vodoravne, dok je objava okomiti sloj gdje možete unijeti opise, slike itd.

Kada složite dva okvira zajedno, oni se spajaju i dobivaju svojstva nadređenog okvira. To korisniku omogućuje implementaciju podesivih objekata. Možete zgrabiti jedan i staviti ga na drugi kako biste spojili dva okvira. Da biste to učinili, morate:

1. Odaberite jedan okvir i sve što želite dodati u njega.
   
2. Pritisnite “Shift + A” za dodavanje okvira automatskog izgleda.
   

Funkcije automatskog izgleda

Opcija Auto Layout u Figmi ima mnoga vrijedna svojstva ili funkcije, od smjera i redoslijeda slaganja do razmaka, promjene veličine i poravnanja. U ovom odjeljku detaljnije ćemo govoriti o svakoj od ovih funkcija.

Smjer

Kao što naziv sugerira, smjer se odnosi na redoslijed objekata u okviru. Kada koristite Auto Layout, objekti se mogu postaviti:

• Okomito – objekti se postavljaju na y-osu. Ova je opcija prikladna za popise, izbornike, izvore vijesti itd.
• Horizontalno – Objekti i komponente na x-osi (gumbi, ikone itd.).
• Položaj preloma – Objekti su postavljeni u više stupaca i redaka.

Redoslijed slaganja

Možete odabrati koji redoslijed slaganja najbolje odgovara vašem okviru. Ovo je samo vizualna promjena jer redoslijed slaganja ostaje isti (ako je 1,2,3, ostaje 1,2,3, ali uz vizualne prilagodbe). Kada su predmeti naslagani jedan na drugi, možete odabrati koji će biti na vrhu. Tako, na primjer, ako imate tri stvari označene 1, 2 i 3, možete 1 ili 3. Ovo možete učiniti na sljedeći način:

1. Odaberite okvir Auto Layout.
   
2. Dođite do opcije Automatski izgled na desnoj strani zaslona.
   
3. Dodirnite tri vodoravne točke za otvaranje naprednih opcija.
   
4. Pronađite opciju "Canvas Stacking".
   
5. Odaberite "Prvi na vrhu" ili "Zadnji na vrhu."
   

Apsolutna pozicija

Drugo svojstvo "Toka slojeva" je apsolutni položaj, osim redoslijeda i smjera slaganja. Ova značajka omogućuje vam postavljanje objekta gdje god želite, zanemarujući granice okvira. Evo kako to omogućiti:

1. Uhvatite predmet i stavite ga u okvir.
   
2. U desnom izborniku, pored vrijednosti za "X" i "Y", dodirnite ikonu koja podsjeća na kvadrat bez rubova s ​​plusom unutar.
   
3. Pomaknite objekt duž linija okvira.
   

Postavka praznine

Postoji nekoliko značajki koje možete prilagoditi kada je u pitanju razmak, kao što je razmak. Imate dva načina za promjenu razmaka: automatski i upisivanjem u određeni razmak. Ako želite da vaš razmak bude što je moguće veći, tada morate odabrati automatsku postavku u izborniku Auto Layout. Ali ako ćete unijeti svoje vrijednosti, upišite ih u dodijeljene okvire.

Nadalje, podešavanje razmaka može se postaviti za sve smjerove. Ako su vaše ikone samo vodoravne i okomite, možete odabrati vodoravni razmak između njih. Međutim, ako su u omotanom položaju, možete prilagoditi okomite i vodoravne postavke razmaka.

Postavka poravnanja

Nakon što postavite značajke smjera, ispune i razmaka, možete podesiti poravnanje dječjeg objekta u svom okviru jer ta značajka ovisi o postavkama razmaka. Ne možete promijeniti poravnanje svakog objekta, već odaberite uzorak ponuđen u izborniku Auto Layout. Možete kliknuti na mrežu 3×3 u izborniku i odabrati željeno poravnanje. To možete učiniti tipkama sa strelicama ili WSAD tipkama na tipkovnici.

Nadalje, ovdje možete odabrati automatsku postavku za promjenu horizontalnih i okomitih poravnanja u nizu. S određenim vrijednostima možete imati svih devet opcija (gore lijevo, dolje lijevo, lijevo, desno lijevo, dolje desno itd.).

Također možete podesiti poravnanje teksta tako da omogućite ovu opciju iz izbornika i držite gumb "B".

Promjena veličine

Opcije promjene veličine automatskog izgleda imaju mnoga dodatna svojstva kao što su sadržaj zagrljaja, opcija punjenja spremnika, podešavanje širine i visine, dimenzija itd. Možete odabrati opciju automatskog ako želite da vaše vrijednosti budu fiksne, ali to ograničava mogućnosti. Za promjenu veličine preporučuje se postaviti svoje vrijednosti.

Možete odabrati fiksnu vrijednost ili je postaviti na najveće ili najmanje moguće dimenzije za širinu i visinu. Hug content vam omogućuje da prilagodite veličinu okvira na temelju podređenog objekta, dok opcija spremnika za punjenje mijenja veličinu objekta prema nadređenom okviru.

Stvaranje jedinstvenih okvira s automatskim rasporedom

Automatski raspored, kao jedna od bitnih značajki Figme, može prilagoditi vaš okvir i objekte i odjeljke unutar njega prema vašim željama. Njegova su svojstva i značajke višestruka, što vam omogućuje stvaranje ispravnog i urednog proizvoda. Auto Layout je temeljni alat koji morate savladati prije rada u Figmi.

Koju funkciju Auto Layout najviše koristite? Javite nam u odjeljku za komentare ispod.