Auto Layout в Figma: пошаговая инструкция на примере кнопки, карточки и формы

Вы меняете надпись на кнопке, а фон остаётся прежним. Добавляете предложение в карточку — и оно наезжает на цену. Сужаете экран, но поля формы выходят за его границы. Такие проблемы проще решать правилами расположения элементов, чем ручным перемещением каждого слоя.

В этом руководстве соберём три примера: кнопку, карточку занятия и форму записи. У них будет общая логика размеров, поэтому изменение текста или ширины не потребует заново выравнивать весь макет. Числа в примерах — учебные настройки: их можно менять под задачу.

Что делает Auto Layout

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

Представьте карточку занятия: название, описание, цена и кнопка. Если элементы стоят в вертикальном контейнере, дополнительная строка описания сдвинет всё, что идёт ниже. Вам не придётся двигать цену и кнопку отдельно. При этом Auto Layout не определит за вас, какой текст важнее и где должна находиться основная кнопка: структуру по-прежнему проектирует дизайнер.

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

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

1. Создайте новый файл в Figma Design и добавьте текстовый слой.
2. Выделите его и нажмите Shift + A. Figma обернёт текст во фрейм с Auto Layout.
3. Найдите настройки Auto Layout на правой панели. Проверьте выбранное направление, отступы и параметры ширины и высоты.
4. Дайте фрейму понятное имя, например Button / Primary. Название пригодится, когда появятся вложенные контейнеры.

Той же командой можно обработать несколько выделенных элементов. Но результат стоит проверить: программа определяет расположение по исходному макету, а оно не всегда совпадает с нужной структурой. Если в выделение случайно попал декоративный фон, он тоже может оказаться участником раскладки.

Не начинайте упражнение со сложного готового экрана. Сначала проверьте поведение на двух-трёх слоях. Разобраться с границами контейнеров поможет урок «Фреймы в Figma».

Направление, Gap и Padding: три разные настройки

Направление определяет, как идут элементы: например, горизонтально для иконки с подписью или вертикально для заголовка с описанием. В актуальной Figma есть также Grid — раскладка по строкам и столбцам. Для наших трёх примеров достаточно горизонтальных и вертикальных контейнеров.

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

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

Для ровного ряда часто достаточно числового Gap. Автоматическое распределение свободного пространства пригодится, например, для строки «название — цена». Проверяйте такую строку на длинном названии: красивое расстояние в широком макете ещё не гарантирует удобного поведения в узком.

Hug, Fill и Fixed: откуда берётся размер

Ширину и высоту нужно настраивать отдельно. Карточка может занимать доступную ширину родителя и одновременно увеличиваться по высоте вслед за описанием. Не ищите один универсальный режим для всех её сторон.

Проверяйте зависимость в обе стороны. Если родитель должен вычислить ширину по ребёнку, а ребёнок — растянуться по родителю, получается противоречие. Для предсказуемого результата задайте внешний размер на нужной оси, а внутренним элементам разрешите его заполнять. Либо оставьте содержимое естественного размера, а родителю задайте Hug.

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

Пример 1. Кнопка, которая меняется вместе с надписью

Начнём с кнопки «Записаться». Нам нужен фон, который увеличивается при замене текста на «Записаться на занятие» и сохраняет одинаковые поля слева и справа.

1. Создайте надпись «Записаться». Для упражнения используйте размер шрифта 16 и межстрочный интервал 24.
2. Выделите текст и нажмите Shift + A.
3. Задайте фрейму горизонтальный Padding 20, вертикальный 12.
4. Добавьте заливку и скругление самому фрейму. Отдельный прямоугольник под текстом не нужен.
5. Проверьте, что ширина и высота кнопки подстраиваются под содержимое — Hug contents.
6. Замените надпись на «Записаться на занятие». Фон должен стать шире, а поля вокруг текста — сохраниться.

Высота в этом примере получается из строки высотой 24 и двух отступов по 12: всего 48. Это результат выбранных настроек, а не обязательная высота любой кнопки. Если изменятся шрифт, межстрочный интервал или требования интерфейса, изменится и расчёт.

Теперь добавьте слева иконку. Поместите её в тот же контейнер, задайте размер 20 × 20 и Gap 8. Иконка остаётся фиксированной, текст занимает собственное место, а внешний фрейм оборачивает оба элемента. Выравнивание по центру поможет согласовать их по вертикали.

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

После проверки можно превратить кнопку в компонент интерфейса. Но сначала стоит убедиться, что базовая раскладка работает. Компонент сохраняет и правильные настройки, и допущенные в них ошибки.

Пример 2. Карточка занятия с длинным описанием

Соберём карточку шириной 320: название занятия, описание, стоимость и кнопка. Подробное описание будет занимать больше строк, поэтому высоту карточки заранее фиксировать не будем.

1. Создайте внешний вертикальный Auto Layout. Для начала задайте ширину 320, Padding 24 и Gap 20.
2. Внутрь добавьте вертикальный контейнер Content с заголовком и описанием. У него задайте Gap 8, ширину Fill container, высоту Hug.
3. У текстов настройте заполнение доступной ширины и рост по высоте при переносе строк.
4. Ниже Content добавьте цену, затем кнопку из первого упражнения.
5. Кнопке задайте Fill container по ширине. Внешней карточке оставьте Hug по высоте.
6. Добавьте фон и скругления внешнему фрейму, а не отдельному слою внутри него.

Вложенный Content нужен потому, что расстояние между заголовком и описанием меньше, чем расстояние от текстового блока до цены. Не пытайтесь выразить оба значения одним Gap у всей карточки. Вложенность позволяет описать реальные смысловые группы.

Для проверки подставьте заголовок «Введение в проектирование доступных мобильных интерфейсов». Затем замените описание на несколько предложений. Карточка должна увеличиться вниз, цена и кнопка — сместиться вслед за текстом, а внутренние поля — остаться прежними.

Следующая проверка — ширина. Сузьте карточку до 280 и расширьте до 400. Если текст переносится, а кнопка следует за контейнером, зависимости настроены разумно. Если один из внутренних блоков сохраняет старую ширину, найдите его в дереве и проверьте Fixed / Fill именно на этом уровне.

Карточки одинаковой высоты — отдельная задача. Иногда они действительно нужны в каталоге. Тогда высоту и распределение свободного места задают осознанно, учитывая максимальную длину текста. Не включайте фиксированную высоту только для того, чтобы два коротких примера выглядели симметрично.

Пример 3. Форма записи: подпись, поле и сообщение об ошибке

В форме важно проектировать не только начальное состояние. Если под полем появится подсказка или ошибка, следующие поля должны сдвинуться вниз. Для этого каждый элемент формы удобно собрать отдельной группой.

1. Создайте вертикальный контейнер Field / Email.
2. Добавьте в него подпись «Электронная почта», визуальный контейнер поля и текст подсказки. Между ними задайте Gap 6–8.
3. Для поля сделайте собственный Auto Layout с внутренними отступами. Ширину задайте Fill, высоту — по выбранному содержимому и Padding.
4. Поместите несколько таких групп в общий вертикальный контейнер Form с Gap 20–24.
5. Добавьте кнопку отправки. Ширина внутренних групп и кнопки должна зависеть от ширины Form.
6. Добавьте текст ошибки под одним полем и проверьте, как изменится форма.

Используйте, например, сообщение «Проверьте адрес: в нём должен быть символ @». Оно занимает больше места, чем короткая подсказка, и поэтому лучше выявляет проблемы с высотой. В реальном интерфейсе формулировка ошибки зависит от причины и должна помогать исправить ввод.

Дизайн в Figma остаётся макетом: Auto Layout сам по себе не создаёт работающую HTML-форму, валидацию и доступные подписи. Он помогает показать разработчику поведение. Подробнее о структуре и состояниях — в статье о дизайне форм в UX/UI.

Как проверять адаптивность без случайных исправлений

Проверяйте макет от внешнего контейнера к внутреннему. Сначала определите, откуда берётся ширина экрана. Затем посмотрите, как ей подчиняется карточка, как карточке подчиняется текстовый блок и как внутри ведёт себя текст. Если менять настройки на всех уровнях сразу, найти причину ошибки будет трудно.

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

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

Почему Auto Layout не работает: частые причины

Прежде чем пересобирать блок, выберите проблемный слой и его непосредственного родителя. Часто достаточно исправить одну зависимость размеров. Например, фиксированная ширина описания внутри гибкой карточки объясняет проблему точнее, чем предположение, что «сломался весь Auto Layout».

Практика: соберите карточку и попробуйте её сломать

Сделайте карточку занятия с названием, описанием, ценой и кнопкой. Подготовьте три версии контента: короткую, обычную и длинную. Сначала меняйте только текст, затем только ширину. Запишите, какой слой пришлось перенастроить и почему.

Упражнение можно считать выполненным, когда длинный текст не перекрывает соседей, внутренние поля остаются постоянными, а кнопка сохраняет выбранное поведение. Сохраните в файле рядом исправленный пример и короткое объяснение настройки. Так у вас появится собственная памятка, которую проще использовать, чем случайно копировать параметры из чужого макета.

Для следующего упражнения попробуйте добавить в карточку разные состояния кнопки и пояснение к полю. Разобраться с составом таких элементов поможет урок «Анатомия UI-компонентов». А готовую работу можно оформить в учебный UX/UI-кейс для портфолио, объяснив, какие проблемы с контентом вы нашли и как их исправили.

Названия и расположение элементов панели могут меняться. Актуальные возможности и определения режимов смотрите в официальном руководстве Figma. Дополнительно доступны инструкции по направлениям и отступам и вложенным контейнерам. Учебные размеры и последовательность упражнений в этой статье предназначены для самостоятельной практики.