Ako používať automatické rozloženie v programe Figma

Auto Layout je základným nástrojom pre každého dizajnéra a užívateľa Figmy. Táto funkcia vám umožňuje vykonávať zmeny, ako je napríklad zmena veľkosti alebo premiestnenie rámov a objektov. Auto Layout vám umožní upraviť výšku a hmotnosť prvku, napríklad s automatickým nastavením, skrátiť vašu prácu na polovicu.

Keďže sa veľkosť obrazovky mení v závislosti od zariadenia alebo prehliadača, ktorý používateľ použije na prístup na webovú stránku, automatické rozloženie prispôsobí prvky vo vnútri rámov týmto zmenám. Vďaka tomu vyzerá rozloženie a štruktúra presnejšie a synergicky. Čítajte ďalej a dozviete sa, ako používať funkciu Auto Layout v aplikácii Figma a jej funkcie.

Použitie automatického rozloženia

Ak chcete použiť automatické rozloženie a všetky jeho funkcie, musíte ho najskôr pridať do rámca, na ktorom pracujete, čo môže byť nový rám alebo rám s obsahom, objektmi a komponentmi. Po výbere rámu alebo objektov k nim pridáte automatické rozloženie nasledujúcim spôsobom:

• Stlačte „Alt + A“ na klávesnici (funguje na Mac a Windows).
• Kliknite pravým tlačidlom myši na objekty alebo komponenty a kliknite na Auto Layout (Túto funkciu musíte pridať ku každému komponentu, pretože to nie je možné hromadne).
• Klepnite na ikonu plus vedľa možnosti „Automatické rozloženie“ v ponuke na Figma.

Okrem pridania funkcie Auto Layout do rámčeka môžete robiť rôzne veci, od skladania rámov až po duplikovanie, usporiadanie a odstraňovanie objektov.

Pridávanie a odstraňovanie objektov

Pridávanie objektov do rámca je celkom jednoduché. Stačí len chytiť objekt, ktorý chcete pridať, a sledovať indikátor. A ak sa chystáte nejaký odstrániť, potiahnite ho späť a stlačte delete. Ak sa rozhodnete pridať väčší objekt ako je nadradený rám, budete sa musieť vyhnúť predvoleným nastaveniam Figma, aby ste to mohli urobiť. Môžete to urobiť podržaním tlačidla „Ctrl“ pre Windows a „Command“ pre Mac.

Duplikovanie objektov

Ak chcete do rámu pridať dva alebo viac identických objektov, môžete ich duplikovať, čo je užitočná funkcia automatickej vrstvy. Môžete to urobiť takto:

1. Klepnite na objekt, ktorý chcete duplikovať.
   
2. Ak máte Windows, podržte súčasne tlačidlá „Ctrl“ a „D“.
   
3. Pre Mac duplikujte podržaním tlačidiel „Command“ a „D“.
   

Usporiadanie predmetov

Ak sa vám nepáči vzhľad vášho rámu a organizácia predmetov a komponentov v ňom, môžete ich preusporiadať. Ak ste zlúčili dve vrstvy, musíte obísť predvolené nastavenia Figmy stlačením „Ctrl“ pre Windows a „Command“ pre Mac, aby ste sa dostali k možnosti hlbokého výberu a presunuli komponent z počiatočnej vrstvy. Ak však ide o jeden rám, môžete vybrať objekt a presunúť ho inam, podobne ako pri pridávaní objektov, alebo použiť kláves so šípkou.

Úrovne automatického rozloženia

Ďalšou funkciou automatického rozloženia je spojenie viacerých snímok do jedného, ​​čím sa vytvorí komplikovanejšie rozhranie, kde môžete prekrývať rôzne úrovne automatického rozloženia, ako sú riadky tlačidiel a tlačidiel, príspevok a časová os. Každá úroveň vám umožňuje pridať do rámu ďalší objekt. Úrovne tlačidiel a riadkov tlačidiel sú horizontálne, zatiaľ čo príspevok je vertikálna vrstva, do ktorej môžete zadávať popisy, obrázky atď.

Keď zložíte dva rámce dohromady, zlúčia sa a získajú vlastnosti nadradeného rámca. To umožňuje užívateľovi implementovať nastaviteľné objekty. Môžete chytiť jeden a položiť ho na druhý, aby ste spojili dva rámy. Ak to chcete urobiť, musíte:

1. Vyberte si jeden rám a všetko, čo k nemu chcete pridať.
   
2. Stlačením „Shift + A“ pridáte rám automatického rozloženia.
   

Funkcie automatického rozloženia

Možnosť Auto Layout (Automatické rozloženie) vo Figme má mnoho cenných vlastností alebo funkcií, od smeru a poradia stohovania až po rozstupy, zmenu veľkosti a zarovnanie. Táto časť bude hovoriť o každej z týchto funkcií podrobnejšie.

Smer

Ako už názov napovedá, smer odkazuje na poradie objektov v rámci. Pri použití automatického rozloženia možno objekty umiestniť:

• Vertikálne – objekty sú umiestnené na osi y. Táto možnosť je vhodná pre zoznamy, ponuky, informačné kanály atď.
• Horizontálne – Objekty a komponenty na osi x (tlačidlá, ikony atď.).
• Pozícia zalomenia – Objekty sú nastavené vo viacerých stĺpcoch a riadkoch.

Objednávka stohovania

Môžete si vybrať, ktoré poradie stohovania najlepšie vyhovuje vášmu rámu. Toto je vizuálna zmena, pretože poradie stohovania zostáva rovnaké (ak je to 1,2,3, zostane 1,2,3, ale s vizuálnymi úpravami). Keď sú predmety naukladané jeden na druhom, môžete si vybrať, ktorý z nich bude navrchu. Takže napríklad, ak máte tri veci označené 1, 2 a 3, môžete buď 1, alebo 3. Môžete to urobiť takto:

1. Vyberte rám automatického rozloženia.
   
2. Prejdite na možnosť Automatické rozloženie na pravej strane obrazovky.
   
3. Klepnutím na tri vodorovné bodky otvoríte rozšírené možnosti.
   
4. Nájdite možnosť „Skladanie plátna“.
   
5. Vyberte „Prvý navrchu“ alebo „Posledný navrchu“.
   

Absolútna pozícia

Ďalšou vlastnosťou „Layer Flow“ je absolútna poloha, okrem poradia a smeru ukladania. Táto funkcia vám umožňuje umiestniť objekt kamkoľvek chcete, bez ohľadu na hranice rámu. Povolíte to takto:

1. Uchopte predmet a umiestnite ho do rámu.
   
2. V ponuke na pravej strane vedľa hodnôt pre „X“ a „Y“ klepnite na ikonu pripomínajúcu štvorec bez hrán so znamienkom plus vo vnútri.
   
3. Presuňte objekt pozdĺž línií rámu.
   

Nastavenie medzery

Existuje niekoľko funkcií, ktoré môžete upraviť, pokiaľ ide o rozstup, ako je napríklad medzera. Medzeru môžete zmeniť dvoma spôsobmi: automaticky a zadaním konkrétnej medzery. Ak chcete, aby bola vaša medzera čo najväčšia, potom musíte vybrať automatické nastavenie v ponuke Auto Layout. Ale ak sa chystáte zadať svoje hodnoty, zadajte ich do priradených polí.

Okrem toho je možné nastaviť medzeru pre všetky smery. Ak sú vaše ikony iba vodorovné a zvislé, môžete medzi nimi vybrať vodorovnú medzeru. Ak sú však v zalomenej polohe, môžete upraviť nastavenia vertikálnej a horizontálnej medzery.

Nastavenie zarovnania

Po nastavení funkcií smeru, výplne a medzery môžete upraviť zarovnanie podriadeného objektu v ráme, pretože táto funkcia závisí od nastavení medzier. Nemôžete zmeniť zarovnanie každého objektu, ale vyberte si vzor ponúkaný v ponuke Auto Layout. Môžete kliknúť na mriežku 3×3 v ponuke a vybrať si, aké zarovnanie chcete. Môžete to urobiť pomocou šípok alebo tlačidiel WSAD na klávesnici.

Okrem toho si tu môžete zvoliť automatické nastavenie a prepínať horizontálne a vertikálne zarovnania ako riadok. S konkrétnymi hodnotami môžete mať všetkých deväť možností (vľavo hore, vľavo dole, vľavo, vpravo vľavo, vpravo dole atď.).

Môžete tiež upraviť zarovnanie textu povolením tejto možnosti z ponuky a podržaním tlačidla „B“.

Zmena veľkosti

Možnosti zmeny veľkosti automatického rozloženia majú mnoho ďalších vlastností, ako je obsah objatia, možnosť výplne kontajnera, úprava šírky a výšky, rozmery atď. Ak chcete, aby boli vaše hodnoty pevné, môžete si vybrať možnosť automatická, ale to obmedzuje možnosti. Pre zmenu veľkosti sa odporúča nastaviť hodnoty.

Môžete vybrať pevnú hodnotu alebo ju nastaviť na maximálne alebo minimálne možné rozmery pre šírku a výšku. Objatie obsahu vám umožňuje upraviť veľkosť rámca na základe podriadeného objektu, zatiaľ čo možnosť vyplniť kontajner zmení veľkosť objektu podľa rodičovského rámca.

Vytváranie jedinečných rámov s automatickým rozložením

Auto Layout, ako jedna zo základných funkcií Figma, dokáže prispôsobiť váš rám a predmety a priehradky v ňom podľa vašich preferencií. Jeho vlastnosti a vlastnosti sú rozmanité, čo vám umožňuje vytvoriť správny a elegantný produkt. Auto Layout je základný nástroj, ktorý musíte ovládať pred prácou vo Figme.

Ktorú funkciu automatického rozloženia používate najčastejšie? Dajte nám vedieť v sekcii komentárov nižšie.