Дизайн
#Руководства

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

Рассказываем, что такое Auto Layout и как с помощью него можно аккуратно и быстро сверстать кнопку, модуль и страницу.

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

Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически. Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы.

9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с Auto Layout, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.

Кнопка

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

Как сделать адаптивную кнопку:

1. Напишите любой текст.

2. На панели слоёв нажмите на текст правой кнопкой мыши и выберите Frame Selection.

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

Теперь выставим отступы. Если их нужно сделать одинаковыми, укажите значение напротив иконки .

Если у каждой стороны должен быть свой отступ, нажмите на иконку  и укажите нужные значения в дополнительном меню.

Готово — у вас получилась кнопка, которая автоматически подстраивается под длину текста:

Кнопка сама адаптируется под длину текста благодаря параметру Resizing — изменение размера. По умолчанию Figma в Resizing использует свойство Hug contents — форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого.

Если указать в параметре Resizing свойство Fixed, то модуль кнопки получит фиксированный размер и не будет следовать за изменением текста:

Модуль

Соберём макет из иллюстрации, её описания, фотографии автора и подписи к ней с помощью функции 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. Изменять настройки страницы можно так же, как и настройки отдельного модуля, на содержимое это не повлияет:

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Курс

Профессия Графический дизайнер

Вы узнаете, как создавать айдентику бренда в вебе и для печати. Научитесь работать в Illustrator, Photoshop, InDesign и Figma. Добавите в портфолио плакаты, логотипы, дизайн мерча и другие сильные проекты. Начнёте карьеру в студии или на фрилансе.

Узнать про курс

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать
Обучение: Профессия Графический дизайнер Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована