Выравнивание в Figma: Auto Layout

Модуль

Соберём макет из иллюстрации, её описания, фотографии автора и подписи к ней с помощью функции Auto Layout.

1. Создайте белый фрейм.

2. Добавьте в него все объекты. Например, вот таким образом:

3. Выделите фрейм и нажмите на + рядом с Auto Layout на панели настроек. Ваш макет станет выглядеть примерно так:

Когда вы активировали у фрейма функцию Auto Layout, все объекты внутри начали подчиняться новым правилам и выстроились в линию.

Параметры Auto Layout на панели настроек

Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. Стрелка ↓ означает вертикальное выравнивание, а → — горизонтальное.

 — этот параметр задаёт отступы между элементами.

 — этот параметр задаёт внешние поля, одинаковые со всех сторон.

В меню параметра  указывают размер каждого внешнего поля и выравнивание объектов внутри модуля с Auto Layout.

Чтобы задать выравнивание объектов, зайдите в меню  и выберите одно из значений: Packed — элементы будут стоять рядом друг с другом, Space between — равномерно распределятся по всему фрейму с Auto Layout.

Чтобы выровнять блоки по одной из сторон фрейма с Auto Layout, зайдите
в меню  и выберите нужную опцию в центральной области с синими квадратами:

Чтобы поменять блоки местами, выделите один из них и перетяните на то место, где он должен стоять — выбранный блок сам выровняется в соответствии с настройками фрейма с Auto Layout, как и соседние:

Приведём макет в порядок. Установим отступ между модулями  24 пикселя, выровняем всё по верхнему левому краю в меню  и установим внешние
отступы  48 пикселей:

В получившемся макете есть проблема с фотографией автора и его именем — они стоят слишком далеко друг от друга. Исправим это с помощью функции Group.

1. Выделите левой кнопкой мыши фотографию и имя автора и нажмите на клавиатуре Ctrl + G — фотография и имя автора объединятся в группу:

2. В блоке Group укажите горизонтальные отступы в настройках  на восемь пикселей:

Поставим фотографию справа от текста с использованием функции Group.

1. Выделите заголовок, текст и иллюстрацию и объедините их в группу, нажав на клавиатуре Ctrl + G.

2. Выделите группу и нажмите на + рядом с Auto Layout на панели настроек. Ваш макет станет выглядеть примерно так:

3. Кликните на панели слоёв по главному фрейму и в блоке Auto Layout нажмите на →.

Готово — осталось только выставить отступы  24 пикселя для группы с заголовком, текстом и иллюстрацией, поставить фотографию справа и для красоты переместить иллюстрацию под абзац:

Сейчас текст не заполняет всю ширину колонки. Чтобы это исправить, выделите текстовый модуль и в параметре Resizing вместо свойства Fixed width укажите Fill container — текст растянется на всю ширину колонки, отступ до иллюстрации останется прежним, а фрейм подстроится под новую высоту:

Сейчас, если растянуть фрейм с Auto Layout, все объекты внутри него будут оставаться на местах, поскольку в параметрах  указано свойство Packed. Поменяйте его на Space between, чтобы все объекты стремились к краям:

Страница

Соберём страницу из трёх модулей, каждый из которых имеет отступы 60 пикселей. С помощью функции Auto Layout это сделать просто.

• 1. Создайте фрейм, выделите его и нажмите на + рядом с Auto Layout на панели настроек.
• 2. Выделите левой кнопкой мыши ваши модули и поместите их в получившийся фрейм с Auto Layout.
• 3. Укажите горизонтальные отступы в настройках  и внешние отступы основного фрейма в настройках  или .

Готово — модули расположились в соответствии с настройками Auto Layout. Изменять настройки страницы можно так же, как и настройки отдельного модуля, на содержимое это не повлияет: