Auto Layout в Figma: полный гайд по адаптивным компонентам

Короткий ответ

Auto Layout — это система раскладки внутри фрейма: она задаёт направление элементов, отступы, выравнивание и правила изменения размеров. В 2026 году в Figma доступны вертикальный, горизонтальный и Grid-потоки, перенос Wrap, режимы Hug contents / Fill container / Fixed, min/max-ограничения и Suggest auto layout. Базовая горячая клавиша для добавления Auto Layout — Shift + A .

Ниже разберём Auto Layout как рабочий инструмент для адаптивных компонентов: от кнопки и карточки до сложного блока с вложенными контейнерами. Общий обзор редактора здесь не повторяем — он уже есть в материале «Что такое Figma и зачем она нужна дизайнерам».

Что такое Auto Layout в Figma

Auto Layout — свойство фрейма, которое управляет расположением его дочерних объектов. Вместо координат «этот слой стоит на X = 128, а следующий на Y = 64» вы задаёте правило: элементы идут в строку или столбец, между ними 16 px, внутри контейнера 24 px, текстовый блок занимает доступную ширину, а кнопка остаётся по размеру надписи.

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

Важно

Auto Layout не равен «готовому адаптиву сайта». Он делает отдельные компоненты и группы гибкими, но дизайнеру всё равно нужно решить, как меняется композиция на ключевых ширинах: где строка превращается в колонку, что скрывается, что переносится и как меняется приоритет контента.

Что меняется после включения Auto Layout

• дочерние элементы выстраиваются по выбранному потоку;
• Gap отвечает за расстояние между соседними объектами;
• Padding — за внутренние поля от границы родителя;
• Alignment управляет выравниванием внутри контейнера;
• режимы размера определяют, кто подстраивается под контент, а кто растягивается;
• при добавлении, удалении или изменении слоя соседние элементы перестраиваются автоматически.

Auto Layout, Frame и Group — не одно и то же

Group просто объединяет несколько слоёв для удобного перемещения и выбора. Frame — полноценный контейнер со своим размером, обрезкой, заливкой, Constraints и другими свойствами. Auto Layout добавляет фрейму правила раскладки дочерних объектов. Поэтому команда Shift + A не просто «объединяет объекты», а создаёт контейнер с поведением.

Если нужно только временно сгруппировать слои, Auto Layout может быть лишним. Если элементы должны сохранять отступы, менять размер или перестраиваться при изменении контента — лучше сразу работать через frame и Auto Layout.

Когда Auto Layout действительно нужен

Хорошая проверка простая: представьте, что в элементе изменился текст, появился новый дочерний объект или родитель стал уже на 30%. Если после этого вы ожидаете предсказуемую перестройку — Auto Layout почти наверняка уместен.

А вот декоративный объект, который должен лежать в конкретной точке поверх карточки, не обязательно включать в поток. Для таких случаев есть Ignore auto layout.

Как включить и убрать Auto Layout

Выделите фрейм, компонент или несколько слоёв и используйте любой из трёх способов:

1. нажмите Shift + A;
2. в правой панели выберите Add auto layout;
3. в контекстном меню выберите Add auto layout.

Если выделены отдельные слои или группа, Figma создаст вокруг них Auto Layout-фрейм. Сама функция работает на фреймах — это полезно понимать, когда в Layers появляется дополнительный уровень вложенности.

Как убрать Auto Layout

На Mac используйте Option + Shift + A, на Windows — Alt + Shift + A. Также Auto Layout можно отключить через правую панель или контекстное меню. Для сложной вложенной структуры у Figma есть команда Remove all auto layout в дополнительных параметрах раскладки.

Suggest auto layout: когда можно доверить структуру Figma

Suggest auto layout пытается распознать структуру готового фрейма и сразу создать нужные вложенные Auto Layout-контейнеры. Это удобно для карточек, навигации и экранов средней сложности. Для большого сайта лучше запускать Suggest по частям: сначала на локальных блоках, затем на более крупном родителе.

Комбинация для Suggest auto layout: Control + Shift + A на Mac; Ctrl + Alt + Shift + A на Windows. После применения всё равно проверьте направление потока, вложенность и режимы размера — автоматическая структура не обязана совпасть с вашей логикой.

Vertical, Horizontal, Wrap и Grid: какой поток выбрать

В актуальной версии Figma у Auto Layout есть три основных потока: Vertical, Horizontal и Grid. Для вертикального и горизонтального потока можно дополнительно включить Wrap.

Vertical

Элементы идут сверху вниз по оси Y. Подходит для форм, списков, текстовых секций, карточек, пунктов меню и большинства контентных блоков.

Horizontal

Элементы идут слева направо по оси X. Типичные примеры: ряд кнопок, тегов, иконок, аватаров или пунктов навигации.

Wrap

Если места не хватает, дочерние элементы переходят на новую строку или колонку. Горизонтальный Wrap удобно использовать для тегов и карточек. Вертикальный Wrap может собирать многострочные списки фиксированной высоты, но это не masonry: Figma сохраняет порядок и переносит объект только после заполнения доступной высоты колонки.

Grid

Grid раскладывает объекты по строкам и колонкам. В отличие от Wrap, элементы не просто «переезжают на следующую строку», а занимают ячейки сетки и могут растягиваться на несколько строк или колонок. Это полезно для галерей, bento-композиций и дашбордов.

Gap, Padding и Alignment: как управлять расстояниями

Auto Layout начинает экономить время не из-за самой кнопки Shift + A, а когда отступы становятся правилом, а не случайным набором координат.

Padding — внутренние поля

Padding — расстояние от границы родительского Auto Layout-фрейма до содержимого. Можно задать одно значение для всех сторон, отдельно вертикальные и горизонтальные поля или четыре независимых значения.

Gap — расстояние между дочерними объектами

Gap задаёт интервал между элементами. В вертикальном и горизонтальном потоке вместо фиксированного числа можно использовать Auto spacing и распределение Between, Around или Evenly. Это удобно, когда свободное место должно распределяться автоматически.

Как посмотреть расстояние между объектами в Figma

Чтобы быстро измерить расстояние между двумя слоями, выделите первый объект, удерживайте Option на Mac или Alt на Windows и наведите курсор на второй. Figma покажет измерительные линии и значения. Для вложенных слоёв используется Command + Option на Mac или Ctrl + Alt на Windows. Внутри Auto Layout при этом лучше ориентироваться прежде всего на значение Gap: оно и есть правило расстояния между соседними элементами.

Alignment — выравнивание внутри контейнера

Alignment определяет положение объектов относительно поперечной и основной оси. Для простого интерфейса чаще всего достаточно start, center и end, но важно проверять не только геометрию, а визуальный баланс: иконка-треугольник, например, может казаться смещённой даже при математическом центре.

Hug contents, Fill container и Fixed: главное про адаптивность

Здесь чаще всего возникает путаница. Удобно думать не «какой режим правильный», а кто определяет размер элемента.

Hug contents

Фрейм берёт минимальный размер, достаточный для дочерних объектов с учётом Padding и Gap. Поэтому кнопка на Hug становится шире вместе с текстом и сжимается, когда подпись короткая.

Fill container

Дочерний объект занимает доступное место внутри родительского Auto Layout-фрейма. Например, в строке «иконка + текст» иконка может быть Fixed, а текст — Fill container: при сужении карточки именно текстовая зона будет адаптироваться и переносить строки.

Fixed

Ширина или высота остаётся заданной. Это полезно для элементов, у которых размер — часть интерфейсного правила: иконок, аватаров, маркеров, отдельных медиа-блоков.

Минимальные и максимальные размеры

Min width / Max width и Min height / Max height работают как ограничители вместе с основным режимом. Например, кнопка может быть Hug contents, но иметь Min width = 120 px: короткая надпись не уменьшит её сильнее, а длинная сможет расширить.

Нюанс

Если дочерний объект на определённой оси настроен как Fill container, родитель не может бесконечно «обнимать» его по той же оси. Figma разрешает этот конфликт в пользу фиксированного размера родителя. Если Hug неожиданно пропал — проверьте режимы дочерних слоёв.

Практика: адаптивная кнопка за несколько шагов

1. Создайте текстовый слой с подписью кнопки.
2. Нажмите Shift + A. Figma создаст Auto Layout-фрейм.
3. Оставьте направление Horizontal.
4. Задайте Padding, например 12 px по вертикали и 20 px по горизонтали.
5. Для ширины и высоты контейнера используйте Hug contents.
6. Добавьте Fill, радиус, при необходимости иконку и Gap между иконкой и текстом.
7. Проверьте кнопку на короткой и длинной подписи.

Если все настройки сделаны правильно, вам не придётся вручную менять фон после замены «Ок» на «Добавить в корзину». Это маленький пример, но та же логика работает на более крупных компонентах.

Вложенный Auto Layout: как собирать карточки и сложные компоненты

Сложный интерфейс редко удаётся описать одним потоком. Карточке может понадобиться вертикальный родитель, внутри — горизонтальная строка с ценой и бейджем, отдельный вертикальный текстовый блок и ещё одна строка с кнопками. Поэтому главный навык — не «включить автолейаут», а разбить компонент на логические контейнеры.

Карточка — Vertical Auto Layout
├── Изображение — Fixed / Fill по ширине
├── Текстовый блок — Vertical Auto Layout
│   ├── Заголовок — Fill container
│   └── Описание — Fill container
└── Действия — Horizontal Auto Layout
    ├── Основная кнопка — Fill container
    └── Иконка — Fixed

Каждый уровень получает собственные Gap и Padding. Именно вложенность позволяет совмещать разные направления и делать многомерную структуру — это отдельно отмечено в актуальной документации Figma.

Пошаговая сборка адаптивной карточки

1. Соберите изображение и текстовый блок отдельно.
2. Для заголовка и описания создайте вертикальный Auto Layout с небольшим Gap.
3. Текстовым слоям, которые должны переноситься при сужении, задайте Fill container по ширине.
4. Объедините медиа и текстовый блок в родительский Auto Layout.
5. Задайте Padding карточки и Gap между секциями.
6. Решите, какой блок растёт, а какой сохраняет размер. Не ставьте Fill всем подряд.
7. Добавьте Min/Max, если компонент должен оставаться удобным в заданном диапазоне.
8. Сожмите и растяните карточку на холсте: тест важнее красивого состояния в одной ширине.

Как сделать компонент действительно адаптивным

Адаптивность проверяется не наличием значка Auto Layout в Layers, а поведением при стресс-тесте. Уберите половину текста, затем удвойте его; добавьте ещё один тег; уменьшите ширину фрейма; переключите язык на вариант с более длинными словами.

• контент не выходит за границы;
• отступы остаются системными;
• важные элементы не становятся слишком узкими;
• текст переносится там, где это ожидается;
• иконки и изображения не растягиваются случайно;
• кнопки сохраняют удобный размер;
• порядок чтения остаётся понятным.

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

Если вы собираете не отдельный компонент, а целую страницу, полезно дополнительно проверить иерархию блоков и мобильный сценарий. Для этого используйте наш разбор «Структура продающего лендинга: 10 блоков, порядок и примеры».

Ignore auto layout: когда элемент должен выйти из потока

Ignore auto layout — актуальное название функции, которую раньше часто называли Absolute position. Такой объект остаётся внутри Auto Layout-фрейма, но перестаёт влиять на поток и соседние элементы.

Типичные случаи:

• крестик закрытия в углу карточки;
• бейдж «New» поверх изображения;
• декоративная форма, которая не должна раздвигать контент;
• иконка поверх медиа-блока.

Для объекта, который игнорирует Auto Layout, снова становятся актуальны Constraints: они определяют, к какой стороне родителя он привязан при изменении размера. Это одна из ситуаций, где Auto Layout и Constraints не конкурируют, а работают вместе.

Auto Layout и Constraints: в чём разница

Для дочерних объектов обычного Auto Layout-фрейма поведение обычно задаётся через resizing, а не Constraints. Constraints пригодятся самому Auto Layout-фрейму, если он вложен в обычный frame, и объектам, которые исключены из потока.

Если задача уже касается кликов, overlay, scroll, Smart Animate и переходов между экранами, это другой интент. Его подробно разбираем в статье «Интерактивный прототип в Figma: переходы, оверлеи и анимация».

Auto Layout в компонентах и дизайн-системах

Компонент без гибкой внутренней структуры быстро превращается в набор исключений: одна кнопка для короткой подписи, другая для длинной, отдельная карточка для двух строк и ещё одна для трёх. Auto Layout позволяет задать правила один раз и проверять их в разных экземплярах.

В main component можно менять структуру, добавлять и переставлять слои. В instance разрешены многие локальные настройки, включая Padding и Gap, но нельзя свободно перестраивать исходную структуру так же, как в мастер-компоненте. Поэтому архитектуру лучше продумать до массового размножения экземпляров.

Практический принцип

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

Как Auto Layout соотносится с CSS

Точное соответствие между Figma и CSS не всегда один к одному, но аналогия помогает дизайнеру говорить с фронтендером на одном языке. Особенно это заметно в Flexbox.

Для разработчиков полезны справки MDN по Flexbox и MDN по CSS Grid. Но не стоит проектировать интерфейс как буквальную копию CSS-свойств: Figma моделирует визуальное поведение, а браузер реализует финальную вёрстку со своими ограничениями.

Частые ошибки с Auto Layout и как их исправить

Горячие клавиши Auto Layout

Комбинации интерфейса могут меняться вместе с обновлениями продукта, поэтому для редких шорткатов лучше сверяться с официальной документацией Figma.

Чек-лист: готов ли Auto Layout-компонент

• Текст в 2–3 раза длиннее не ломает структуру.
• Короткий текст не создаёт странные пустоты.
• Gap и Padding заданы системно, а не через случайные координаты.
• Каждому важному слою осознанно выбран Hug, Fill или Fixed.
• Min/Max используются там, где элемент не должен сжиматься или расти бесконечно.
• Декоративные и overlay-элементы не раздвигают поток.
• Компонент проверен на узкой и широкой ширине.
• Для строк с множеством элементов протестирован Wrap или Grid.
• Вложенность читается в Layers и не превращена в десятки бессмысленных фреймов.
• Поведение можно объяснить разработчику без фразы «ну тут надо примерно как на макете».

Как быстрее освоить Auto Layout на практике

Самый быстрый путь — не пытаться сразу «перевести на Auto Layout» большой лендинг. Возьмите четыре маленьких задачи: кнопку, поле ввода, карточку и блок из нескольких карточек. Для каждой проверьте три состояния: короткий контент, длинный контент и узкий контейнер. Так быстрее становится понятно, где нужен Hug, где Fill, а где вложенный фрейм.

Если хочется связать работу в Figma с UX-логикой, компонентами, дизайн-системой и реальными интерфейсами, посмотрите программу курса UX/UI-дизайнера Yudaev School. А для знакомства с форматом школы есть бесплатный курс по дизайну с наставником.

Авторитетные источники и полезные материалы

• Figma Learn — Guide to auto layout
• Figma Learn — Toggle on auto layout in designs
• Figma Learn — практический проект с адаптивной карточкой
• MDN — CSS Flexible Box Layout
• MDN — CSS Grid Layout