Auto Layout в Figma: что это такое и как использовать?

Auto layout — это инструмент для группировки объектов и мощная система, которая управляет внутренними и внешними отступами, выравниванием и поведением элементов при изменении их содержимого. Когда-то дизайнерам приходилось вручную выравнивать элементы, сдвигать десятки слоев после изменения текста в кнопке и часами адаптировать макеты под разные экраны. Auto Layout изменил правила игры.  Погнали разберемся, как с ним работать!

Фундамент: Основные свойства Auto Layout

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

Панель настроек Auto layout в Figma

Чтобы создать Auto layout необходимо выделить один или несколько слоев и нажать горячие клавиши Shift + A. Или кликни правой кнопкой мыши и выбери «Add auto layout». 

Создание Auto layout в Figma 

Но я все же рекомендую, создавать Auto layout через сочетание клавиш, так гораздо быстрее. И выделенные элементы тут же обернутся в специальный фрейм.

Теперь разберем его ключевые свойства:

• Direction (Направление): Задает ориентацию элементов внутри фрейма — по вертикали (столбец),  по горизонтали (строка) или сетка (на данный момент в beta). Именно это свойство определяет, куда добавится новый объект.

Направление Auto layout в Figma

• Spacing (Интервалы): Расстояние между элементами внутри Auto Layout. Изменив одно значение, вы равномерно сдвинете все объекты, сохраняя идеальный порядок.

Расстояние между элементами Auto layout в Figma

• Padding (Отступы): Это отступы внутри контейнера, расстояние от границ фрейма до его содержимого. Можно задать одинаковые отступы со всех сторон или настроить каждый отдельно.

Отступы внутри Auto layout в Figma

• Alignment (Выравнивание): Определяет, как элементы располагаются внутри фрейма, когда у них есть свободное пространство. Например, по центру, по левому краю или по правому верхнему углу.

Выравнивание Auto layout в Figma

Давай в качестве закрепления, устроим небольшую практику, открывай Figma и повторяй все шаги:

• Создай текстовый слой (например, «Скачать») и иконку.

Создание текстового слоя и иконки в Figma

• Выдели оба объекта и нажмите Shift + A.

Создание Auto layout для кнопки в Figma

• В панели Auto Layout задай Spacing, например, 8px, чтобы отодвинуть иконку от текста.

Изменение расстояния между текстом и иконкой внутри Auto layout

• Задай горизонтальные и вертикальные Padding, например, 16px и 8px соответственно.

Настройка paddings внутри кнопки в Figma

• Добавь заливку (Fill) фрейму. 

Добавление заливки в Auto layout в Figma

• Готово! Теперь, если вы изменишь текст, кнопка автоматически подстроится под его длину, сохраняя все отступы.

Адаптивная кнопка в Figma

Что такое адаптивность? И как управлять размерами (Resizing)

Это сердце Auto Layout и ключ к созданию адаптивных дизайнов. У каждого элемента внутри Auto Layout-фрейма (и у самого фрейма) есть настройки поведения при изменении размеров.

Панель Auto layout Resizing в Figma

• Hug Contents (Обнять содержимое): Размер контейнера определяется размером его содержимого. Наша кнопка из примера выше использует именно это свойство — она «обнимает» текст и иконку, учитывая заданные отступы.
• Fill Container (Заполнить контейнер): Элемент растягивается на все доступное пространство родительского (внешнего) фрейма по горизонтали или вертикали. Это свойство незаменимо, когда нужно, чтобы один элемент (например, поле ввода в форме) занимал всю ширину, а другой (кнопка) оставался фиксированным.
• Fixed Size (Фиксированный размер): Вы жестко задаете ширину или высоту элемента. Он не будет ни сжиматься, ни растягиваться. Это полезно для аватарок, иконок или логотипов, которые всегда должны сохранять свои пропорции.

Погнали в Figma и закрепим все на практике:

• Собери компоненты: изображение (Fixed), название (Fill), описание (Fill) и кнопка (Hug).

Компоненты карточки

• Сгруппируй название и описание в вертикальный Auto Layout (Shift + A). Задай Spacing 12px.

Создание Auto layout для названия и описания

• Выдели эту группу, картинку и кнопку, и снова примени вертикальный Auto Layout. Задай Spacing 20px. Установи Padding 20px со всех сторон. И добавь заливку всей карточке

Создание карточки в Figma

• Теперь самое главное: для текстовых блоков и кнопки в настройках Resizing выбери Fill Container по горизонтали.

Применение Fill для текстов

• Попробуй изменить ширину всей карточки. Ты увидишь, как текст в карточке аккуратно переносится и вместе с кнопкой занимает все доступное ему пространство. Макет больше не «ломается».

Адаптивная карточка в Figma

Продвинутые техники и лайфхаки

Вложенность (Nesting)

Это прием, когда один Auto Layout-фрейм вкладывается в другой. Так создаются практически все сложные интерфейсы: шапка сайта (горизонтальный Auto Layout с логотипом, меню и блоком пользователя) или карточка профиля (вертикальный Auto Layout, в который вложен горизонтальный с именем и статусом «online»).

Вложенность в Auto Layout в Figma. Источник: Figma

Min и Max размеры

Дополнительные настройки, которые можно использовать одновременно с основными типами resizing. Они ограничивают минимальную и максимальную ширину или высоту элемента.

Например, возьмем кнопку с Hug contents, но с установленной минимальной шириной в 120px. Даже если текст короткий, кнопка не будет становиться меньше 120px. Точно так же эти ограничения работают и для максимального значения.

Минимальные и максимальные значения в Auto layout Источник: Figma

Абсолютное позиционирование (Ignore Auto layout)

Иногда нужно разместить элемент поверх Auto Layout, игнорируя его правила (например, иконку «X» для закрытия в углу модального окна или бейдж «New» на карточке товара). Для этого в Figma есть функция абсолютного позиционирования, которая «вынимает» объект из потока Auto Layout.

Абсолютное позиционирование в Auto layout Источник: Figma

Перенос строк (Wrap)

Функция позволяет элементам, которые не помещаются в одну строку, автоматически переноситься на следующую. Идеально подходит для создания сеток тегов, галерей фотографий или фильтров в интернет-магазине. Найти ее можно в настройках Auto Layout, кликнув на три точки.

Давай на практике рассмотрим, как работает функция Wrap:

• Создай несколько тегов-компонентов с помощью Auto Layout (текст + фон).

Создание тегов в Figma

• Объедини несколько тегов в один Auto Layout.

Создание Auto layout для тегов

• В настройках этого фрейма выбери Wrap.

Применение функции Wrap для тегов

• Задай вертикальный и горизонтальный Spacing внутри Auto layout.

Spacing между тегами 

• Теперь растягивай или сжимай фрейм — теги будут сами формировать новые строки, как будто это текст в абзаце.

Адаптивный список тегов в Figma

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

Это твой ключ к ускорению рабочего процесса в разы, созданию консистентных и предсказуемых макетов, и, что самое главное, — к разработке по-настоящему адаптивных дизайнов, которые отлично выглядят на любом устройстве.

Для более углубленного изучения и погружения в Auto layout советую посмотреть уроки бесплатного курса Figmaster, мы там подробно разбираем работу с этим функционалом в Figma.