Что такое авто-лейаут и зачем он нужен

Авто-лейаут — это движок автоматической вёрстки: элементы внутри фрейма сами выстраиваются и раздвигаются.

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

Авто-лейаут (Auto layout) — главное, что отличает современный макет от статичной картинки. По сути это аналог CSS flexbox: вы задаёте направление, отступы и зазоры, а Figma сама расставляет дочерние элементы и пересчитывает раскладку при любых изменениях.

Включаем авто-лейаут

Выделите фрейм или несколько объектов.
Нажмите Shift+A — авто-лейаут включится, объекты выстроятся в ряд или колонку.
На правой панели появится секция Auto layout с настройками.

Если вы выделили несколько отдельных объектов и нажали Shift+A, Figma сама обернёт их в авто-лейаут-фрейм.

Три базовых параметра

В секции авто-лейаута вы управляете тремя вещами:

Direction (Направление) — горизонтальное, вертикальное или wrap. Определяет, как текут элементы.
Gap (Зазор) — расстояние между дочерними элементами.
Padding (Отступы) — внутренние поля фрейма со всех сторон.

Авто-лейаут изнутри

  Frame (padding 16)
  +------------------------------+
  | [Icon] -gap16- [Текст]       |  <- direction: горизонтальный
  +------------------------------+
       ^                     ^
     padding              padding

  меняешь текст -> фрейм растёт сам

Почему это меняет всё

С авто-лейаутом кнопка с текстом «ОК» и кнопка с текстом «Подтвердить заказ» имеют одинаковые отступы и просто разную ширину — Figma пересчитывает её автоматически. Добавили пункт в меню — соседи раздвинулись. Это и есть адаптивность.

Авто-лейаут как способ мышления

Главное переключение в голове: с авто-лейаутом вы перестаёте думать координатами «этот объект на X=120, Y=48» и начинаете думать потоком «иконка, затем зазор 8, затем текст, и всё это с отступами 16». Вы описываете правила раскладки, а не позиции. Поэтому, когда данные меняются (текст длиннее, добавился элемент), макет перестраивается сам, сохраняя ваши правила.

Этот сдвиг роднит Figma с реальной разработкой. Веб и мобильные интерфейсы тоже строятся на потоковой раскладке (flexbox, stack), а не на абсолютных координатах. Освоив авто-лейаут, вы заодно начинаете мыслить как фронтендер, и ваши макеты становятся реалистичными — их легко перенести в код.

Индикаторы и подсказки

Когда авто-лейаут включён, на холсте вокруг фрейма появляются розовые подсказки: пунктир показывает padding, а между элементами видны маркеры зазора. Наводя и перетаскивая эти маркеры прямо на холсте, можно менять отступы и зазоры визуально, не трогая числовые поля. А badge с иконкой авто-лейаута у выделенного фрейма подтверждает, что режим активен.

Горячие клавиши

Действие	Клавиша
Включить авто-лейаут	`Shift+A`
Убрать авто-лейаут	`Shift+Alt+A`
Выделить фрейм-родитель	`Shift+Enter`

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

Пытаются включить авто-лейаут на группе. Он работает только на фреймах. Если объект — группа, Figma превратит её во фрейм автоматически при Shift+A.
Двигают элементы внутри мышкой. Внутри авто-лейаута порядок задаётся очередью, а не координатами. Меняйте порядок перетаскиванием в дереве.
Боятся авто-лейаута. Кажется сложным, но это окупается мгновенно. Привыкайте включать его почти всегда.

Совет профи: включайте авто-лейаут почти всегда

Хорошая привычка опытного дизайнера — добавлять авто-лейаут практически каждому структурному фрейму с первого момента. Кнопка, строка списка, карточка, секция, целый экран — всё это выигрывает от потоковой раскладки. Поначалу это кажется лишним усложнением, но очень быстро становится естественным, и вы уже не понимаете, как раньше двигали объекты вручную. Авто-лейаут окупается на каждой правке: меняете текст — раскладка пересчитывается, добавляете элемент — соседи раздвигаются, удаляете — схлопываются. Это не только экономит время, но и делает макет ближе к реальному коду, что упрощает передачу разработке. Не бойтесь авто-лейаута — это самый важный навык во всей Figma, и следующие три урока сделают его понятным до конца.

Чек-лист

Включил авто-лейаут по Shift+A.
Понимаю три параметра: направление, зазор, отступы.
Вижу, как фрейм растёт под содержимое.
Знаю, что авто-лейаут работает на фреймах.

Итоги. Авто-лейаут — это автоматическая вёрстка-flexbox внутри Figma: направление, зазор, отступы. Он делает элементы адаптивными и избавляет от ручной расстановки. В следующих уроках разберём направление, выравнивание и resizing подробнее.