Auto Layout в Figma: практическое руководство
Практика4 минРедакция Innovialabs
Коротко
Auto Layout превращает фрейм в контейнер, который сам расставляет содержимое по заданным направлению, отступам и правилам размеров. Освоив Hug, Fill и Fixed плюс вложенность, вы получаете кнопки, карточки и списки, которые сами подстраиваются под текст и ширину экрана.
Что такое Auto Layout
Auto Layout — свойство фрейма в Figma, при котором вложенные элементы раскладываются автоматически: в строку или в столбец, с заданными отступами. Измените текст, добавьте элемент или растяните фрейм — раскладка обновится сама. По логике это близко к flexbox в CSS, поэтому такие макеты проще передать в разработку.
Добавить Auto Layout: выделите элементы или фрейм и нажмите Shift + A.
Основные настройки
| Настройка | Что делает |
|---|---|
| Direction | Вертикально, горизонтально или с переносом (Wrap) |
| Gap | Расстояние между элементами; режим Auto распределяет их по всей ширине |
| Padding | Внутренние отступы от краев фрейма, общие или для каждой стороны |
| Alignment | Как элементы выравниваются внутри фрейма |
| Resizing | Как фрейм и элементы ведут себя по ширине и высоте |
Hug, Fill и Fixed
Это ключевая часть, на которой спотыкается большинство.
- Hug contents — размер по содержимому. Кнопка становится шире, когда текст длиннее.
- Fill container — элемент занимает все доступное место в родительском Auto Layout. Поле ввода растягивается на всю ширину формы.
- Fixed — фиксированный размер в пикселях, не зависит ни от содержимого, ни от родителя.
Правило: внешние контейнеры обычно Fixed или Fill, внутренние элементы — Hug или Fill. Для гибкости задавайте min width и max width, чтобы карточка не сжималась до нечитаемого состояния и не растягивалась бесконечно.
Шаг 1: кнопка
- Создайте текстовый слой «Отправить заявку».
- Выделите его и нажмите Shift + A. Текст окажется во фрейме с Auto Layout.
- Направление — горизонтальное, padding — например, 12 по вертикали и 24 по горизонтали.
- Добавьте фон, скругление и иконку слева от текста. Gap между иконкой и текстом — 8.
- Ширина и высота фрейма — Hug.
Проверьте: замените текст на более длинный — кнопка расширится, отступы сохранятся. Если нужна кнопка на всю ширину, поменяйте ширину на Fill внутри родительского контейнера, а выравнивание содержимого — по центру.
Шаг 2: карточка
- Соберите элементы: изображение, заголовок, описание и кнопку из шага 1.
- Выделите все и нажмите Shift + A, направление — вертикальное, gap 16, padding 24.
- Ширина карточки — Fixed (например, 320), высота — Hug.
- Изображению, заголовку и описанию задайте ширину Fill, чтобы они тянулись по ширине карточки. Текстовым слоям — высоту Hug, тогда длинное описание просто увеличит карточку.
- Заголовок и описание часто стоят ближе друг к другу, чем к кнопке. Оберните их в вложенный Auto Layout с gap 8 — так работает принцип близости.
Вложенность — главная сила Auto Layout: сложный экран собирается из простых контейнеров, каждый со своими отступами.
Шаг 3: адаптивный список с переносом
- Создайте несколько карточек и объедините их в Auto Layout.
- В Direction выберите Wrap: элементы будут переноситься на новую строку, когда закончится ширина.
- Ширина контейнера — Fixed или Fill, чтобы было, относительно чего переносить.
- Задайте gap по горизонтали и отдельно расстояние между строками.
- Карточкам задайте ширину Fill и min width (например, 280). Теперь при сужении контейнера карточки сначала сжимаются до минимума, а потом уходят на следующую строку.
Растяните контейнер мышкой: на широком экране карточек в ряду больше, на узком — одна. Это уже прототип адаптивной сетки.
Частые ошибки
- Текст с фиксированной шириной внутри Hug-кнопки — кнопка не растет. Текстовым слоям в кнопках ставьте Hug.
- Fill у элемента, родитель которого Hug — получается конфликт, и Figma переключает поведение. Хотя бы один уровень должен иметь заданную ширину.
- Отступы пробелами или пустыми прямоугольниками — используйте gap и padding.
- Элемент, который должен «висеть» поверх (бейдж уведомления на иконке), ломает раскладку. Включите для него Absolute position.