Гайд по автолейаутам в Фигме
Пошагаво разбираем все функции autolayout. Пробуем сделать кнопку, карточку товара, форму регистрации и целую веб-страницу с помощью автолейаутов.
20 июня 2025
5 минут
Из статьи вы узнаете:
Что такое автолейаут
Это инструмент, который сам выстраивает элементы внутри блока по заданным правилам. Если что-то поменяется, например длина текста или ширина изображения, автолейаут сам всё аккуратно выровняет, настроит отступы и расположит в нужном месте.
Вместо фиксированных значений вы задаёте правила: отступы, выравнивание, относительные размеры.
Например:
- заголовок всегда прижат к верху экрана,
- текст растягивается по ширине блока,
- расстояние между пунктами списка должно быть одинаковым,
- если экран узкий, карточки товаров встают друг за другом,
- все иллюстрации должны выстраиваться в две ровные колонки.
Гид по Фигме для начинающих веб-дизайнеров
В этой статье рассмотрим инструменты и возможности Фигмы, популярные плагины и расскажем, где научиться работать с сервисом бесплатно.
Как сделать автолейаут в Фигме
Горячие клавиши:
- Shift + A — создать автолейаут;
- Shift + Alt/Option + A — превратить во фрейм;
- Ctrl/Cmd + Shift + G — убрать автолейаут;
- Ctrl/Cmd + D — клонировать автолейаут.
Для создания автолейаута нужно несколько объектов — минимум два. Например, это могут быть:
- фрейм + фрейм;
- фрейм + текст;
- объект + объект.
Нужная кнопка расположена в верхнем правом углу.
Теперь вы можете проверить, что автолейаут добавлен. В панели слоёв появится соответствующая иконка, а фреймы будут объединены.
Панель слоёв расположена слева.
Если у вас есть фрейм, внутри которого уже лежит объект, вы можете применить автолейаут к нему. Дальше вы можете не беспокоиться о ширине фрейма, а настроить автоматические отступы.
Если изменить размер зелёного прямоугольника, то ширина и высота фрейма автоматически подстроятся.
Свойства автолейаута
По порядку разберём основные настройки и посмотрим на примерах, насколько они адаптивны. Эти настройки появляются на правой панели — при клике на элемент, к которому применён автолейаут.
Flow
Это возможность задать правила поведения элементов в том случае, если они не помещаются в заданный размер фрейма. Функция позволяет выбрать, как объекты будут располагаться при переполнении: свободно, вертикально, горизонтально или по сетке.
1
Свободно (freeform) — элементы можно перемещать внутри фрейма как угодно. Другими словами, эта функция убирает применение автолейаута.
Объекты можно располагать свободно внутри фрейма.
2
Вертикально (vertical) — элементы располагаются друг под другом.
Объекты автоматически выстраиваются в столбик.
3
Горизонтально (horizontal) — объекты равняются по ширине. В этом режиме появляется дополнительная настройка переноса (wrap). Она определяет, будут ли элементы при переполнении пропадать за границами фрейма, или же они будут переходить на новую строку.
Горизонтальное расположение с выключенным переносом.
Горизонтальное расположение с включенным переносом.
4
По сетке (grid) — новая функция, которая позволяет автоматически располагать элементы по сетке. Появляется дополнительный раздел grid, в котором можно настроить сетку.
При изменении сетки элементы подстраиваются под неё.
Resizing
Здесь есть параметры W (width) и H (height). Они регулируют ширину и высоту всего блока, к которому применён автолейаут.
Можно задать два варианта:
- фиксированный размер (fixed) — ширина и высота не будут меняться в зависимости от остальных настроек и размеров элементов внутри;
- подстраивание под контент (hug) — ширина и высота будут меняться в зависимости от настроенных отступов и размеров элементов внутри.
Подстраивание под контент (hug): при изменении расстояния между квадратами фрейм увеличивается или уменьшается.
Gap
Задаёт расстояние между объектами внутри автолейаута. Можно настроить горизонтальный и вертикальный отступ между элементами.
Вертикальное и горизонтальное расстояние между квадратами внутри автолейаута — 40 пикселей.
- Илья Поликарповавтор статьиАвтолейаут — то, что упрощает нам жизнь. У меня есть собственный курс «Фигма для редакторов». В уроке по созданию статьи я настоятельно рекомендую использовать автолейаут для всего.
Ученики начинают применять функцию повсеместно и не могут нарадоваться, насколько сильно это упрощает жизнь. Например, один из учеников делал презентацию и каждый слайд старался сделать на автолейауте, чтобы постоянно руками не менять отступы и расстояния. Один раз попробовав — после ты уже не сможешь отказаться от этой прикормки. Потом только изучай компоненты и варианты, чтобы быть фигмабоссом :)
Alignment
Выравнивает объекты внутри автолейаута: по левому или правому краю, по центру, по верхней или нижней границе. Функция доступна, когда включено горизонтальное или вертикальное расположение объектов (flow).
Если выбран перенос (hug), alignment позволит выбрать, как располагать неодинаковое количество элементов. Например, здесь фиолетовый квадрат стоит по центру, но можно приклеить его к правой или левой стороне.
Padding
Позволяет настроить отступы от границ блока. Здесь можно задать индивидуальные расстояния для каждой стороны. Затем вы сможете добавлять новые элементы внутрь фрейма — они сразу будут вставать с соблюдением настроенных отступов.
Дополнительные настройки
Для автолейаутов предусмотрено несколько дополнительных функций. Рассмотрим каждую из них.
Дополнения можно открыть, кликнув на кнопку «Auto layout settings».
1
Strokes — обводка блока. Можно выбрать внутреннюю или внешнюю.
Так выглядит блок с включением и выключением обводки.
2
Canvas stacking — определяет, как накладывать элементы друг на друга при отрицательном отступе (gap). Можно выбрать, какой объект должен лежать сверху: первый или последний.
Настройка недоступна при расположении по сетке (grid).
3
Align text baseline — выравнивание текста по базовой линии. Настройка недоступна при расположении по сетке (grid).
Настройка недоступна при расположении по сетке (grid).
Если функция включена, текстовые блоки будут вставать ровно по строке.
Практические примеры
Настройки, свойства, паддинги… Всё это сложно запомнить без практических примеров. Давайте посмотрим, как автолейаут облегчает жизнь при реальной работе в Figma. Попробуем сделать кнопку, карточку товара и форму регистрации на сайте.
Кнопка
Создадим кнопку из фрейма и текста. Обычно дизайнер вручную подстраивает ширину фрейма под размер надписи. Но что, если текст станет длиннее? Придётся снова менять ширину фрейма. Если таких кнопок в интерфейсе много, это может занять достаточно много времени.
Разная длина текста во фрейме: ширину второй кнопки придётся настраивать вручную.
Теперь автоматизируем работу:
- Применим к фрейму автолейаут (Shift+A).
- Выберем hug, чтобы ширина кнопки адаптировалась под длину текста.
- Настроим отступы от границ блока, чтобы текст не прилипал к краям фрейма.
Кнопка с настроенным автолейаутом: её ширина автоматически подстраивается под размер текста.
Карточка товара
Это элемент, который используется в первую очередь для интернет-магазинов. Поэтому таких карточек может быть сотни и даже тысячи. Внутри каждой из них — заголовки и описания разной длины, а также фотографии разных размеров.
С помощью автолейаутов можно просто добавлять новые тексты и изображения, а всё остальное подстроится самостоятельно.
Карточка без настроенного автолейаута с небольшим количеством текста.
Если увеличить размер текста, карточка развалится.
Внутри карточки нужны разные расстояния. Между заголовком и описанием — одно, от текста до картинки — другое. Мы будем использовать несколько слоёв автолейаутов, чтобы настроить автоматические отступы внутри разных групп.
1
Сначала делаем автолейаут для заголовка и описания, чтобы высота автоматически подстраивалась под текст разной длины. Выбираем вертикальное расположение элементов (flow) и отступ (gap) в 12 пикселей.
2
Теперь добавим автолейаут для картинки и текста, чтобы шаблон автоматически подстраивался под фотографии разного размера. Настроим отступы от границ блока и зальём белым цветом.
Теперь можно менять картинку и вставлять текст разной длины. Фигма автоматически подстроит высоту карточки.
Добавляем одну новую строку, но карточка не разваливается.
Форма на сайте
Обычно форма — это одинаковые по структуре блоки и кнопка. Но если вы захотите поменять ширину фрейма, то поле не будет автоматически растягиваться. Да ещё и расстояния между полями могут сломаться.
Форма без автолейаута: поля не растягиваются, ничто не автоматизировано.
Теперь используем все полученные знания и создадим форму из трёх стандартных полей.
1
Добавим название поля и фрейм–инпут (поле для ввода).
Текст и фрейм–инпут.
2
Применим автолейаут c горизонтальным расположением элементов (flow). Для текста установим фиксированную ширину, чтобы выровнять все поля относительно друг друга. Для инпута сделаем ширину «fill»: если вы будете растягивать блок, ширина поля для ввода будет адаптироваться под размер контейнера.
3
Добавим ещё два таких же поля: с фамилией и почтой.
4
Теперь объединим поля и применим автолейаут. Ширину поставим «fill», чтобы можно было тянуть общий контейнер, а поля бы сами адаптировались под него.
Форма готова. Теперь вы можете быстро сделать сколько угодно таких полей. Под ними можно расположить кнопку регистрации, которую сделали в уроке выше.
«Резиновый» макет с помощью автолейаута
Автолейауты позволяют делать целые страницы сайтов с автоматическими отступами. Для начала вы настраиваете расстояния для заголовка и описания. Потом добавляете отступ от картинки, затем от кнопки, от всего блока и так далее. В итоге у вас получается полноценный макет в Фигме, который полностью автоматизирован.
На этапе вёрстки удобно, когда контент автоматически подстраивается под ширину разных устройств. Это называется адаптивной вёрсткой. Для неё нам нужно создать «резиновый» макет.
Для примера возьмём нашу карточку товара, сделаем две похожие и попробуем привязать их к модульной сетке. Тогда они будут адаптироваться под ширину фрейма.
1
Создадим фрейм и добавим к нему 12 колонок.
2
Добавим три карточки товара и расположим каждую на четырёх колонках.
3
Для контейнера каждой карточки поставим ширину «fill», чтобы можно было менять ширину общего контейнера, а карточки тянулись бы вместе с ним.
4
Для общего контейнера трёх карточек выберем фиксированную ширину. В разделе «Constrains» выставим «L+R»: макет будет растягиваться по ширине фрейма.
Теперь можно быстро менять любые объекты, включая основной фрейм. Элементы подстраиваются под его ширину.
В Фигме ширина элемента (width) и ограничения (constraints) взаимосвязаны. Некоторые их комбинации несовместимы.
Если выбрать ширину Hug contents, блок будет подстраиваться под содержимое. Если же задать ограничение Left + Right, блок будет растягиваться от одного края фрейма до другого. Эти два подхода противоречат друг другу: в первом случае ширину определяет содержимое, во втором — внешний контейнер. Поэтому Фигма отключает одно из них, если выбрано другое.
Если нужно, чтобы блок тянулся по ширине вместе с родительским фреймом (например, при изменении размера контейнера с карточками), сначала следует задать блоку фиксированную ширину. Тогда можно включить Left + Right в constraints, и элемент будет корректно растягиваться вместе с фреймом.
Если выбрать ширину Hug contents, блок будет подстраиваться под содержимое. Если же задать ограничение Left + Right, блок будет растягиваться от одного края фрейма до другого. Эти два подхода противоречат друг другу: в первом случае ширину определяет содержимое, во втором — внешний контейнер. Поэтому Фигма отключает одно из них, если выбрано другое.
Если нужно, чтобы блок тянулся по ширине вместе с родительским фреймом (например, при изменении размера контейнера с карточками), сначала следует задать блоку фиксированную ширину. Тогда можно включить Left + Right в constraints, и элемент будет корректно растягиваться вместе с фреймом.
Как игнорировать автолейаут
Как расположить информацию о скидке или кнопку «Добавить в избранное» в карточке, которая сделана на автолейауте?
В этом случае поможет абсолютное позиционирование — положение элемента внутри автолейаута, когда к нему не применяются общие настройки. Объект занимает фиксированное место. За это отвечает функция Ignore auto layout.
Мы уже сделали карточку товара на автолейаутах. Теперь нам понадобилось добавить информацию об акции. Попробуем это реализовать.
1
Создадим плашку со скидкой.
2
Добавляем на карточку. Если просто добавить плашку внутрь автолейаута, она будет располагаться где-то между элементами.
3
Применим функцию «ignore auto layout» для плашки. Теперь можно расположить её в любом месте.
Абсолютное позиционирование позволило добавить плашку прямо на фотографию
Ответы на частые вопросы
Как убрать автолейаут?
Убрать автолейаут можно той же кнопкой на панели инструментов, с помощью которой он создаётся. Кроме этого, сочетанием горячих клавиш Shift+Option+A на Mac или Shift+Alt+A на Windows. В этом случае вы превращаете автолейаут обратно во фрейм.
А если хотите полностью удалить автолейаут и сделать элементы обычными объектами, используйте сочетание горячих клавиш Ctrl/Cmd + Shift + G.
Как понять, что нужно использовать автолейаут?
- Элементы должны сохранять отступы. Пример: кнопка с иконками и текстом.
- Контент динамический. Пример: списки с меняющимся количеством элементов.
- Нужна адаптивность под разные экраны. Пример: вёрстка для мобильных и десктопных макетов.
- Частые правки в структуре. Пример: пункты меню, где вы постоянно добавляете или удаляете элементы.
- Однотипные компоненты. Пример: шапки и футеры, которые повторяются на разных страницах.
Почему для некоторых элементов при настройке ширины и высоты доступна функция «fill container», а для некоторых — нет?
Функция «fill container» доступна для элементов, которые находятся внутри автолейаута.
К основному фрейму нельзя применить «fill container», потому что он не лежит внутри автолейаута.
Когда не стоит использовать автолейаут?
Для уникальных задач это не требуется. Например, если вы делаете один простой баннер и в будущем не собираетесь переиспользовать макет. Здесь вам нужно расположить заголовок и картинку внутри фрейма один раз на определённом расстоянии. Нет смысла настраивать автоматические отступы и правила для разового использования.
Простой баннер, для создания которого не стоит заморачиваться с автолейаутом.
Читайте также:
Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы
Курс, который научит вас продвигать свой сайт
Теоретический курс Никиты Обухова по веб-дизайну
Бесплатный учебник по веб-анимации с примерами и правилами использования
