Auto layout в Figma: почему макет разваливается и как это исправить
Auto layout — самая полезная и самая капризная функция Figma. Пока всё в одном направлении, он работает прекрасно. Как только появляется вложенность, фреймы начинают схлопываться в ноль, текст перестаёт переноситься, а кнопка «не растягивается».
Почти все эти проблемы — не баги, а конфликт настроек. Разберём базовую модель и восемь типичных ошибок.
Минимальная теория: три режима размеров
Документация Figma описывает три варианта для каждой оси:
- Hug contents — размер по содержимому. Применим только к auto layout фреймам.
- Fill container — занять доступное место. Применим только к дочерним объектам auto layout фрейма; для верхнеуровневых фреймов недоступен.
- Fixed width / height — фиксированный размер, применим к обоим.
Плюс появились min/max ограничения: размер не меньше минимума и не больше максимума.
Есть и подсказки в интерфейсе:
- двойной клик по вертикальной или горизонтальной границе auto layout объекта ставит Hug contents;
- Alt (Option) + двойной клик по границе ставит Fill container.
Если помнить только это, половина ошибок исчезает.
Ошибка 1. Hug-родитель и Fill-ребёнок
Самая частая. Родитель стоит на «Hug contents», ребёнок — на «Fill container». Родитель хочет быть размером с ребёнка, ребёнок хочет занять размер родителя. Круг замкнулся.
Документация Figma прямо предупреждает: если хотя бы один дочерний объект внутри auto layout фрейма стоит на Fill container, родитель больше не может hug contents и становится Fixed по этой оси.
Что делать:
- Решите, кто задаёт размер по этой оси.
- Если размер задаёт контент — родитель Hug, ребёнок Fixed или Hug.
- Если размер задаёт контейнер — родитель Fixed (или Fill во внешнем фрейме), ребёнок Fill.
Правило: Fill у ребёнка требует разрешённого размера у родителя. Без этого Fill превращается в ничто.
Ошибка 2. Всё поставлено на Fixed
Обратная крайность. Дизайнер ставит всем элементам фиксированные размеры, чтобы «не прыгало». В результате при изменении ширины карточки ничего не адаптируется, а тексты ломаются.
Как проверить:
- Выберите карточку.
- Растяните её за боковую границу.
- Посмотрите, какие элементы остались на месте.
Всё, что должно тянуться, — Fill по горизонтали. Всё, что должно переноситься, — текст с Fill по ширине и включённым авто-высота.
Ошибка 3. Забыли min/max
Фрейм на Hug с длинным текстом разъезжается на 900 px, а на коротком — на 120. В дизайне это выглядит как «прыгающая» сетка.
Решение — min/max ширина. Документация подчёркивает: min/max можно ставить и Hug-фрейму, и Fill-объекту.
Практика:
- карточка в списке — max width, чтобы не растянуться на широком экране;
- кнопка — min width, чтобы не сжаться до «ОК» на узком экране;
- модальное окно — max width и min width одновременно.
Ошибка 4. Паддинг «съедает» фрейм
В документации есть отдельное замечание: фрейм больше не может быть меньше собственного паддинга (плюс внутренняя обводка, если она участвует в раскладке). Если у фрейма Hug или Fixed меньше паддинга — он увеличится до паддинга.
Отсюда два следствия:
- Нельзя сделать «нулевой» фрейм с паддингом 32 — он будет минимум 64 по оси.
- Если элемент выглядит больше ожидаемого, первым делом проверьте паддинг, а не размеры детей.
Ошибка 5. Группа вместо фрейма
Auto layout нельзя применить к группе. Если выбрали группу и нажимаете Shift+A, ничего не произойдёт — точнее, Figma обернёт её во фрейм, и структура станет глубже.
Практика: собирайте сразу фреймами. Группа уместна для временной группировки на канвасе, но не как контейнер компонента.
Ошибка 6. Слишком глубокая вложенность
Пять уровней auto layout внутри компонента — почти всегда проблемы: сложно менять отступы, легко получить неожиданное поведение при изменении ширины, а разработчику трудно повторить структуру.
Ориентир: 2–3 уровня. Если нужно больше, проверьте, не решается ли задача Grid flow или просто несколькими соседними фреймами.
Ошибка 7. Constraints там, где нужен Fill
В auto layout фрейме к дочерним объектам нельзя применить constraints — если объект не «игнорирует» auto layout. Вместо constraints работает свойство resizing.
То есть принесли макет из старой библиотеки, где карточка жила на constraints, и внутри auto layout она ведёт себя непредсказуемо. Лечится переводом на Fill/Hug.
Исключение — режим Ignore auto layout: объект ведёт себя как в обычном фрейме, и к нему снова применимы constraints. Это правильный выход для «плавающих» элементов вроде бейджа в углу.
Ошибка 8. Текст не переносится
Классика: текст стоит на Hug по ширине, родитель — на Fixed. При сужении контейнера текст не переносится, а вылезает за границы.
Порядок исправления:
- Текстовый слой — Fill container по ширине.
- Высота текста — авто (Hug), чтобы росла при переносе.
- Родитель — Fixed или Fill по ширине.
Документация по адаптивной карточке разбирает ровно это: текстовые слои сначала стоят на hug, и при изменении ширины не адаптируются, пока не переключить их на Fill container.
Проверка перед сдачей макета
- Растяните каждый ключевой фрейм на +30 % и −30 %.
- Убедитесь, что текст переносится, а не обрезается.
- Проверьте, что кнопки не растягиваются на всю ширину без необходимости.
- Посмотрите на самый длинный и самый короткий контент.
- Проверьте, что нет фреймов с нулевым размером по одной оси.
- Убедитесь, что вложенность не больше трёх уровней.
FAQ
Почему Figma не даёт поставить Hug contents?
Hug доступен только фреймам с auto layout. Если опция недоступна — auto layout не включён. И он перестаёт работать, если хотя бы один ребёнок стоит на Fill container.
Почему Fill container серый?
Потому что объект не внутри auto layout фрейма или это верхнеуровневый фрейм: Fill для них недоступен.
Почему фрейм не сжимается меньше определённого размера?
Скорее всего, ширина паддинга больше, чем заданный размер. Фрейм не может быть меньше собственного паддинга.
Как сделать элемент в углу auto layout фрейма?
Включить для него Ignore auto layout и задать constraints — тогда он ведёт себя как в обычном фрейме.
Помогают ли min/max вместо Fixed?
Да, в большинстве случаев: контент остаётся гибким, но не разъезжается за разумные пределы.