как работает Auto Layout в Figma
Auto Layout – одна из тех штук, которые сначала кажутся необязательными. Ну есть и есть, макет же и без него рисуется. А потом ты меняешь одно слово в кнопке, и карточка разъезжается. И ты руками двигаешь двадцать элементов, чтобы вернуть все как было
→ Что такое Auto Layout, если совсем просто
Auto Layout (сокращенно АЛ) – это свойство фрейма, благодаря которому элементы внутри фрейма сами расставляются относительно друг друга
Без него фрейм – просто коробка, куда ты руками сложила объекты по координатам. Каждый лежит там, где ты его оставила. Поменяла размер одного – остальные не в курсе
С Auto Layout фрейм становится не коробкой, а очередью: элементы стоят в ряд, в одном направлении, с заданным расстоянием между ними. Убрала один – остальные сдвинулись сами. Текст стал длиннее – контейнер вырос
По сути это то же самое, что flexbox в верстке. Разработчик собирает интерфейс ровно такими же контейнерами, поэтому макет на Auto Layout ближе к тому, что реально появится на экране, чем макет, где все выставлено на глаз
→ Почему без него сложно?
Три причины, которые я вижу в работе чаще всего:
- макет ломается от любого изменения – тебя просят поменять текст в двух местах – ты меняешь и полчаса выравниваешь остальное. С Auto Layout это ноль движений
- отступы разъезжаются – когда расстояния ставятся на глаз, между карточками получается то 16, то 17, то 15 пикселей. Разработчик спросит, какое из них правильное, а ты не будешь знать
- компоненты не собираются – нормальный компонент с вариантами и состояниями почти всегда живет на Auto Layout: кнопка с иконкой и без нее, карточка с длинным и коротким заголовком. Без него на каждый случай придется рисовать отдельную версию руками
И отдельно адаптив. Без Auto Layout нельзя сделать так, чтобы блок сам нормально повел себя на другой ширине – только перерисовать
→ Четыре вещи, которые надо понять
Кнопок в панели много, но по факту Auto Layout держится на четырех решениях
- направление – куда идут элементы / контент – вправо или вниз
- выравнивание – тот самый квадратик из девяти точек, который указывает, куда прижимается содержимое внутри контейнера
- отступы – внутренние отступы контейнера (padding) – расстояние от края фрейма до содержимого. А также какое расстояние будет между элементами (gap)
- адаптивность – как контент и контейнер будет реагировать на изменения размеров. Макет – это не статичный набор элементов, он должен постоянно перестраиваться, так как есть разные разрешения экранов. Тут три режима:
- Hug (обнимашки) – контейнер подстраивается под содержимое (АЛ как бы обнимает внутренний контент и изменяет свой размер в зависимости от него)
- Fixed (фикс) – жестко заданный размер, ничего не двигается, контент не выходит за пределы
- Fill (заполнить)– элемент растягивается на все свободное место внутри контейнера
АЛ всем выносит мозг, поэтому если не поймешь сразу, то не расстраивайся, это дело времени и практики
→ Где это чаще всего ломается?
Auto Layout поверх готового макета. Ты рисуешь экран как обычно, а потом оборачиваешь все в Auto Layout и удивляешься, что элементы прыгнули. Логика тут обратная: сначала структура, потом красота
Один гигантский фрейм вместо вложенных. Экран – это не один Auto Layout, а много вложенных друг в друга: экран, блок, таблица, строка, иконка с текстом. Если пытаться уложить все в один уровень, будет больно и ничего не выйдет
Fixed везде, где страшно. Fixed – это способ сказать «не трогай». Он нужен ситуативно, но если весь макет на Fixed, Auto Layout не работает, а просто присутствует
Абсолютное позиционирование как костыль. В Figma элемент можно выдернуть из потока и положить поверх остальных. Для бейджа на аватарке – отлично. Для того, чтобы не разбираться с вложенностью – плохо
→ Что с этим делать?
Не пытайся выучить все настройки сразу. Возьми один экран, который ты уже нарисовала, и пересобери его на Auto Layout с нуля – от мелких элементов к крупным. Несколько раз пройдя этот путь руками, ты поймешь про вложенность больше, чем из любой статьи
Дальше проверяй себя двумя вопросами:
- если удлинить любой текст вдвое, макет переживет?
- если убрать один элемент из слоев, остальные сдвинутся сами?
Если оба ответа «да», ты умничка! Дальше это уходит в привычку, и ты перестаешь замечать, что вообще что-то настраиваешь
Auto Layout, компоненты и логику сборки экранов я подробно разбираю в Модуле 1 – там это отдельный блок с файлами, практикой и подробными примерами
22.08.2026
от хаоса к системе
если не можешь выбрать модуль, пройди короткий тест