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

Auto Layout в Figma — это система автоматического расположения элементов внутри фрейма. Вместо ручного перемещения каждого объекта при изменении контента, Auto Layout сам перестраивает компонент: кнопка растягивается под длину текста, карточки выравниваются в сетку, отступы сохраняются автоматически.

Это один из самых важных инструментов Figma для создания профессиональных, масштабируемых дизайн-систем.

Зачем нужен Auto Layout

Без Auto Layout: вы нарисовали кнопку, клиент попросил изменить текст с «Записаться» на «Записаться на бесплатный урок» — теперь вручную растягиваете кнопку, двигаете текст, пересчитываете отступы.

С Auto Layout: изменили текст — кнопка растянулась автоматически, отступы сохранились.

Это экономит часы при итерациях дизайна.

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

Выделите фрейм или группу объектов
В панели Design справа нажмите «+» рядом с надписью «Auto Layout» (или используйте Shift+A)
Настройте направление (горизонтальное или вертикальное), отступы и выравнивание

Основные параметры Auto Layout

Direction (направление):

Horizontal — элементы выстраиваются в ряд слева направо (flex-direction: row)
Vertical — элементы выстраиваются сверху вниз (flex-direction: column)
Wrap — перенос на новую строку при переполнении контейнера (flex-wrap: wrap). Незаменим для блоков тегов, галерей карточек, наборов фильтров — когда количество элементов заранее неизвестно.

Gap between items — расстояние между элементами. Аналог gap в CSS Flexbox. Можно задать числовое значение или выбрать режим Auto — тогда пространство распределяется равномерно между элементами, как justify-content: space-between.

Padding — внутренние отступы. Настраивается индивидуально: сверху, снизу, слева, справа. Работает по модели box-sizing: border-box.

Align items — выравнивание. По главной и поперечной оси — как justify-content и align-items в CSS.

Sizing (размер):

Fixed — фиксированный размер, не меняется
Hug contents — размер по содержимому (как width: fit-content)
Fill container — растягивается на всю доступную ширину (как flex: 1)

Вложенные Auto Layout

Настоящая сила Auto Layout — в вложенности. Карточка с Auto Layout содержит в себе секцию изображения (тоже Auto Layout) и текстовую секцию (тоже Auto Layout).

Пример: компонент карточки продукта:

Карточка (Vertical Auto Layout)
  ├── Изображение (Fixed height)
  └── Контент (Vertical Auto Layout, Hug)
        ├── Заголовок (Text, Hug)
        ├── Описание (Text, Fill)
        └── Кнопка (Horizontal Auto Layout, Hug)

При изменении текста описания — высота карточки автоматически подстроится. При добавлении кнопки — остальные элементы сдвинутся.

Absolute position внутри Auto Layout

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

Решение: выделите дочерний элемент внутри Auto Layout фрейма → в правой панели нажмите иконку «Absolute position». Элемент перестаёт занимать место в потоке, но остаётся внутри родительского фрейма — ведёт себя как position: absolute в CSS.

Типичное применение:

Бейдж с числом уведомлений поверх иконки
Декоративный элемент, не влияющий на высоту карточки
Иконка «новинка» в углу компонента

Абсолютно позиционированный элемент управляется Constraints (закрепление сторон), а не настройками Auto Layout потока.

Auto Layout и адаптивность

С Figma 2024+ Auto Layout поддерживает Min/Max width — это позволяет делать поистине адаптивные компоненты прямо в Figma без ручного создания десктопных и мобильных версий.

Настройка: выберите элемент → в панели Auto Layout → Width → Min width/Max width.

Компонент с Fill container + Min-width: 320px + Max-width: 800px будет вести себя как CSS:

width: 100%;
min-width: 320px;
max-width: 800px;

Auto Layout и CSS Flexbox: полная таблица соответствий

Auto Layout — это визуальная реализация CSS Flexbox. Зная одно, вы уже понимаете логику другого.

Figma Auto Layout	CSS Flexbox
Direction: Horizontal	`flex-direction: row`
Direction: Vertical	`flex-direction: column`
Direction: Wrap	`flex-wrap: wrap`
Gap between items	`gap`
Spacing mode: Auto	`justify-content: space-between`
Padding	`padding`
Hug contents	`width: fit-content`
Fill container	`flex: 1` / `width: 100%`
Fixed width	`width: Npx`
Min width / Max width	`min-width` / `max-width`
Align: Start	`align-items: flex-start`
Align: Center	`align-items: center`
Align: End	`align-items: flex-end`
Absolute position	`position: absolute`

Разработчику достаточно открыть Figma-инспектор — все значения переносятся в CSS напрямую без пересчёта.

Официальная документация Figma по CSS-соответствиям: Use auto layout with CSS Flexbox in mind

Как Auto Layout помогает при переносе в Taptop

Когда макет из Figma с Auto Layout переносится в Taptop:

Gap между элементами → gap в авто-лейауте Taptop
Padding → padding элемента
Fill container → width: 100%
Wrap → включить перенос строк в контейнере

Это позволяет переносить значения напрямую из Figma-инспектора в числовые поля Taptop без пересчёта.

Итог

Автолейаут — обязательный инструмент для профессиональной работы в Figma. Он ускоряет итерации, обеспечивает последовательность в дизайн-системе и напрямую отражает логику CSS Flexbox — что упрощает перенос в разработку.

Освоение Auto Layout — несколько часов практики. Возврат — сотни сэкономленных часов в дальнейших проектах.

FAQ

Вопрос: Что такое Auto Layout в Figma?
Ответ: Auto Layout — функция Figma, которая делает фреймы адаптивными: элементы автоматически выстраиваются в ряд или колонку, отступы пересчитываются при изменении контента. Это основа создания компонентов, которые корректно масштабируются.

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

Вопрос: Чем Auto Layout похож на Flexbox в CSS?
Ответ: Auto Layout — визуальный аналог CSS Flexbox: тот же выбор направления (row/column), выравнивание (align-items, justify-content), отступы (gap, padding). Зная Auto Layout, легче понимать вёрстку — и наоборот.

Вопрос: Auto Layout и Taptop совместимы?
Ответ: Да. Макеты из Figma с Auto Layout корректно воспроизводятся при переносе в Taptop: числовые значения отступов и размеров соответствуют. Taptop использует собственную систему адаптивности через брейкпоинты, которая дополняет логику Auto Layout.

Вопрос: Как сделать перенос элементов на новую строку в Auto Layout?
Ответ: Используйте режим Wrap в параметре Direction. Выделите Auto Layout фрейм → Direction → Wrap. Элементы будут автоматически переноситься на новую строку при нехватке места — как flex-wrap: wrap в CSS. Это незаменимо для блоков тегов, галерей карточек и наборов кнопок с переменным количеством элементов.

Вопрос: Как убрать Auto Layout с фрейма?
Ответ: В панели Design справа найдите блок Auto Layout → нажмите «–» или правой кнопкой по фрейму выберите «Remove auto layout». Элементы останутся на месте, но перестанут управляться автоматически.