Wrap и вложенные авто-лейауты

Wrap переносит переполняющие элементы на новую строку, а вложенные авто-лейауты позволяют собирать сложные блоки.

Реальные интерфейсы — это авто-лейаут внутри авто-лейаута внутри авто-лейаута. Освоив вложенность, вы перестанете бояться сложных макетов.

Два приёма выводят авто-лейаут на новый уровень: режим wrap для переноса строк и вложение авто-лейаутов друг в друга. Разберём оба.

Режим Wrap

Wrap появился в авто-лейауте и работает как flex-wrap. Когда горизонтальный ряд элементов не помещается, лишние переносятся на следующую строку.

Выделите горизонтальный авто-лейаут-фрейм.
В переключателе направления выберите Wrap (третья опция).
Теперь появятся два зазора: горизонтальный (между элементами) и вертикальный (между строками).
Сужайте фрейм — элементы начнут переноситься автоматически.

Wrap: галерея тегов

  широкий фрейм:
  [Дизайн] [Figma] [UX] [Прототип] [Гайд]

  узкий фрейм (wrap включён):
  [Дизайн] [Figma] [UX]
  [Прототип] [Гайд]
   ^ перенос на новую строку автоматом

Вложенные авто-лейауты

Любой авто-лейаут-фрейм можно положить внутрь другого. Так строятся карточки: внешний вертикальный авто-лейаут содержит картинку и внутренний блок текста, который сам — авто-лейаут.

Карточка товара = матрёшка авто-лейаутов

  Frame «Карточка» (вертикальный)
   +-- Image «Фото»            (Fill width)
   +-- Frame «Инфо» (вертикальный, gap 4)
        +-- Text «Название»
        +-- Frame «Низ» (горизонтальный, space between)
             +-- Text «Цена»
             +-- Button «В корзину»

Каждый уровень управляет своим направлением и зазорами. Меняете данные — вся матрёшка пересчитывается.

Когда применять wrap

Wrap незаменим там, где число элементов заранее неизвестно: облако тегов, галерея чипсов-фильтров, сетка логотипов партнёров, набор реакций-эмодзи. Вы кладёте сколько угодно элементов в один wrap-фрейм, и они сами разложатся по строкам в зависимости от ширины. Менять раскладку при добавлении элемента не нужно — это работа Figma.

При работе с wrap обратите внимание на два независимых зазора: горизонтальный (между элементами в строке) и вертикальный (между самими строками). Их часто хочется сделать разными — например, теги стоят плотно по горизонтали, но строки разнесены пошире для воздуха.

Дисциплина вложенности

Вложенные авто-лейауты мощны, но требуют дисциплины. Правило: каждый фрейм-уровень должен отвечать за один аспект раскладки. Внешний — за вертикальную последовательность секций карточки. Средний — за блок текста. Внутренний — за строку «цена + кнопка». Если вы ловите себя на пятом уровне вложенности без ясной причины — скорее всего, структуру можно упростить. Хорошее имя у каждого фрейма (а не «Frame 27») мгновенно показывает, кто за что отвечает.

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

Действие	Как
Включить wrap	третья опция направления
Вложить авто-лейаут	выделить дочерние + `Shift+A`
Выделить родительский фрейм	`Shift+Enter`
Выделить дочерний	`Enter`

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

Ждут переноса без wrap. Обычный горизонтальный авто-лейаут не переносит — нужен именно режим Wrap.
Городят лишние уровни вложенности. Каждый фрейм должен иметь смысл. Не вкладывайте ради вложенности.
Забывают про resizing на вложенных. Чтобы картинка тянулась на всю карточку, поставьте ей Fill width.

Совет профи: вложенность с ясной ответственностью

Сложные блоки — это норма, но каждый уровень вложенного авто-лейаута должен иметь ясную роль и понятное имя. Внешний фрейм карточки отвечает за вертикальную последовательность (картинка, текст, низ), внутренний — за блок текста, ещё глубже — за строку «цена и кнопка». Когда структура читается по дереву слоёв, в макете легко разобраться и вам, и коллегам, и разработчику. Если же вы проваливаетесь на пятый-шестой уровень без явной причины — остановитесь и упростите: скорее всего, пару фреймов можно убрать. Wrap и вложенность — это вершина вёрстки в Figma, и владение ими означает, что вы можете собрать практически любой реальный интерфейс, который останется адаптивным при любых изменениях данных.

Чек-лист

Включил wrap и увидел перенос строк.
Настроил оба зазора в режиме wrap.
Собрал карточку из вложенных авто-лейаутов.
Перемещаюсь по уровням через Enter и Shift+Enter.

Итоги. Wrap переносит переполнение на новую строку, а вложенные авто-лейауты собирают сложные адаптивные блоки как матрёшку. Это вершина вёрстки в Figma. Теперь, когда блоки адаптивны, превратим их в переиспользуемые компоненты.