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


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

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

 

 

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

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

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

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

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

Управление

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

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

Комментариев: 2
  1. toni

    Ну наконец-то, блин!

    1. Serg

      ?

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

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


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

По теме:


<