Как да използвате автоматично оформление във Figma

Auto Layout е важен инструмент за всеки дизайнер и потребител на Figma. Тази функция ви позволява да правите промени като преоразмеряване или препозициониране на рамки и обекти. Auto Layout ще ви позволи да регулирате височината и теглото на елемент, например с автоматична настройка, намалявайки работата ви наполовина.

Тъй като размерът на екрана се променя в зависимост от устройството или браузъра, които потребителят ще използва за достъп до уебсайта, Auto Layout кара елементите в рамките да се адаптират към тези промени. Това прави оформлението и структурата да изглеждат по-прецизни и в синергия. Прочетете, за да научите как да използвате Auto Layout във Figma и неговите функции.

Използване на автоматично оформление

За да използвате Auto Layout и всички негови функции, първо трябва да го добавите към рамка, върху която работите, която може да бъде нова рамка или такава със съдържание, обекти и компоненти. След като изберете рамката или обектите, ето как да добавите автоматично оформление към тях:

• Натиснете „Alt + A“ на клавиатурата (Работи на Mac и Windows).
• Щракнете с десния бутон върху обектите или компонентите и щракнете върху Автоматично оформление (Трябва да добавите тази функция към всеки компонент, тъй като е невъзможно групово).
• Докоснете иконата плюс до опцията „Автоматично оформление“ в менюто на Figma.

Освен добавяне на автоматично оформление към вашата рамка, можете да правите различни неща, от подреждане на рамки до дублиране, подреждане и премахване на обекти.

Добавяне и премахване на обекти

Добавянето на обекти към вашата рамка е доста лесно. Трябва само да вземете обекта, който искате да добавите, и да следвате индикатора. И ако ще премахнете някой, плъзнете го обратно и натиснете delete. Ако изберете да добавите по-голям обект от основната рамка, ще трябва да избегнете настройките по подразбиране на Figma, за да можете да го направите. Можете да направите това, като задържите бутона „Ctrl“ за Windows и „Command“ за Mac.

Дублиране на обекти

Ако искате да добавите два или повече еднакви обекта към рамката, можете да ги дублирате, което е полезна функция за автоматично наслояване. Ето как можете да го направите:

1. Докоснете обекта, който искате да дублирате.
   
2. Задръжте бутоните „Ctrl“ и „D“ едновременно, ако имате Windows.
   
3. За Mac дублирайте, като задържите бутоните „Command“ и „D“.
   

Подреждане на обекти

Ако не харесвате външния вид на вашата рамка и организацията на обектите и компонентите в нея, можете да ги пренаредите. Ако сте обединили два слоя, трябва да заобиколите настройките по подразбиране на Figma, като натиснете „Ctrl“ за Windows и „Command“ за Mac, за да получите достъп до опцията за дълбок избор и да преместите компонента от първоначалния слой. Ако обаче е една рамка, можете да изберете обект и да го преместите другаде, подобно на добавяне на обекти, или да използвате клавиша със стрелка.

Автоматични нива на оформление

Друга функция на Auto Layout е комбинирането на повече кадри в един, за да се създаде по-сложен интерфейс, където можете да наслагвате различни нива на Auto Layouts като бутони и редове с бутони, публикация и времева линия. Всяко ниво ви позволява да добавите допълнителен обект към вашата рамка. Нивата на бутоните и редовете с бутони са хоризонтални, докато публикацията е вертикален слой, където можете да въвеждате описания, изображения и т.н.

Когато стекате две рамки заедно, те се сливат и получават свойствата на родителска рамка. Това позволява на потребителя да реализира регулируеми обекти. Можете да вземете една и да я поставите върху друга, за да съедините две рамки. За да направите това, трябва:

1. Изберете една рамка и всичко, което искате да добавите към нея.
   
2. Натиснете „Shift + A“, за да добавите рамка за автоматично оформление.
   

Функции за автоматично оформление

Опцията за автоматично оформление във Figma има много ценни свойства или функции, от посока и ред на подреждане до разстояние, преоразмеряване и подравняване. Този раздел ще говори за всяка от тези функции по-подробно.

Посока

Както подсказва името, посоката се отнася до реда на обектите в рамка. Когато използвате Auto Layout, обектите могат да бъдат поставени:

• Вертикално – Обектите се поставят върху оста y. Тази опция е подходяща за списъци, менюта, емисии с новини и др.
• Хоризонтално – Обекти и компоненти по оста x (бутони, икони и др.).
• Позиция на обвиване – Обектите са зададени в множество колони и редове.

Ред на подреждане

Можете да изберете кой ред на подреждане пасва най-добре на вашата рамка. Това е само визуална промяна, тъй като редът на подреждане остава същият (ако е 1,2,3, остава 1,2,3, но с визуални корекции). Когато обектите са подредени един върху друг, можете да изберете кой да е отгоре. Така че, например, ако имате три неща, отбелязани с 1, 2 и 3, можете да 1 или 3. Ето как можете да направите това:

1. Изберете рамката за автоматично оформление.
   
2. Придвижете се до опцията за автоматично оформление вдясно на екрана.
   
3. Докоснете трите хоризонтални точки, за да отворите разширени опции.
   
4. Намерете опцията „Canvas Stacking“.
   
5. Изберете „Първи отгоре“ или „Последен отгоре“.
   

Абсолютна позиция

Друго свойство на „Layer Flow“ е абсолютна позиция, освен реда и посоката на подреждане. Тази функция ви позволява да поставите обект където пожелаете, като игнорирате границите на рамката. Ето как да го активирате:

1. Вземете предмет и го поставете в рамката.
   
2. В дясното меню, до стойностите за „X“ и „Y“, докоснете иконата, наподобяваща квадрат без ръбове с плюс вътре.
   
3. Преместете обекта по линиите на рамката.
   

Gap Настройка

Има няколко функции, които можете да коригирате, когато става въпрос за разстояние, като празнина. Имате два начина да промените празнината: автоматично и въвеждане на конкретна празнина. Ако искате празнината ви да бъде възможно най-голяма, тогава трябва да изберете автоматичната настройка в менюто Auto Layout. Но ако ще въведете вашите стойности, въведете ги в зададените полета.

Освен това, настройката на разстоянието може да бъде зададена за всички посоки. Ако вашите икони са само хоризонтални и вертикални, можете да изберете хоризонтална празнина между тях. Въпреки това, ако са в положение на обвиване, можете да регулирате настройките за вертикално и хоризонтално разстояние.

Настройка на подравняване

След като настроите функциите за посока, подложка и интервал, можете да коригирате подравняването на дъщерния обект във вашата рамка, тъй като тази функция зависи от настройките за разстояние. Не можете да промените подравняването на всеки обект, но изберете модел, предложен в менюто на Auto Layout. Можете да щракнете върху мрежата 3 × 3 в менюто и да изберете кое подравняване искате. Това може да стане с клавишите със стрелки или бутоните WSAD на вашата клавиатура.

Освен това можете да изберете автоматичната настройка тук, за да превключвате хоризонтално и вертикално подравняване като ред. С конкретни стойности можете да имате всичките девет опции (горе вляво, долу вляво, вляво, вдясно вляво, долу вдясно и т.н.).

Можете също така да коригирате подравняването на текста, като активирате тази опция от менюто и задържите бутона „B“.

Преоразмеряване

Опциите за преоразмеряване на автоматичното оформление имат много допълнителни свойства, като съдържание на прегръдка, опция за запълване на контейнер, регулиране на ширина и височина, размери и т.н. Можете да изберете опцията автоматично, ако искате вашите стойности да бъдат фиксирани, но това ограничава възможностите. За преоразмеряване се препоръчва да зададете вашите стойности.

Можете да изберете фиксирана стойност или да я зададете на максималните или минималните възможни размери за ширина и височина. Hug content ви позволява да регулирате размера на рамка въз основа на дъщерния обект, докато опцията за запълване на контейнера преоразмерява обект според родителската рамка.

Създаване на уникални рамки с автоматично оформление

Автоматичното оформление, като една от основните функции на Figma, може да коригира вашата рамка и обекти и отделения в нея според вашите предпочитания. Неговите свойства и функции са многобройни, което ви позволява да създадете подходящ и чист продукт. Auto Layout е основен инструмент, който трябва да овладеете, преди да работите във Figma.

Коя функция за автоматично оформление използвате най-често? Уведомете ни в секцията за коментари по-долу.