Auto Layout, фреймы и компоненты для быстрой и точной вёрстки в Фигме
Разбираем принципы работы и преимущества использования Auto Layout в Фигме. Показываем, как с его помощью создавать интерфейсные элементы, от отдельных кнопок до сложных страниц. Делимся профессиональными приёмами и даём инструкции для эффективной вёрстки с Auto Layout.
Что такое Auto Layout в Фигме и зачем он нужен
Auto Layout — это инструмент в Фигме, который позволяет упростить работу с макетами и быстрее создавать динамические интерфейсы. Он автоматически упорядочивает и выравнивает элементы, подстраиваясь под их содержимое.
Представьте, что вы делаете кнопку: добавили текст, иконку и отступы, а потом решили изменить надпись. Без Auto Layout вам пришлось бы вручную двигать все элементы, а с ним всё меняется само и ничего не съезжает.
Зачем нужен Auto Layout
Дизайнеры часто сталкиваются с проблемой, когда нужно создать систему из элементов с разными параметрами. Например, в товарной сетке у карточек могут отличаться длина названия и описания товаров. С Auto Layout можно не бояться такого разнобоя и последующих обновлений: карточки, формы и разделы интерфейса всегда будут выглядеть аккуратно, независимо от объёма текста или количества изображений.
- Адаптивная вёрстка. Дизайн должен выглядеть одинаково хорошо на любом экране, от смартфона до широкого монитора. Auto Layout избавляет от ручной подгонки размеров под разные форматы.
- Структурирование слоёв. Вместо хаотичного нагромождения элементов Auto Layout выстраивает их в логичную цепочку. Это особенно полезно в формах, меню и карточках товаров — там, где важна чёткая иерархия.
- Автоматическое выравнивание элементов. Больше всего времени уходит на ручное выравнивание. А с Auto Layout, даже если добавить новый пункт в выпадающее меню, всё останется ровным и аккуратным.
Преимущества для бизнеса особенно заметны на практике. Так, одна студия веб-дизайна при разработке лендингов тратила на адаптацию под мобильные устройства по 2–3 часа. После включения Auto Layout время сократилось до 20 минут.
Как делать письма с мастер-шаблоном: разбираем 4 способа
Как включить Auto Layout в Фигме
Есть три основных способа включить Auto Layout.
Способ 1. Выделить уже готовые нужные элементы и объединить в Auto Layout:
- Выделите слои, которые нужно упорядочить (например, кнопку с текстом и иконкой). Все элементы должны быть внутри выделенной области.
- Нажмите Shift+A или кликните по иконке Auto Layout на панели справа. Ещё можно на панели слоёв или на выбранных элементах нажать правую кнопку мыши и в выпадающем меню выбрать Add Auto Layout.
- Элементы автоматически выстроятся в линию или столбик с базовыми отступами — в зависимости от того, как они располагались изначально.
Способ 2. С нуля создать фрейм с нужными элементами внутри и добавить к нему Auto Layout:
- Создайте фрейм — это будет новая рабочая область.
- Добавьте внутрь нужные элементы (текст, фигуры, иконки).
- Примените Auto Layout как в первом способе.
Способ 3:
- Выберите элемент с неупорядоченными слоями (например, товарную карточку).
- Откройте контекстное меню, выберите в нём More Layout Options и затем Suggest Auto Layout. Альтернатива — нажать Ctrl+Alt+Shift+A.
- Проверьте автоматические созданные Auto Layout и при необходимости внесите правки.
Как настроить Auto Layout
Поскольку Auto Layout не волшебная кнопка «сделать красиво», а рабочий инструмент, давайте разберём, как им пользоваться, и освоим несколько базовых и продвинутых приёмов.
Тренды в емейл-дизайне: что попробовать в рассылке (+ 63 примера)
Базовые настройки
После активации Auto Layout обратите внимание на панель справа с основными настройками:
Горизонтальное и вертикальное размещение:
- Вертикальное направление (↓) — элементы выстраиваются столбцом. Подходит для карточек товаров, списков.
- Горизонтальное направление (→) — элементы располагаются по строке. Подходит для навигации, кнопок с иконками.
Отступы внутри и между элементами:
- Промежутки (Gap) регулируют расстояние между соседними элементами внутри одного фрейма с Auto Layout.
- Внутренние отступы (Padding) задают пространство от границ элемента до содержимого кнопки до текста, чтобы оно не прилипало к краям.
Даже при массовых изменениях или добавлении новых элементов внутри фрейма отступы будут сохраняться автоматически.
👉 Совет: используйте 4px grid — отступы, кратные 4 (8, 12, 16 и т. д.). Это гарантия, что всё будет делиться без дробной части и, соответственно, отображаться корректно. Я подглядел это в дизайн-системе Google и теперь использую везде.
Как менять размер элементов
Параметры W (width) и H (height) регулируют ширину и высоту всего контейнера, к которому применён Auto Layout. А размер отдельных элементов внутри контейнера меняют применённые к ним функции Hug Contents и Fill Container:
- Hug Contents. Элемент подстраивается по размеру под своё содержимое и сохраняет заданные отступы — «обнимает» контент. Например, если кнопке задать Hug Contents, она всегда будет под размер текста на ней.
- Fill Container. Элемент растягивается и занимает всё доступное пространство внутри родительского контейнера с Auto Layout, даже если контейнер увеличился или уменьшился. Например, есть форма, где в одной строке несколько полей. Если одному полю задать Fill Container, оно растянется по ширине между соседними полями и всегда займёт всё свободное место.
Для работы с размерами элементов есть ещё функции Fixed — фиксированный размер элемента и Minimum/Maximum Dimensions — дополнительные ограничения размеров.
Допустим, есть карточка с иконкой и текстом в строку: применяем Auto Layout к карточке → для иконки выставляем Fixed или Hug Contents (размер фиксированный или по её содержимому) → для текста ставим Fill Container, чтобы он растягивался по мере расширения карточки.
Кратко, чтобы запомнить:
- Fill Container — для резиновых/растягивающихся блоков,
- Hug Contents — для «подгонки» под содержимое,
- Fixed — для фиксированных размеров.
Как работать со вложенными фреймами
Вложенный фрейм с Auto Layout — это как матрёшка:
- Создаём горизонтальный Auto Layout для кнопки (текст + иконка).
- Помещаем эту кнопку внутрь вертикального Auto Layout с другими элементами (заголовок, описание).
Теперь при изменении текста или добавлении новых блоков вся структура останется аккуратной.
Продвинутые настройки для динамики и полного контроля
Несколько дополнительных функций находятся в том же правом меню здесь:
Наложение элементов. Для управления порядком отображения объектов при отрицательных отступах используйте параметр Canvas Stacking и решайте, какой элемент поверх какого будет отображаться.
Выравнивание по базовой линии (Baseline Alignment). Если в макете есть несколько строк текста, включите выравнивание Align Text Baseline, чтобы все надписи шли строго по линии, даже если внутри есть вложенный фрейм или буквы разной высоты. Это особенно важно для форм с полями ввода.
Форма на сайт. Почти ультимативный гайд
Двумерные сетки по принципу CSS Grid (Auto Layout Grid). В 2025 году Фигма внедрила Grid внутри Auto Layout — теперь можно создавать не только вертикальные и горизонтальные ряды, но и полноценные двумерные сетки с колонками, строками и ячейками, растяжением и адаптивностью.
В параметрах можно задать точное число колонок и строк, определить для каждой фиксированные или гибкие размеры по ширине и высоте. Элементы внутри сетки легко растягиваются на несколько ячеек, свободно перетаскиваются и получают настраиваемые отступы. При изменении размеров родительского фрейма сетка автоматически перестраивается. Очень удобно для карточек, таблиц, галерей и других сложных интерфейсов, которые раньше собирались вручную.
На панели справа выберите Auto Layout → Grid, задайте количество строк и столбцов, укажите размеры или оставьте настройку Adapt To Content. При изменении размера макета все элементы внутри сетки распределяются автоматически. Для бизнеса это стало настоящим спасением при масштабировании проектов.
Частые ошибки при настройке Auto Layout и как их избежать
Сделали удобную таблицу с ситуациями, когда что-то не получается, и что с этим делать:
Как подготовить макет письма к вёрстке: практические советы с примерами
Компоненты: как массово редактировать элементы
В Фигме можно создавать шаблоны, которые удобно редактировать все сразу, — это компоненты. Они позволяют быстро и легко добавлять элементы в макет, соблюдая единый стиль и оформление.
Чтобы превратить объект в компонент, выделяем все элементы и нажимаем на верхней панели иконку с четырьмя ромбами или выбираем Create Component в контекстном меню. Также это можно сделать нажатием клавиш Ctrl+Alt+K:
После этого в разделе Assets со всеми созданными компонентами появится и этот новый. Его можно многократно использовать в проекте, просто перетаскивая из панели слева.
Если нужно создать много компонентов сразу, выделите все элементы, нажмите стрелку сверху и выберите Create Multiple Components.
Копии созданного компонента-шаблона наследуют все его свойства, но могут и частично меняться, сохраняя связь с оригинальным компонентом. Работает это так:
- Меняется сам компонент — все копии обновляются автоматически.
- Изменения в копии сохраняются только в ней, но не влияют на компонент.
- Если отсоединить копию с помощью Detach Instance в контекстном меню или сочетания клавиш Ctrl+Alt+B, она станет обычным объектом, потеряв связь с компонентом.
Горячие клавиши: как работать в Auto Layout быстрее
В полной мере все преимущества Auto Layout ощущаются при использовании быстрых клавиш. Разберём комбинации, которые экономят время.
Базовые комбинации клавиш для работы с элементами
Shift+A мгновенно создаёт Auto Layout из выделенных элементов.
Alt+Shift+A убирает Auto Layout, превращая фрейм в разгруппированные объекты.
Ctrl+D дублирует элемент. Стандартная комбинация Фигмы. Внутри фрейма с Auto Layout элемент автоматически спозиционируется с сохранением всех отступов и полей. Особенно полезно при создании списков: сделали одну карточку товара, нажали 5 раз Ctrl+D и получили готовый каталог.
Стрелки на клавиатуре ↑/↓ меняют порядок элементов в стеке без перетаскивания мышкой. Супербыстро для списков или меню.
Краткий гайд по тёмной теме в письмах
Продвинутые приёмы
Ctrl+Alt+C → Ctrl+Alt+V копирует стиль и настройки Auto Layout с одного фрейма на другой.
Ctrl+Alt+Shift+A автоматически создаёт структуру для хаотично расположенных элементов. Разбросайте несколько прямоугольников и текстовых блоков → нажмите комбинацию → Фигма сама предложит логичную группировку.
Горячие клавиши Auto Layout в Фигме: шпаргалка для работы
Как добавить нестандартный шрифт в Figma на MacOS со всеми начертаниями
Для чего можно использовать Auto Layout
У многих пользователей Auto Layout ассоциируется в основном с кнопками и простым выравниванием. Но этот инструмент способен на большее, от автоматизации рутины до создания сложных интерактивных прототипов.
5 способов применения Auto Layout
1. Адаптивные текстовые блоки, которые не ломают макет. Если создать текстовый блок и добавить Auto Layout с параметром Hug Contents, то при редактировании текста блок автоматически будет подстраиваться, меняя высоту и ширину. Элементы не полезут друг на друга, сохраняя аккуратность и читабельность на любом устройстве. Благодаря этому даже самую сложную карточку товара или промоблок можно собрать буквально за минуты.
2. CRM-формы и динамические интерфейсы. В CRM-системах нужны формы со множеством полей, которые могут оперативно меняться: сегодня добавил — завтра убрал. Auto Layout обеспечивает эту гибкость, когда формы сами подстраиваются под активные поля и изменения структуры данных. Каждый элемент внутри, будь то текстовый блок или выпадающий список, корректно реагирует на обновления. И интерфейс становится действительно удобным для пользователя.
3. Быстрое создание шаблонов и компонентов. Для бизнеса важны скорость и стандартизация. С Auto Layout любой дизайнер может быстро создавать шаблоны кнопок, списков, таблиц, карточек товаров и даже многоуровневых меню. После разовой настройки такие компоненты можно использовать многократно во всех частях сайта или приложения, что обеспечивает единообразие и профессиональный внешний вид.
Вот несколько примеров пользы Auto Layout для стандартных элементов:
4. Интерактивные списки, фильтры, карточки. В онлайн-магазинах, образовательных платформах и корпоративных сайтах Auto Layout используют для создания целых лент товаров, списков сотрудников, отзывов или галерей. Элементы списка можно динамически добавлять или удалять, и они автоматом выстраиваются с правильными отступами и адаптируются под содержимое, от длинных фамилий до миниатюрных аватарок.
5. Совместимость с компонентами для дизайн-систем. Auto Layout отлично сочетается с системой компонентов и вариантов Фигмы. Например, создавая удобный интерфейс с возможностью выбора товара, дизайнер может собрать универсальный компонент, который меняет внешний вид в зависимости от акций, статуса товара или персональной скидки. Такой подход помогает поддерживать единый стиль и экономит ресурсы при доработках и масштабировании продукта.
Как сделать письмо с помощью плагина в Фигме
Как добавить Auto Layout к существующему макету: пошаговая инструкция
Отвечаем на самый частый вопрос, который задают на старте работы с Auto Layout, — как применить этот инструмент в уже существующем макете.
Шаг 1: Подготовка макета
Прежде чем внедрять Auto Layout в существующий макет, убедитесь, что все элементы, которые должны быть объединены (например, заголовок, текстовый блок, кнопка), выделены. Это могут быть как отдельные объекты, так и уже сгруппированные фрагменты интерфейса.
Практический совет: наведите порядок в слоях, которые хотите объединить в Auto Layout, уберите лишние группировки и расположите слои в нужной последовательности для дальнейшей работы.
Шаг 2: Применение Auto Layout
- Выделите нужные элементы или фрейм.
- Активируйте Auto Layout с помощью Shift+A или на панели справа.
- Auto Layout сразу применится, а панель настройки справа позволит задать дополнительные параметры.
Шаг 3: Работа со вложенными элементами
Если структура макета сложнее, чем последовательно идущие друг за другом элементы, или отступы между элементами должны быть разных размеров, то, вероятно, потребуется создание дополнительных Auto Layout.
Но настраивать Auto Layout нужно не всегда и не всем объектам. Например для бенто-сеток часто больше подходят обычная сетка (Grid) или стандартные фреймы с привязками (Constraints). А декоративные элементы лучше настраивать внутри Auto Layout через Absolute Position. Это позволяет им игнорировать правила контейнера и находиться в любом месте.
Шаг 4: Детальная настройка
На панели справа можно настроить отступы между элементами (Gap), внутренние отступы (Padding), направление (Direction) и поведение размера (Hug Contents, Fill Container, Fixed Size).
52 бесплатных сервиса для дизайнеров: самые крутые стоки и не только
Auto Layout в Фигме: краткие выводы
Auto Layout превращает статичные макеты в живые, гибкие системы. Попробуйте применить его в текущем проекте — и вы сразу заметите, насколько проще стало работать. А вот ключевые тезисы, которые стоит запомнить про этот инструмент Фигмы:
- Больше скорости. Автоматическое выравнивание и адаптивность экономят время при рутинных правках.
- Гибкость без хаоса. Текстовые блоки, кнопки, карточки и таблицы подстраиваются под контент сами. А CRM-формы, фильтры и списки остаются аккуратными даже при изменениях.
- Работает в связке с компонентами. Auto Layout + Variants = мощная дизайн-система. Изменения в одном месте применяются ко всем связанным элементам.
- Ошибки легко исправить. Поехала вёрстка? Проверьте направление и отступы. Элементы выходят за границы? Включите Clip Content. Не растягивается? Переключите в Fill Container.
- Начинайте с малого. Сначала освойте кнопки и карточки, а потом переходите к сложным компонентам, таблицам и адаптивным сеткам.
