Auto Layout — важный инструмент для каждого дизайнера и пользователя Figma. Эта функция позволяет вносить такие изменения, как изменение размера или положения кадров и объектов. Auto Layout позволит вам настроить высоту и вес элемента, например, с помощью автоматической настройки, сократив объем работы вдвое.
Поскольку размер экрана меняется в зависимости от устройства или браузера, который пользователь будет использовать для доступа к веб-сайту, Auto Layout заставляет элементы внутри фреймов подстраиваться под эти изменения. Это делает макет и структуру более точными и согласованными. Читайте дальше, чтобы узнать, как использовать Auto Layout в Figma и его функции.
Использование автоматического макета
Чтобы использовать автоматический макет и все его функции, необходимо сначала добавить его в кадр, над которым вы работаете, который может быть новым кадр или кадр с содержимым, объектами и компонентами. После того как вы выделите рамку или объекты, добавьте к ним автоматический макет следующим образом:
- Нажмите “Alt + A” клавиатура (работает на Mac и Windows).
- Щелкните правой кнопкой мыши объекты или компоненты и выберите «Автоматический макет» (эту функцию необходимо добавить к каждому компоненту, поскольку это невозможно в массовом порядке).
- Нажмите значок плюса рядом с параметром «Автоматический макет». в меню Figma.
Помимо добавления автоматического макета в кадр вы можете выполнять различные действия: от штабелирования кадров до дублирования, упорядочения и удаления объектов.
Добавление и удаление объектов
Добавлять объекты в рамку довольно просто. Вам нужно только взять объект, который вы хотите добавить, и следовать за индикатором. А если вы собираетесь удалить его, перетащите его обратно и нажмите «Удалить». Если вы решите добавить объект большего размера, чем родительский фрейм, вам нужно будет избегать настроек Figma по умолчанию, чтобы иметь возможность это сделать. Это можно сделать, удерживая кнопку “Ctrl” кнопка для Windows и “Command” для Mac.
Дублирование объектов
Если вы хотите добавить в кадр два или более одинаковых объекта, вы можете дублировать их, что является полезная функция автоматического наложения слоев. Вот как это можно сделать:
- Нажмите на объект, который хотите дублировать.
- Удерживайте “Ctrl” и “D” кнопки одновременно, если у вас Windows.
- Для Mac дублируйте, удерживая “Command” и “D” кнопки.
Расположение объектов
Если вам не нравится внешний вид вашего кадра и организация объектов и компонентов внутри него, вы можете изменить их расположение. Если вы объединили два слоя, вам необходимо обойти настройки Figma по умолчанию, нажав “Ctrl” для Windows и “Command” для Mac, чтобы получить доступ к опции глубокого выбора и переместить компонент из начального слоя. Однако, если это один кадр, вы можете выбрать объект и переместить его в другое место, аналогично добавлению объектов, или использовать клавишу со стрелкой.
Уровни автоматического макета< /h3>
Еще одна особенность автоматического макета — объединение большего количества кадров в один для создания более сложного интерфейса, в котором вы можете накладывать различные уровни автоматического макета, такие как кнопки и строки кнопок, публикацию и временную шкалу. Каждый уровень позволяет вам добавить в кадр еще один объект. Уровни кнопок и строк кнопок горизонтальны, а сообщение представляет собой вертикальный слой, куда вы можете вводить описания, изображения и т. д.
Когда вы объединяете два фрейма вместе, они объединяются и приобретают свойства родительского фрейма. Это позволяет пользователю реализовывать настраиваемые объекты. Вы можете взять один и положить его на другой, чтобы соединить два кадра. Для этого вам необходимо:
- Выбрать один кадр и все, что вы хотите к нему добавить.
- Нажмите “Shift + A” чтобы добавить рамку автоматического макета.
Функции автоматического макета
< p>Опция Auto Layout в Figma имеет множество ценных свойств и функций: от направления и порядка укладки до интервалов, изменения размера и выравнивания. В этом разделе мы поговорим о каждой из этих функций более подробно.
Направление
Как следует из названия, направление относится к порядку объектов в рама. При использовании Auto Layout объекты можно размещать:
- Вертикально – Объекты размещаются по оси Y. Этот вариант подходит для списков, меню, лент новостей и т. д.
- Горизонтально – – Объекты и компоненты на оси X (кнопки, значки и т. д.).
- Перенос позиции – Объекты располагаются в нескольких столбцах и строках.
Порядок размещения
Вы можете выбрать, какой порядок укладки лучше всего подходит для вашей рамы. Это визуальное изменение, поскольку порядок наложения остается прежним (если это 1,2,3, то остается 1,2,3, но с визуальными корректировками). Когда объекты наложены друг на друга, вы можете выбрать, какой из них будет сверху. Так, например, если у вас есть три вещи, отмеченные цифрами 1, 2 и 3, вы можете выбрать либо 1, либо 3. Вот как это можно сделать:
- Выберите Рамка автоматического макета.
- Перейдите к параметру автоматического макета в правой части экрана.< бр>
- Нажмите на три горизонтальные точки, чтобы открыть дополнительные параметры.
- Найдите “Стекирование холста” вариант.
- Выберите “Первый сверху” или “Последним сверху.”
Абсолютное положение
Еще один “Слоевой поток” Свойство представляет собой абсолютную позицию, независимо от порядка и направления наложения. Эта функция позволяет разместить объект где угодно, не обращая внимания на границы кадра. Вот как это включить:
- Захватите объект и поместите его в рамку.
- В правом меню рядом со значениями “X” и “Y,” коснитесь значка, напоминающего квадрат без краев с плюсом внутри.
- Перемещайте объект по линиям кадра.
Пробел Настройка
Есть несколько функций, которые вы можете настроить, когда дело доходит до интервала, например, зазор. У вас есть два способа изменить зазор: автоматически и путем ввода определенного зазора. Если вы хотите, чтобы ваш зазор был как можно большим, вам нужно выбрать автоматическую настройку в меню «Автоматический макет». Но если вы собираетесь вводить свои значения, введите их в назначенные поля.
Кроме того, настройку зазора можно установить для всех направлений. Если ваши значки только горизонтальные и вертикальные, вы можете выбрать горизонтальный промежуток между ними. Однако, если они находятся в положении переноса, вы можете настроить параметры вертикального и горизонтального зазора.
Настройка выравнивания
После настройки функций направления, заполнения и зазора вы можете настроить выравнивание дочернего объекта в кадре, поскольку эта функция зависит от настроек интервала. Вы не можете изменить выравнивание каждого объекта, но можете выбрать шаблон, предложенный в меню автоматического макета. Вы можете нажать на сетку 3×3 в меню и выбрать желаемое выравнивание. Это можно сделать с помощью клавиш со стрелками или кнопок WSAD на клавиатуре.
Кроме того, здесь вы можете выбрать автоматическую настройку, чтобы последовательно переключать горизонтальное и вертикальное выравнивание. При определенных значениях вы можете использовать все девять параметров (слева вверху, слева внизу, слева, справа слева, внизу справа и т. д.).
Вы также можете настроить выравнивание текста, включив этот параметр в меню и проведение “B” кнопка.
Изменение размера
Параметры изменения размера автоматического макета имеют множество дополнительных свойств, таких как объем содержимого, опция заполнения контейнера, настройка ширины и высоты, размеров и т. д. Вы можете выбрать автоматический параметр, если хотите, чтобы ваши значения были фиксированными, но это ограничивает возможности. Для изменения размера рекомендуется установить свои значения.
Вы можете выбрать фиксированное значение или установить максимально или минимально возможные размеры ширины и высоты. Содержимое Hug позволяет регулировать размер фрейма на основе дочернего объекта, а опция контейнера заполнения изменяет размер объекта в соответствии с родительским фреймом.
Создание уникальных фреймов С помощью Auto Layout
Auto Layout, как одна из основных функций Figma, может настроить рамку, а также объекты и отсеки внутри нее по вашему вкусу. Его свойства и особенности многочисленны, что позволяет создать правильное и аккуратное изделие. Auto Layout — это фундаментальный инструмент, которым вы должны овладеть, прежде чем работать в Figma.
Какую функцию Auto Layout вы используете чаще всего? Дайте нам знать в разделе комментариев ниже.
