Автолейаут в Figma разъезжается: 7 причин и что нажать

28 августа 2026 · 9 минут · Tomsa Daria

Семь причин, по которым автолейаут ведёт себя не так, как вы ожидали, и что именно нажать в панели Design в каждом случае. Статья для тех, у кого Figma уже открыта.

Fill container серый: объект не вложен в контейнер с автолейаутом

Симптом узнаваемый: вы выделяете блок, открываете выпадающий список рядом с полем W и не находите там Fill container — пункта либо нет, либо он неактивен. Кажется, что файл сломался. Не сломался: режимы размера доступны не всегда, и это правило, а не баг.

Три режима отвечают на один вопрос — кто решает, какой ширины объект. Fixed — вы, числом. Hug contents — содержимое: контейнер сжимается по своим детям. Fill container — родитель: объект занимает всё свободное место. Отсюда и ограничения. Hug появляется только у фреймов с автолейаутом и у текстовых слоёв: обычному фрейму нечем измерять содержимое, оно расставлено координатами. Fill появляется только у объекта, который лежит внутри фрейма с автолейаутом: растягиваться можно лишь относительно родителя, знающего про свободное место.

Практический вывод: если в списке нет Fill, вопрос не к объекту, а к его родителю. Проверьте по порядку:

• Выделите в панели Layers родителя блока — именно родителя, а не сам блок — и нажмите Shift + A. В панели Design у него появится раздел Auto layout, а у ребёнка в списке — режим Fill.
• Убедитесь по дереву слоёв, что объект действительно внутри фрейма. Перетаскивание по холсту не всегда кладёт объект внутрь: визуально он лежит поверх, а в дереве стоит рядом. Тогда Fill не появится, сколько ни включай автолейаут у соседа.
• Если объект завёрнут в группу, режимы относятся к группе, а не к нему. Разберите группу (Cmd/Ctrl + Shift + G) — автолейаут работает с фреймами.
• Верхний фрейм экрана не вложен ни во что, и Fill ему брать не от кого. Ширина экрана всегда Fixed — это нормально, а не ошибка.

Hug, Fill и Fixed: что каждый режим на самом деле обещает

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

Кнопка — ширина Hug, высота Fixed 48: кнопка обнимает подпись, длинный текст даёт широкую кнопку. Поле ввода — ширина Fill, высота Fixed: поле занимает всю ширину формы, а форма решает, сколько это. Карточка товара в ряду — ширина Fill, высота Hug: карточки делят ширину поровну, высота идёт от содержимого. Текст внутри карточки — ширина Fill, высота Hug: только так длинное название перенесётся, а карточка вырастет под него. Фотография — ширина Fill, высота Fixed плюс режим заливки Fill, чтобы картинка обрезалась, а не сплющивалась.

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

Правило, которое это снимает: в цепочке контейнеров хотя бы один уровень обязан быть Fixed или ограничен максимальной шириной. Размер должен откуда-то взяться. Обычно фиксируют внешний контейнер содержимого — например, 1200 по сетке, — а всё внутри тянется от него.

Оттуда же, из выпадающего списка режимов, берутся ограничения: пункты Add min width и Add max width (и такие же для высоты). У Fill неприятное свойство — он растягивается неограниченно, а строка текста шириной 1200 нечитаема. Для текстового блока ставят максимум 640, это примерно 70 знаков в строке. Для карточки товара — минимум 240: ниже него фотография становится бессмысленной. Два этих числа делают адаптив почти автоматическим и снимают половину ручных правок на узких ширинах.

Блок вылезает за границы: Clip content и когда его включать

Флажок Clip content в разделе Frame обрезает всё, что выходит за границы фрейма. Соблазн включить его сразу, как только что-то торчит, велик, но сначала стоит ответить, почему содержимое вылезло: Clip content прячет симптом, а не чинит раскладку.

Причина первая: у ребёнка задана фиксированная ширина больше, чем внутренняя ширина родителя, то есть ширина родителя минус padding слева и справа. Автолейаут не сжимает Fixed-детей — он честно рисует их поверх границы. Лечение: ширина Fill у ребёнка либо min width вместо жёсткого числа.

Причина вторая: у родителя фиксированная высота, а содержимое стало выше — например, название заняло две строки вместо одной. Лечение: высота Hug у родителя, чтобы он рос за содержимым.

Где Clip content нужен по делу: медиаблок с фотографией и скруглением, иначе углы фото торчат из-под радиуса; лента фильтров с горизонтальной прокруткой. Где его включать нельзя: если у блока есть тень, выходящая за границы; если поверх лежит метка с Absolute position, специально свисающая за край; если внутри всплывающий список, который в прототипе должен открываться поверх соседей.

Всё съехало в одну строку: направление и выравнивание

Элементы встали в строку вместо столбика. Направление — три значка в разделе Auto layout: вертикально, горизонтально и Wrap (перенос на новую строку, когда содержимое не помещается). Горизонтальное направление у контейнера, который вы считали вертикальным, — самая частая причина «всё съехало». Проверяйте это первым.

Элементы разъехались к краям, посередине дыра. В поле Gap стоит значение Auto, а это space between. Приём полезный: так делают шапку с логотипом слева и меню справа, без пустых прямоугольников-распорок. Но включённый случайно, он выглядит как поломка. Впишите в поле число — элементы соберутся обратно.

Содержимое прижато не туда. Квадрат из девяти точек — это выравнивание, и он не растягивает, а прижимает: отвечает на вопрос «где лежит содержимое», когда контейнер больше содержимого. Если карточки в ряду разной высоты и вы хотите сделать их одинаковыми, выравнивание не поможет — нужен режим Fill по высоте у самих карточек.

Элемент не двигается мышью, поля X и Y неактивны. Так и должно быть: автолейаут игнорирует координаты своих детей. Порядок задаётся порядком слоёв — в горизонтальном контейнере первый снизу в списке Layers идёт слева. Переставлять можно и на холсте: возьмите элемент и подвиньте, Figma покажет синюю линию вставки и переставит его в потоке. А если элемент действительно должен стоять в произвольной точке — метка скидки в углу карточки, — выделите его и включите Absolute position, значок с рамкой и точкой в разделе Auto layout. Он выпадет из потока, но останется внутри фрейма.

Отступы живут своей жизнью: padding контейнера против gap между детьми

Два разных числа стоят в панели рядом, и их постоянно путают. Padding — внутренние поля контейнера, расстояние от его границы до содержимого; задаётся двумя полями, по горизонтали и по вертикали, а значок с четырьмя квадратами справа раскрывает все четыре стороны отдельно. Gap — промежуток между детьми, и к границам контейнера он отношения не имеет.

Симптом: между двумя блоками не то расстояние, что записано в Gap. Ищите так:

• У соседа есть собственный padding, и реальное расстояние равно gap плюс его поля.
• Между блоками лежит вложенный контейнер со своим padding: на холсте он невидим, в панели Layers виден сразу.
• В поле Gap стоит Auto — тогда число из него вообще не используется.
• Один из соседей в режиме Fill: он съедает всё свободное место, и то, что выглядит как расстояние, — его пустая часть. Наведите курсор с зажатым Alt, и Figma покажет реальные числа.
• Текстовый слой выше своих букв: высоту строки задаёт межстрочный интервал, и сверху-снизу остаётся воздух. Он читается как лишний отступ, но принадлежит тексту, а не контейнеру.

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

Автолейаут разъезжается не в момент сборки, а в момент, когда в него попадают настоящие данные. Поэтому проверяют компонент не на удобном тексте, который вы сами и придумали, а на крайнем. Пять минут стресс-теста экономят час переделок.

Что подставить: название в одно слово и название на три строки — карточка должна расти вниз, а ряд оставаться ровным. Цену «890 ₽» и цену «124 900 ₽» — блок цен не наезжает на старую цену и не толкает кнопку. Выключенную метку и выключенную старую цену — на их месте не должно оставаться пустого места. Ширину карточки 240 и 400 — фото не искажается, кнопка тянется, текст переносится. И наконец ряд из четырёх карточек с названиями разной длины — все должны быть одной высоты.

Что чинить, если тест не прошёл. Длинное название растянуло карточку в строку и сломало ряд — у текстового слоя стоит ширина Hug, а нужна Fill и высота Hug: только так текст переносится. Это второй по частоте случай после Fill внутри Hug, и проверять его стоит первым, когда ряд карточек внезапно разъехался.

Описание разрослось на пять строк — ограничьте число строк параметром Max lines в разделе Text: для описания в карточке двух строк обычно достаточно.

Карточки в ряду получились разной высоты — выделите карточки внутри ряда и поставьте им высоту Fill, а самому ряду выравнивание по верхнему краю. Тогда все станут высотой с самую высокую. Кнопка при этом прижмётся к верху; чтобы она ушла вниз, дайте блоку с текстом высоту Fill внутри карточки — он съест лишнее место, и кнопка окажется у нижнего края. Свободное место отдают тому блоку, который может расти: это стандартный приём, а не хитрость.

Если после такого прогона хочется собрать карточку один раз и правильно, а не чинить её каждый раз заново — в курсе «Интерфейсы в Figma» автолейауту отведён отдельный модуль на 2 ч 15 мин, и заканчивается он практикой «карточка товара, которая тянется»: та же карточка, тот же стресс-тест из пяти пунктов, только с разбором каждой поломки.

Вложенные автолейауты: почему три уровня — это норма, а семь — ошибка

Вложенность придумывают до того, как рисуют. Для карточки товара она такая: внешний вертикальный контейнер Карточка, внутри него Медиа (фото и метка поверх), Текст (название и описание), Цены (горизонтальный: текущая и старая) и кнопка. Причина группировки одна и совершенно практическая: расстояния внутри группы и между группами разные — 8 внутри текста и 16 между блоками, — а один плоский контейнер даёт только одно значение Gap.

Три-четыре уровня — норма. Семь — признак того, что вы оборачивали по ходу дела. Отличить просто: у каждого уровня должна быть причина — направление, расстояние, фон или padding. Уровень без причины — обёртка с одним ребёнком, нулевым gap и нулевым padding; она разбирается сочетанием Cmd/Ctrl + Shift + G без последствий.

Откуда лишние уровни берутся. Первое: Shift + A, нажатое на одном объекте, заворачивает его в отдельный фрейм-обёртку. Иногда это нужно — кнопка и есть фрейм с автолейаутом вокруг одной подписи, — но чаще нет. Признак: в панели Layers появился лишний уровень вложенности; отменяйте через Cmd/Ctrl + Z и выделяйте сразу все нужные объекты. Второе: попытка починить поломку ещё одной обёрткой. Она даёт видимость порядка на день, а через неделю в файле семь уровней, и ни один нельзя тронуть, не сломав соседний.

Чек-лист: что проверить, прежде чем чинить руками

Прежде чем двигать что-то мышью, пройдите список сверху вниз. В девяти случаях из десяти ответ находится на первых трёх пунктах.

• У родителя блока действительно включён автолейаут — в панели Design есть раздел Auto layout.
• Блок лежит внутри этого родителя в дереве Layers, а не рядом с ним.
• Направление контейнера то, которое вы имели в виду, а в поле Gap стоит число, а не Auto.
• У текстовых слоёв ширина Fill, высота Hug.
• Нигде нет Fill внутри Hug без фиксированного уровня выше по цепочке.
• У карточек и колонок задан min width, у текстовых блоков — max width.
• Все padding и gap взяты из одной шкалы: 4, 8, 12, 16, 24, 32. Дробных значений нет — 13 и 22 это след подтягивания мышью, а не решение.
• Элементы, лежащие поверх остальных, помечены Absolute position, а не выпали из потока сами по себе.
• Clip content включён только там, где он нужен по делу.
• Стресс-тест на длинном названии, крайних ценах и двух ширинах пройден.

Зачем доводить это до конца

Автолейаут — не режим рисования, а способ описать правила. Вместо «этот текст лежит на 24 пикселя ниже» вы говорите «элементы идут вертикально с промежутком 24», и дальше правило соблюдается без вас. Пока в файле остаётся хоть один блок, расставленный координатами, макет будет разъезжаться именно в этом месте.

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