Как использовать автоматический макет в Figma

Auto Layout — важный инструмент для каждого дизайнера и пользователя Figma. Эта функция позволяет вносить такие изменения, как изменение размера или положения кадров и объектов. Auto Layout позволит вам настроить высоту и вес элемента, например, с помощью автоматической настройки, сократив объем работы вдвое.

Поскольку размер экрана меняется в зависимости от устройства или браузера, который пользователь будет использовать для доступа к веб-сайту, Auto Layout заставляет элементы внутри фреймов адаптироваться к этим изменениям. Это делает макет и структуру более точными и согласованными. Читайте дальше, чтобы узнать, как использовать Auto Layout в Figma и его функции.

Использование автоматического макета

Чтобы использовать автоматический макет и все его функции, сначала необходимо добавить его в фрейм, над которым вы работаете (это может быть новый фрейм или фрейм с содержимым, объектами и компонентами). После того, как вы выберете кадр или объекты, добавьте к нему автоматический макет следующим образом:

• Нажмите «Alt + A» на клавиатуре (работает на Mac и Windows).
• Щелкните правой кнопкой мыши объекты или компоненты и выберите «Автоматическое расположение» (эту функцию необходимо добавить к каждому компоненту, поскольку массово это невозможно).
• Нажмите значок плюса рядом с опцией «Автоматический макет» в меню Figma.

Помимо добавления автоматического макета в кадр, вы можете выполнять различные действия: от штабелирования кадров до дублирования, упорядочения и удаления объектов.

Добавление и удаление объектов

Добавлять объекты в рамку довольно просто. Вам нужно только взять объект, который вы хотите добавить, и следовать за индикатором. И если вы собираетесь удалить его, перетащите его обратно и нажмите «Удалить». Если вы решите добавить объект большего размера, чем родительский фрейм, вам нужно будет избегать настроек Figma по умолчанию, чтобы иметь возможность это сделать. Вы можете сделать это, удерживая кнопку «Ctrl» для Windows и «Command» для Mac.

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

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

1. Коснитесь объекта, который хотите дублировать.
   
2. Удерживайте одновременно кнопки «Ctrl» и «D», если у вас Windows.
   
3. На Mac выполните дублирование, удерживая кнопки «Command» и «D».
   

Расположение объектов

Если вам не нравится внешний вид вашего кадра и организация объектов и компонентов внутри него, вы можете изменить их расположение. Если вы объединили два слоя, вам необходимо обойти настройки Figma по умолчанию, нажав «Ctrl» для Windows и «Command» для Mac, чтобы получить доступ к опции глубокого выбора и переместить компонент из начального слоя. Однако, если это один кадр, вы можете выбрать объект и переместить его в другое место, аналогично добавлению объектов, или использовать клавишу со стрелкой.

Автоматические уровни макета

Еще одна особенность автоматического макета — объединение большего количества кадров в один для создания более сложного интерфейса, в котором вы можете накладывать различные уровни автоматического макета, такие как кнопки и строки кнопок, сообщения и временная шкала. Каждый уровень позволяет вам добавить в кадр еще один объект. Уровни кнопок и строк расположены горизонтально, а сообщение представляет собой вертикальный слой, куда вы можете вводить описания, изображения и т. д.

Когда вы объединяете два фрейма, они сливаются и приобретают свойства родительского фрейма. Это позволяет пользователю реализовывать настраиваемые объекты. Вы можете взять один и положить его на другой, чтобы соединить два кадра. Для этого вам необходимо:

1. Выберите один кадр и все, что вы хотите к нему добавить.
   
2. Нажмите «Shift + A», чтобы добавить рамку автоматического макета.
   

Функции автоматического макета

Опция «Автоматический макет» в Figma имеет множество ценных свойств и функций: от направления и порядка укладки до интервалов, изменения размера и выравнивания. В этом разделе мы поговорим о каждой из этих функций более подробно.

Направление

Как следует из названия, направление относится к порядку объектов в кадре. При использовании Auto Layout объекты можно размещать:

• Вертикально — объекты размещаются по оси Y. Этот вариант подходит для списков, меню, лент новостей и т. д.
• По горизонтали — объекты и компоненты по оси X (кнопки, значки и т. д.).
• Позиция переноса — объекты располагаются в нескольких столбцах и строках.

Порядок укладки

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

1. Выберите рамку «Автоматический макет».
   
2. Перейдите к опции «Автоматический макет» в правой части экрана.
   
3. Коснитесь трех горизонтальных точек, чтобы открыть дополнительные параметры.
   
4. Найдите опцию «Стекирование холста».
   
5. Выберите «Первый сверху» или «Последний сверху».
   

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

Еще одно свойство Layer Flow — это абсолютная позиция, не считая порядка и направления наложения. Эта функция позволяет разместить объект где угодно, не обращая внимания на границы кадра. Вот как это включить:

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

Настройка разрыва

Есть несколько функций, которые вы можете настроить, когда дело доходит до интервала, например, зазор. У вас есть два способа изменить зазор: автоматически и путем ввода определенного зазора. Если вы хотите, чтобы ваш зазор был как можно большим, вам нужно выбрать автоматическую настройку в меню «Автоматический макет». Но если вы собираетесь вводить свои значения, введите их в назначенные поля.

Кроме того, настройку зазора можно установить для всех направлений. Если ваши значки только горизонтальные и вертикальные, вы можете выбрать горизонтальный промежуток между ними. Однако, если они находятся в положении переноса, вы можете настроить параметры вертикального и горизонтального зазора.

Настройка выравнивания

После настройки функций направления, заполнения и зазора вы можете настроить выравнивание дочернего объекта в кадре, поскольку эта функция зависит от настроек интервала. Вы не можете изменить выравнивание каждого объекта, но можете выбрать шаблон, предложенный в меню Auto Layout. Вы можете нажать на сетку 3×3 в меню и выбрать желаемое выравнивание. Это можно сделать с помощью клавиш со стрелками или кнопок WSAD на клавиатуре.

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

Вы также можете настроить выравнивание текста, включив эту опцию в меню и удерживая кнопку «B».

Изменение размера

Параметры изменения размера автоматического макета имеют множество дополнительных свойств, таких как объем содержимого, опция заполнения контейнера, настройка ширины и высоты, размеров и т. д. Вы можете выбрать автоматический параметр, если хотите, чтобы ваши значения были фиксированными, но это ограничивает возможности. Для изменения размера рекомендуется установить свои значения.

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

Создание уникальных фреймов с помощью автоматического макета

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

Какую функцию автоматического макета вы используете чаще всего? Дайте нам знать в комментариях ниже.