Jak používat automatické rozvržení v Figma

Auto Layout je nezbytný nástroj pro každého designéra a uživatele Figmy. Tato funkce umožňuje provádět změny, jako je změna velikosti nebo přemístění snímků a objektů. Auto Layout vám umožní upravit výšku a váhu prvku, například s automatickým nastavením, zkrátí vaši práci na polovinu.

Vzhledem k tomu, že se velikost obrazovky mění v závislosti na zařízení nebo prohlížeči, který uživatel použije k přístupu na webovou stránku, automatické rozvržení umožňuje, aby se prvky uvnitř rámců těmto změnám přizpůsobily. Díky tomu vypadá rozvržení a struktura přesněji a synergicky. Čtěte dále a dozvíte se, jak používat Auto Layout ve Figmě a jeho funkce.

Použití automatického rozvržení

Chcete-li použít automatické rozvržení a všechny jeho funkce, musíte jej nejprve přidat do rámečku, na kterém pracujete, což může být nový rámeček nebo rám s obsahem, objekty a komponentami. Poté, co vyberete rámeček nebo objekty, přidáte k nim Automatické rozvržení následovně:

• Stiskněte "Alt + A" na klávesnici (funguje na Mac a Windows).
• Klikněte pravým tlačítkem na objekty nebo komponenty a klikněte na Auto Layout (Tuto funkci musíte přidat ke každé komponentě, protože to není možné hromadně).
• Klepněte na ikonu plus vedle možnosti „Auto Layout“ v nabídce na Figma.

Kromě přidávání automatického rozvržení do rámečku můžete dělat různé věci, od skládání rámců po duplikování, uspořádání a odstraňování objektů.

Přidávání a odebírání objektů

Přidávání objektů do rámečku je docela jednoduché. Stačí pouze uchopit objekt, který chcete přidat, a sledovat indikátor. A pokud se chystáte nějaký odstranit, přetáhněte ho zpět a stiskněte delete. Pokud se rozhodnete přidat větší objekt, než je nadřazený rámeček, budete se muset vyhnout výchozímu nastavení Figma, abyste to mohli udělat. Můžete to provést podržením tlačítka „Ctrl“ pro Windows a „Command“ pro Mac.

Duplikování objektů

Pokud chcete do rámečku přidat dva nebo více identických objektů, můžete je duplikovat, což je užitečná funkce automatické vrstvy. Můžete to udělat takto:

1. Klepněte na objekt, který chcete duplikovat.
   
2. Pokud máte Windows, podržte současně tlačítka „Ctrl“ a „D“.
   
3. Pro Mac duplikujte podržením tlačítek „Command“ a „D“.
   

Uspořádání objektů

Pokud se vám nelíbí vzhled vašeho rámu a organizace objektů a součástí uvnitř, můžete je přeskupit. Pokud jste sloučili dvě vrstvy, musíte obejít výchozí nastavení Figmy stisknutím „Ctrl“ pro Windows a „Command“ pro Mac, abyste získali přístup k možnosti hlubokého výběru a přesunuli komponentu z počáteční vrstvy. Pokud se však jedná o jeden snímek, můžete vybrat objekt a přesunout jej jinam, podobně jako při přidávání objektů, nebo použít klávesu se šipkou.

Úrovně automatického rozvržení

Další funkcí automatického rozvržení je kombinování více snímků do jednoho za účelem vytvoření složitějšího rozhraní, kde můžete překrývat různé úrovně automatického rozvržení, jako jsou tlačítka a tlačítka, příspěvek a časová osa. Každá úroveň vám umožňuje přidat do rámečku další objekt. Úrovně tlačítek a řádků tlačítek jsou vodorovné, zatímco příspěvek je svislá vrstva, kde můžete vkládat popisy, obrázky atd.

Když složíte dva snímky dohromady, sloučí se a získají vlastnosti nadřazeného snímku. To umožňuje uživateli implementovat nastavitelné objekty. Můžete uchopit jeden a položit jej na druhý, abyste spojili dva rámy. Chcete-li to provést, musíte:

1. Vyberte si jeden rám a vše, co k němu chcete přidat.
   
2. Stiskněte „Shift + A“ pro přidání rámečku Auto Layout.
   

Funkce automatického rozvržení

Možnost Auto Layout (Automatické rozvržení) ve Figma má mnoho cenných vlastností nebo funkcí, od směru a pořadí vrstvení až po mezery, změnu velikosti a zarovnání. Tato část bude o každé z těchto funkcí hovořit podrobněji.

Směr

Jak název napovídá, směr odkazuje na pořadí objektů v rámci. Při použití automatického rozvržení lze objekty umístit:

• Svisle – objekty jsou umístěny na ose y. Tato možnost je vhodná pro seznamy, nabídky, informační kanály atd.
• Vodorovně – Objekty a komponenty na ose x (tlačítka, ikony atd.).
• Pozice zalomení – Objekty jsou nastaveny ve více sloupcích a řádcích.

Stohovací příkaz

Můžete si vybrat, které pořadí stohování nejlépe vyhovuje vašemu rámu. Jedná se pouze o vizuální změnu, protože pořadí překrývání zůstává stejné (pokud je 1,2,3, zůstane 1,2,3, ale s vizuálními úpravami). Když jsou objekty naskládány na sebe, můžete si vybrat, který z nich bude nahoře. Pokud tedy máte například tři věci označené 1, 2 a 3, můžete buď 1, nebo 3. Můžete to udělat takto:

1. Vyberte rámeček Auto Layout.
   
2. Přejděte na možnost Auto Layout na pravé straně obrazovky.
   
3. Klepnutím na tři vodorovné tečky otevřete pokročilé možnosti.
   
4. Najděte možnost „Skládání plátna“.
   
5. Vyberte „První nahoře“ nebo „Poslední nahoře“.
   

Absolutní pozice

Další vlastností „Layer Flow“ je absolutní pozice, kromě pořadí a směru překrývání. Tato funkce vám umožňuje umístit objekt, kamkoli chcete, a ignorovat hranice rámečku. Povolení je následující:

1. Uchopte předmět a umístěte jej do rámu.
   
2. V nabídce na pravé straně vedle hodnot pro „X“ a „Y“ klepněte na ikonu připomínající čtverec bez hran se znaménkem plus uvnitř.
   
3. Přesuňte objekt podél čar rámu.
   

Nastavení mezery

Existuje několik funkcí, které můžete upravit, pokud jde o rozestupy, jako je mezera. Mezeru můžete změnit dvěma způsoby: automaticky a zadáním konkrétní mezery. Pokud chcete, aby byla vaše mezera co největší, musíte vybrat automatické nastavení v nabídce Auto Layout. Pokud však budete zadávat své hodnoty, zadejte je do přiřazených polí.

Kromě toho lze nastavení mezery nastavit pro všechny směry. Pokud jsou vaše ikony pouze vodorovné a svislé, můžete mezi nimi vybrat vodorovnou mezeru. Pokud jsou však v poloze zalomení, můžete upravit nastavení vertikální a horizontální mezery.

Nastavení zarovnání

Po nastavení funkcí směru, výplně a mezery můžete upravit zarovnání podřízeného objektu v rámci, protože tato funkce závisí na nastavení mezer. Nemůžete změnit zarovnání každého objektu, ale vyberte vzor nabízený v nabídce Auto Layout. Můžete kliknout na mřížku 3×3 v nabídce a vybrat, jaké zarovnání chcete. To lze provést pomocí kláves se šipkami nebo tlačítek WSAD na klávesnici.

Dále zde můžete zvolit automatické nastavení a přepínat horizontální a vertikální zarovnání jako řádek. S konkrétními hodnotami můžete mít všech devět možností (vlevo nahoře, vlevo dole, vlevo, vpravo vlevo, vpravo dole atd.).

Můžete také upravit zarovnání textu povolením této možnosti z nabídky a podržením tlačítka „B“.

Změna velikosti

Možnosti změny velikosti automatického rozvržení mají mnoho dalších vlastností, jako je obsah objetí, možnost výplňového kontejneru, úprava šířky a výšky, rozměry atd. Pokud chcete, aby byly vaše hodnoty pevné, můžete si vybrat možnost auto, ale to omezuje možnosti. Pro změnu velikosti se doporučuje nastavit hodnoty.

Můžete vybrat pevnou hodnotu nebo ji nastavit na maximální nebo minimální možné rozměry pro šířku a výšku. Hug content umožňuje upravit velikost rámce na základě podřízeného objektu, zatímco možnost fill container změní velikost objektu podle rodičovského rámce.

Vytváření jedinečných snímků s automatickým rozvržením

Auto Layout, jako jedna ze základních funkcí Figma, může upravit váš rám a předměty a přihrádky uvnitř podle vašich preferencí. Jeho vlastnosti a vlastnosti jsou rozmanité, což vám umožní vytvořit správný a úhledný produkt. Auto Layout je základní nástroj, který musíte ovládat, než začnete pracovat ve Figmě.

Jakou funkci Auto Layout používáte nejčastěji? Dejte nám vědět v sekci komentářů níže.