Auto Layout
Как использовать Auto Layout в Figma.
Figma с обновления от декабря 2019 года поддерживает автоматическое выравнивание элементов относительно краев фрейма.
Auto Layout поучила несколько обновлений со времени своего появления. В статье ниже описана актуальная, но для истории мы сохранили и старые инструкции
Auto Layout позволяет задавать правила для позиционирования элементов относительно друг-друга. Так, можно задать отступы от краев, расстояние между элементами и выравнивание.
Как включить Auto Layout
Чтобы включить Auto Layout выберите несколько элементов и нажмите Shift + A (либо выберите пункт Add Auto Layout).
Если среди элементов нет вектора (прямоугольника), который был бы на заднем плане и располагался так, что все остальные элементы находились бы в его рамках, то Фигма создаст новый фрейм, в который поместит все выбранные элементы.
Если же такой вектор есть, Фигма назначит этот вектор Фрейдом, сохранив его параметры (цвет, округление, тень и так далее).
Также стоит учесть, что для корректной работы у текста должны быть выставлены корректные параметры масштабирования (вытягивать по длине).
Параметры выравнивания доступны в окне инструментов в правой части экрана. Выберите фрейм, для которого назначено выравнивание, чтобы отредактировать их.
Параметры
Horizontal / Vertical — выравнивание элементов будет происходит по горизонтали или по вертикали
Horizontal padding — отступ от левого и правого краев фрейма
Vertical padding — отступ от верхнего и нижнего краев фрейма
Spacing Between Items — расстояние между элементами внутри фрейма (по вертикали или горизонтали — зависит от выбранного выравнивания)
Fixed или Auto (стрелка) изменения длины и ширины — в зависимости от выбранного типа выравнивания, вы можете указать способ изменения величины фрейма в другом измерении (для Horizontal — высоты, для Vertical — ширины)
Как использовать Auto Layout (с новой панелью)
Чтобы включить Auto Layout выберите несколько элементов и нажмите Shift + A (либо выберите пункт Add Auto Layout).
Если среди элементов нет вектора (прямоугольника), который был бы на заднем плане и располагался так, что все остальные элементы находились бы в его рамках, то Фигма создаст новый фрейм, в который поместит все выбранные элементы.
Если же такой вектор есть, Фигма назначит этот вектор Фрейдом, сохранив его параметры (цвет, округление, тень и так далее).
Рассмотрим, как устроена новая панель.
- Вы можете указать направление выравнивания: по вертикали и по горизонтали. Соответственно, в зависимости от этого объекты внутри фрейма будут выстраиваться либо в столбец, либо в строку
- Вы указываете расстояние между объектами
- Теперь появилось значение «Padding Around Items» (1 на скриншоте) — оно указывает пэддинг (отступ) внутри фрейма со всех сторон
- Окно Alignment and Padding (2 на скриншоте) — нажмите, чтобы открыть панель.В ней можно задать Padding для конкретной стороны, указать позицию, к которой будут прижаты объекты внутри фрейма (для этого нажмите на поле внутри), а также указать способ компоновки объектов: вместе (Packed) или распределена (Space Between)
- Поле Resizing (3 на скриншоте) — вы можете указать поведение фрейма при изменении размера его вложенных элементов. Он может полностью «обнимать» контент внутри «Hug contents», либо иметь фиксированное значение Fixed.
Auto Layout 2022
Итак, на основной панели как и прежде можно настроить наравление, выравнивание и отступы. Однако, в новой версии можно сразу указать горизонтальные и вертикальные пэддинги (отступы внутри фрейма с выравниванием), а в отдельно подменю скрываются независимые отступы для каждой из четырех сторон.
Дополнительный настройки
Если вы нажмете на троеточие (см. скрин), откроется панель с дополнительными параметрами.
Именно в этом окне в версии 2022 есть куда больше долгожданных фич
Spacing mode
Spacing mode не является чем-то новым и как и прежде указывает, задаются ли расстояния между элементами вручную или рассчитываются автоматически, исходя из заданной ширины фрейма.
Strokes
Strokes могут быть Included или Excluded, и разница заключается в том, что в первом случае обводка начинается уже после пэддинга, а во втором находится внутри. Почти незаметно на тонких обводках.
Canvas stacking
Безусловно полезная функция, позволяющая задать порядок слоев во врейме. Если выбран First on top, то первый элемент будет выше в древе слоёв. Это хорошо видно по тени, падающей сверху вниз, которую не перекрывает следующий элемент.
На примере выше те же элементы с такой же тенью, но из-за настройки Last on top тень перекрывается следующими элементами.
Text baseline alignment
Text baseline alignment можно включить только для горизонтальных фреймов с Auto Layout
Эта функция позволяет сделать выравнивание по линии текста, что удобно, если у вас несколько слоев текста с разным размером. Слева Text baseline alignment выключено, справа — включено.
Ползунки
Еще одна особенность обновления 2022 — возможность менять расстояния, перетаскивая ползунки прямо в макете.
Вложенность
Вы можете добавлять один фрейм с Auto Layout в друго фрейм с указанным пэддингом, если родительский фрейм может вместить в себя дочерний.
Управление
Вы можете перемещать элементы в очередности кнопками вверх-вниз, вправо-влево, либо перетаскивая элементы внутри фрейма
Ну наконец-то, блин!
?