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


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

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

 

После обновления в ноябре 2020 Auto Layout получила новую панель

Кнопка (короткий текст)

Кнопка (длинный текст)
Кнопка (длинный текст)
Для чего нужно

Автоматическое выравнивание позволяет создавать компоненты, чувствительные к размерам своего содержимого. Самый яркий пример — кнопка, общий размер которой меняется в зависимости от для текста. 

В верстке эквивалентом данного параметра можно назвать Padding.  

На практике данная опция, разумеется, нужна не только для добавления кнопок, но и для создания любых однотипных элементов — div-вов и контейнеров. 

Старая версия

Как включить Auto Layout (Padding/пэддинг)

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

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

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

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

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

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

Параметры

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

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

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

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

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

Как использовать 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 в друго фрейм с указанным пэддингом, если родительский фрейм может вместить в себя дочерний. 

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

 

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

Управление

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

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

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

    1. ?

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

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


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<