Auto Layout




Как использовать Auto Layout в Figma.

Figma с обновления от декабря 2019 года поддерживает автоматическое выравнивание элементов относительно краев фрейма. 

Auto Layout поучила несколько обновлений со времени своего появления. В статье ниже описана актуальная, но для истории мы сохранили и старые инструкции

 

Для чего нужно

Auto Layout позволяет задавать правила для позиционирования элементов относительно друг-друга. Так, можно задать отступы от краев, расстояние между элементами и выравнивание.

Старая версия (до ноября 2020)

Как включить Auto Layout

Чтобы включить Auto Layout выберите несколько элементов и нажмите Shift + A (либо выберите пункт Add Auto Layout). 

Если среди элементов нет вектора (прямоугольника), который был бы на заднем плане и располагался так, что все остальные элементы находились бы в его рамках, то Фигма создаст новый фрейм, в который поместит все выбранные элементы. 

Если же такой вектор есть, Фигма назначит этот вектор Фрейдом, сохранив его параметры (цвет, округление, тень и так далее). 

Также стоит учесть, что для корректной работы у текста должны быть выставлены корректные параметры масштабирования (вытягивать по длине). 

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

 

 

Параметры padding
Параметры Auto Layout

 

 

Параметры

 

Horizontal / Vertical — выравнивание элементов будет происходит по горизонтали или по вертикали

Horizontal padding — отступ от левого и правого краев фрейма

Vertical padding — отступ от верхнего и нижнего краев фрейма

Spacing Between Items — расстояние между элементами внутри фрейма (по вертикали или горизонтали — зависит от выбранного выравнивания)

Fixed или Auto (стрелка) изменения длины и ширины — в зависимости от выбранного типа выравнивания, вы можете указать способ изменения величины фрейма в другом измерении (для Horizontal — высоты, для Vertical — ширины)

Версия до 10 мая 2022

Как использовать Auto Layout (с новой панелью)

Чтобы включить Auto Layout выберите несколько элементов и нажмите Shift + A (либо выберите пункт Add Auto Layout).

Если среди элементов нет вектора (прямоугольника), который был бы на заднем плане и располагался так, что все остальные элементы находились бы в его рамках, то Фигма создаст новый фрейм, в который поместит все выбранные элементы.

Если же такой вектор есть, Фигма назначит этот вектор Фрейдом, сохранив его параметры (цвет, округление, тень и так далее).

 

Auto Layout Figma (new)
Новый интерфейс

Рассмотрим, как устроена новая панель.

  1. Вы можете указать направление выравнивания: по вертикали и по горизонтали. Соответственно, в зависимости от этого объекты внутри фрейма будут выстраиваться либо в столбец, либо в строку
  2. Вы указываете расстояние между объектами
  3. Теперь появилось значение «Padding Around Items» (1 на скриншоте) — оно указывает пэддинг (отступ) внутри фрейма со всех сторон
  4. Окно Alignment and Padding (2 на скриншоте) — нажмите, чтобы открыть панель.Расположение и пэддингВ ней можно задать Padding для конкретной стороны, указать позицию, к которой будут прижаты объекты внутри фрейма (для этого нажмите на поле внутри), а также указать способ компоновки объектов: вместе (Packed) или распределена (Space Between)
    Распределение объектов внутри
    Распределение объектов внутри

     

  5. Поле Resizing (3 на скриншоте) — вы можете указать поведение фрейма при изменении размера его вложенных элементов. Он может полностью «обнимать» контент внутри «Hug contents», либо иметь фиксированное значение Fixed.
    Фиксированные размеры
    Фиксированные размеры (элементы могут выходить за границы)

     

    Фрейм обнимает элементы
    Фрейм обнимает элементы

Auto Layout 2022

Панель Auto Layout
Панель Auto Layout 2022

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

Дополнительный настройки

Дополнительные настройки
Дополнительные настройки

Если вы нажмете на троеточие (см. скрин), откроется панель с дополнительными параметрами.

Именно в этом окне в версии 2022 есть куда больше долгожданных фич

Spacing mode

Spacing mode
Spacing mode

Spacing mode не является чем-то новым и как и прежде указывает, задаются ли расстояния между элементами вручную или рассчитываются автоматически, исходя из заданной ширины фрейма.

Strokes

Auto layout Strokes
Auto layout Strokes

Strokes могут быть Included или Excluded, и разница заключается в том, что в первом случае обводка начинается уже после пэддинга, а во втором находится внутри. Почти незаметно на тонких обводках.

Canvas stacking

Canvas stacking
Canvas stacking

Безусловно полезная функция, позволяющая задать порядок слоев во врейме. Если выбран First on top, то первый элемент будет выше в древе слоёв. Это хорошо видно по тени, падающей сверху вниз, которую не перекрывает следующий элемент.

Canvas stacking
Canvas stacking

На примере выше те же элементы с такой же тенью, но из-за настройки Last on top тень перекрывается следующими элементами.

Text baseline alignment

Text baseline alignment
Text baseline alignment

Text baseline alignment можно включить только для горизонтальных фреймов с Auto Layout

Эта функция позволяет сделать выравнивание по линии текста, что удобно, если у вас несколько слоев текста с разным размером. Слева Text baseline alignment выключено, справа — включено.

Ползунки

Еще одна особенность обновления 2022 — возможность менять расстояния, перетаскивая ползунки прямо в макете.

Ползунок Auto Layout
Ползунок Auto Layout

Вложенность

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

Вложенные фреймы с выравниванием
Вложенные фреймы с выравниванием сразу обоих фреймов

 

Вложенные фреймы
Вложенные фреймы с выравниванием сразу обоих фреймов

Управление

Вы можете перемещать элементы в очередности кнопками вверх-вниз, вправо-влево, либо перетаскивая элементы внутри фрейма

Auto Layout

Комментариев: 2
  1. Ну наконец-то, блин!

    1. ?

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки