Auto layout в Figma: как работают Hug, Fill и Wrap и где ломается адаптивность

Auto layout в Figma: как работают Hug, Fill и Wrap и где ломается адаптивность

Auto layout превращает набор слоёв в контейнер, который сам управляет расстояниями и размерами. Пока всё просто: включил, выставил отступы, работает.

Проблемы начинаются на вложенных фреймах: элемент «схлопывается» до нуля, кнопка растягивается на весь экран, а текст вылезает за границы. Причина почти всегда в комбинации Hug и Fill. Разберём по документации Figma.

Как включить

Три равнозначных способа из документации:

1. Shift+A на выделенных слоях или фрейме.
2. Кнопка + рядом с разделом Auto layout в правой панели.
3. Правый клик → Add auto layout.

Ключевое ограничение: auto layout поддерживается только на фреймах. Если выделены отдельные слои, Figma создаст вокруг них фрейм.

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

Три направления

• Vertical — объекты идут сверху вниз, при нехватке места переносятся в новую колонку.
• Horizontal — слева направо, перенос в новую строку.
• Grid — сетка.

Перенос (wrap) доступен для горизонтального и вертикального потоков. Документация приводит практичный пример: вертикальный wrap удобен для списков с фиксированной высотой — чек-листов, карточек товаров, биографий.

Padding и gap

Padding — расстояние между границей фрейма и дочерними объектами. Gap — расстояние между самими объектами.

Документация описывает быстрый ввод значений прямо на холсте:

• Alt/Option + клик по области padding — задать значение для противоположных сторон;
• Alt/Option + Shift + клик — задать одинаковое значение со всех сторон.

Это быстрее, чем четыре поля в панели.

Hug и Fill: главный источник путаницы

У каждого фрейма и каждого дочернего слоя есть поведение по каждой оси:

• Fixed — фиксированный размер;
• Hug contents — размер подстраивается под содержимое;
• Fill container — размер занимает доступное место родителя.

Ключевой момент из документации: Hug применим только к auto layout фреймам. И ещё один, объясняющий большинство «схлопываний»: если хотя бы один дочерний объект выставлен в Fill container, родитель перестаёт подстраиваться под содержимое и становится Fixed по этой оси.

То есть цепочка «родитель Hug → ребёнок Fill» невозможна: как только ребёнок начинает заполнять, родителю нужен фиксированный размер, чтобы было что заполнять.

Быстрые переключения на холсте

• двойной клик по вертикальной или горизонтальной границе bounding box — Hug contents;
• Alt/Option + двойной клик по той же границе — Fill container.

Эти два приёма экономят больше времени, чем любые панели.

Почему кнопка растянулась

Классический случай: внутри кнопки текст выставлен в Fill, а сама кнопка — тоже Fill. В результате кнопка занимает всю ширину родителя, а не сжимается по тексту.

Лечение: у кнопки — Hug по горизонтали, у текста — Hug, а растягивать уже саму кнопку средствами родителя, если нужно.

Правило, которое стоит запомнить: Fill назначают тому, кто должен тянуться, Hug — тому, кто должен сжиматься.

Выравнивание

Документация по потокам описывает управление с клавиатуры:

• стрелки переключают варианты выравнивания;
• клавиши W, A, S, D задают прижатие к краю фрейма.

Если gap выставлен в Auto, доступны дополнительные варианты распределения — например, разнести объекты по краям.

Компоненты и auto layout

Компоненты в Figma — это фреймы, поэтому auto layout к ним применим.

Ограничение из документации: добавлять нужно каждый компонент отдельно; массового применения нет.

Практика: собрать один компонент с правильной структурой, а остальные делать из него копированием и заменой содержимого.

Suggest auto layout

Функция автоматически расставляет auto layout фреймы внутри выделенного фрейма или компонента, пытаясь сохранить исходное расположение.

Вызов:

• Ctrl+Shift+A на macOS, Ctrl+Alt+Shift+A на Windows;
• правый клик → More layout options → Suggest auto layout.

Созданные вложенные фреймы помечаются синей точкой в панели слоёв. Это удобно для быстрого черновика, но результат нужно проверять: автоматика не знает, какие группы должны тянуться, а какие — сжиматься.

Практическая схема: карточка

1. Карточка — Vertical, Hug по высоте, Fixed по ширине.
2. Внутри: изображение (Fixed), заголовок (Fill по ширине, Hug по высоте), описание (Fill, Hug).
3. Отступы: 16 по краям, 8 между элементами.

Такая карточка растёт вниз при увеличении текста и не ломается при смене языка.

Практическая схема: список с переносом

1. Контейнер — Vertical с wrap.
2. Фиксированная высота.
3. Дочерние элементы — Fixed.

При добавлении элементов список переносит их в новую колонку.

Производительность

Auto layout сам по себе не тяжёл. Замедляют большие вложенные структуры и десятки текстовых слоёв с авторазмером.

Если файл начал тормозить, проверьте глубину вложенности: пять уровней auto layout внутри карточки — обычно уже лишние.

Как проверить адаптивность

Auto layout не делает макет адаптивным автоматически — он лишь задаёт правила. Проверять их нужно руками.

Простой тест на пять минут:

1. Выделите внешний фрейм и измените ширину на 320, 768 и 1440 пикселей.
2. Посмотрите, что происходит с текстом: переносится, обрезается или вылезает.
3. Проверьте, не «схлопываются» ли элементы до нуля.
4. Увеличьте длину заголовка в два раза — карточка должна вырасти, а не сломаться.
5. Добавьте ещё один элемент в список с wrap — должен появиться новый ряд или колонка.

Если на каком-то шаге макет развалился, причина обычно в одном из трёх: элемент с Fill внутри Hug-родителя, фиксированная высота у контейнера с текстом или отсутствие wrap там, где элементы должны переноситься.

Отдельно проверьте состояния с длинным текстом на другом языке: немецкие слова длиннее русских, и кнопка, рассчитанная на «ОК», может не вместить «Zurücksetzen».

Частые ошибки

Fill на всех уровнях. Элемент растягивается непредсказуемо.

Hug у родителя при Fill у ребёнка. Родитель станет Fixed, макет «прыгнет».

Ручное перетаскивание внутри auto layout. Позиция игнорируется — управляют gap и padding.

Wrap без фиксированного размера. Переносить некуда.

Ожидание массового применения к компонентам. Такого нет.

FAQ

Как включить auto layout?

Shift+A или кнопка + в правой панели.

Чем Hug отличается от Fill?

Hug сжимает фрейм по содержимому, Fill растягивает по родителю.

Почему пропал Hug?

Потому что дочерний объект выставлен в Fill — родитель стал Fixed.

Можно ли применить auto layout к группе?

Группа будет преобразована во фрейм.

Что делает Suggest auto layout?

Автоматически расставляет вложенные auto layout фреймы.

Похожие материалы

• Figma: переопределения экземпляров
• Figma: Smart Animate
• Figma: варианты компонентов