Хотите собирать аккуратные интерфейсы быстрее и без микроручной работы? Auto Layout в Figma превращает любой frame во «внимательный» контейнер: элементы сами держат отступы, растягиваются и выравниваются. Ниже — пошаговый урок: как сделать автолейаут в Фигме, какие параметры действительно важны и как применять функцию на реальных примерах.
Что такое Auto Layout и зачем он нужен
Auto Layout — это режим для фреймов (frame), в котором Figma автоматически располагает дочерние объекты в строку или столбец, учитывая заданные отступы и правила выравнивания. Такой контейнер «понимает» размеры содержимого и адаптируется: кнопка расширится под длинный текст, карточка сохранит внутренние поля, а список будет корректно обновляться при добавлении элементов. Результат — живой макет, который проще поддерживать и использовать в дизайн‑системе.
Главная выгода — экономия времени и предсказуемость. Вы настраиваете поведение один раз, затем меняете текст или структуру, а инструмент сам пересобирает композицию. Это особенно заметно в продуктовой разработке и при регулярных итерациях интерфейса.
Auto Layout нужен, когда важна повторяемость и масштабируемость: кнопки, карточки, панели, списки и целые экраны ведут себя стабильно при изменениях.
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Как активировать Auto Layout: способы и горячие клавиши
Существует несколько способов включить автолейаут в фигме. Самый быстрый — выделить фрейм или группу и нажать Shift + A. Альтернативы: команда Add auto layout в контекстном меню или кнопка на панели свойств справа. Если нужно вернуться к обычному фрейму, используйте Remove auto layout — объект снова станет статическим контейнером. Удаление режима не трогает сами элементы: вы просто отменяете автоматическое поведение.
Запомните: Shift + A — для включения; Remove auto layout — для обратного преобразования. Это быстрее, чем вручную двигать элементы.
Основные параметры Auto Layout и их значение
Направление. Контейнер располагает элементы по горизонтали (row) или вертикали (column). Направление задаёт логику протекания интерфейса: горизонтальные панели навигации, вертикальные списки, комбинированные карточки.
Spacing между элементами. Интервал между соседними объектами. Его удобно менять интерактивно: ввод значений или перетаскивание маркера. Равномерный spacing упрощает визуальный ритм и снижает количество ручных выравниваний.
Внутренние отступы (padding). Поля контейнера сверху/снизу/слева/справа. С симметричными значениями элементы «дышат», а с асимметрией можно подчеркнуть визуальную иерархию.
Выравнивание содержимого. Центр, края, распределение по оси — задаёт, где именно окажутся элементы внутри frame при изменении размеров. Это ключ к стабильному поведению при адаптации.
Режимы размеров. Для контейнера и для дочерних элементов важно выбрать поведение по ширине/высоте: Hug (подстраиваться под содержимое), Fixed (фиксированный размер) или Fill (растягиваться, заполняя доступное пространство). Комбинация режимов формирует предсказуемый результат.
Игнорирование автолейаута. Иногда отдельный объект внутри нужно вывести из потока — например, бейдж поверх карточки. Для этого включают абсолютное позиционирование: элемент фиксируется относительно контейнера, а остальная верстка течёт дальше.
Абсолютное позиционирование внутри Auto Layout. Разрешает разместить объект поверх или в углу без влияния на расчёт отступов и spacing. Главное — не злоупотреблять: много абсолютных объектов усложняют поддержку макета.
Комбинируйте направление, spacing, padding и режимы размеров. Абсолютное позиционирование используйте точечно — для бейджей, иконок и оверлеев.
Примеры: кнопка, карточка, список
Кнопка. Создайте текстовый объект и поместите его во фрейм с Auto Layout. Задайте горизонтальные и вертикальные отступы — например, 12 и 8 pt. Выберите Hug по ширине, чтобы кнопка расширялась под текст, и Fixed по высоте для стабильности. Добавьте заливку, радиус, состояние при наведении. Так вы получите компонент, который корректно реагирует на длинные надписи.
Карточка. Поместите изображение сверху, ниже — заголовок и цену в вертикальный Auto Layout. Установите одинаковый spacing, а для текста примените Hug по высоте. Внутренние отступы карточки держите равномерными: так дизайн останется чистым даже при изменении описания. Бейдж «New» можно закрепить абсолютным позиционированием в углу контейнера.
Список. Создайте один элемент списка как Auto Layout‑строку: иконка + текст. Затем оберните повторяющиеся строки во внешний вертикальный Auto Layout. Внутри строк используйте Fill для текстовых блоков, чтобы они занимали доступное пространство. Для длинных списков полезны компонентные стили и вариации.
Стройте компонент изнутри наружу: сначала элемент (кнопка/строка), затем карточка, потом список. Меньше ручной работы — выше стабильность.
Вложенные Auto Layout: сложные макеты
Объединяйте несколько Auto Layout внутри одного фрейма, чтобы собрать сложный интерфейс: шапка (горизонталь) + контентная колонка (вертикаль) + боковая панель (вертикаль). Каждый контейнер управляет своими отступами и выравниванием, а внешний frame отвечает за общую композицию.
Пример макета: верхняя панель с логотипом и кнопками, под ней — две колонки: контентная область с карточками и узкая панель фильтров. Контентная колонка — вертикальный Auto Layout, внутри — сетка карточек, каждая карточка — собственный Auto Layout. Такой подход масштабируется без «рассыпания» интерфейса.
Производительность. Чем меньше вложенность и количество эффектов (тени, блюр), тем быстрее отклик. Группируйте логично, переиспользуйте компоненты, избегайте избыточных слоёв и абсолютных объектов без необходимости.
Вложенность должна быть осмысленной: каждый уровень решает свою задачу. Сокращайте глубину, если контейнер не добавляет ценности.
Ограничения, нюансы и лайфхаки
Смешанные режимы размеров требуют внимания. Если контейнер Fill, а вложенный элемент тоже Fill, возможны конфликты. Следите за приоритетом: кто должен растягиваться, а кто — подстраиваться.
Перекрёстные оси. Иногда визуально хочется центрировать по одной оси и распределять по другой — проверьте настройки Align и Distribute в панели. Хорошее выравнивание экономит десятки мелких правок.
Компоненты и вариации. Делайте базовые элементы (кнопка, карточка, строка) компонентами. Варианты для состояний и размеров избавят от дублирования и ошибок.
Текстовые блоки. Для длинных заголовков выбирайте Hug по высоте и разумную ширину контейнера. Так переносы не ломают ритм, а дизайн сохраняет аккуратность.
Совместная работа. Подписи слоёв, описания и единые токены отступов в дизайн‑системе ускоряют команду и уменьшают расхождения в макетах.
Планируйте режимы размеров, выравнивание и имена слоёв заранее. Меньше ручных фиксов — чище результат.
Когда применять Auto Layout и чем он полезен
Auto Layout — базовый инструмент Figma для адаптивных интерфейсов. Используйте его везде, где есть повторяемые элементы: кнопки, карточки, панели, списки. Сильные стороны: предсказуемость, скорость, поддерживаемость дизайн‑системы. Ограничения: чрезмерная глубина вложенности и злоупотребление абсолютным позиционированием. Комбинируйте режимы размеров и выравнивания, а для сложных случаев — стройте макет из компонентных блоков.
Чек‑лист действий
| Шаг | Что сделать в Figma | Ожидаемый результат |
| 1 | Выделить объект и нажать Shift + A (или Add auto layout на панели). | Фрейм становится контейнером с Auto Layout. |
| 2 | Задать направление, spacing и padding. | Стабильные отступы и ровный ритм элементов. |
| 3 | Настроить режимы размеров (Hug/Fixed/Fill) для контейнера и детей. | Элементы корректно растягиваются или подстраиваются. |
| 4 | Выбрать выравнивание содержимого. | Прогнозируемое поведение при изменении размеров. |
| 5 | Точечно применять абсолютное позиционирование, где нужно. | Бейджи/иконки фиксированы, поток не ломается. |
| 6 | Собрать примеры: кнопку, карточку, список; оформить компонентами. | Переиспользуемые, адаптивные блоки в дизайн‑системе. |
- Освой Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Расскажем, как получить подписку (240$) бесплатно
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
