Figma: Wrap в auto layout, отдельные отступы и поведение колонок
Список тегов растёт от двух до двенадцати, и фрейм начинает разъезжаться вправо за пределы макета.
Wrap в auto layout решает это так же, как CSS flex-wrap: элементы переносятся на новую строку.
Где включить
Документация: выберите auto layout фрейм, задайте горизонтальный или вертикальный поток и включите Wrap.
Практика: переключатель находится в настройках авто-лейаута, рядом с выбором направления.
Горизонтальный поток
Документация: объекты заполняют фрейм слева направо, а при нехватке места переходят на новую строку.
Практика: это поведение tag cloud: чипы идут в ряд и переносятся.
Вертикальный поток
Документация: объекты идут сверху вниз, а по достижении высоты фрейма продолжаются в новой колонке.
Практика: чтобы колонки вообще появились, у фрейма должна быть фиксированная высота.
Это не masonry
Документация: вертикальный wrap — не masonry-раскладка: объекты сохраняют порядок и переходят в следующую колонку только после заполнения текущей.
Практика: рваных колонок разной высоты здесь не будет, и это важно понимать заранее.
Два отступа
Документация: при включённом Wrap доступны два значения gap: между объектами в ряду и между самими рядами.
Практика: это ключевое отличие от обычного auto layout: раньше отступ был один.
Практика: типичная пара — 8 между чипами и 4 между строками, или 12 и 12 для карточек.
Gap Auto
Документация: при значении Auto объекты распределяются по свободному месту.
Практика: в этом режиме набор вариантов выравнивания сокращается до трёх.
Выравнивание
Документация: при конкретном значении gap доступны девять вариантов выравнивания; при Auto — три, в зависимости от потока.
Для горизонтального это верх, центр и низ; для вертикального — лево, центр и право.
Практика: если фрейм «hug contents», смена выравнивания может не дать видимого эффекта: свободного места просто нет.
Размеры детей
Практика: wrap работает предсказуемо, когда у детей ширина Fixed или Hug.
Практика: если ребёнок стоит в Fill container, он растягивается и забирает место, и перенос теряет смысл.
Практика: поэтому для чипов ставят Hug по ширине и фиксированные внутренние отступы.
Размер фрейма
Практика: для горизонтального wrap ширина фрейма должна быть фиксированной.
Практика: иначе фрейм растягивается под содержимое, и переносить нечего.
Практика: высоту при этом можно оставить Hug: она вырастет по числу строк.
Порядок работы
- Соберите чипы как группу.
- Нажмите Shift+A для auto layout.
- Задайте горизонтальный поток.
- Включите Wrap.
- Поставьте ширину фрейма Fixed.
- Задайте gap по горизонтали и по вертикали.
- Проверьте выравнивание.
- Сожмите фрейм и посмотрите на перенос.
Практика: шаг 8 — проверка: если перенос не происходит, чаще всего ширина стоит Hug.
Что ломается
Практика: самый частый случай — Wrap включён, но фрейм растёт вместе с содержимым.
Практика: второй — дети стоят в Fill, и первая же строка занимает всю ширину.
Практика: третий — выравнивание по центру при Hug-фрейме: эффекта не видно, потому что свободного места нет.
Где Wrap не появится
Документация: Wrap доступен для горизонтального и вертикального потока.
Практика: для сетки (Grid) он не нужен: там колонки задаются явно.
Практика: если переключатель не виден, проверьте, что выбран именно auto layout фрейм, а не обычный.
Практика для карточек
Практика: галерея карточек с переменным числом элементов — типичный кандидат на горизонтальный wrap.
Практика: задайте фиксированную ширину фрейма и Hug для карточек, и колонки будут пересобираться сами.
Практика: для разной ширины карточек результат будет неровным: wrap не выравнивает сетку по колонкам.
Практика для вертикали
Практика: вертикальный wrap удобен для чек-листов с фиксированной высотой: пункты идут вниз, потом в новую колонку.
Практика: порядок сохраняется, и это логично читается в прототипе.
Варианты компонента
Практика: если у компонента число элементов меняется, wrap стоит включить сразу, а не «когда понадобится».
Практика: в варианте с двумя элементами wrap не заметен, но защищает от переполнения.
Где ломается
Нет переноса. Ширина фрейма Hug.
Первая строка на всю ширину. Ребёнок стоит в Fill.
Нет колонок. Высота фрейма Hug.
Не видно выравнивания. Нет свободного места.
Пропал переключатель. Выбран не auto layout фрейм.
FAQ
Где включается Wrap?
В настройках авто-лейаута, рядом с направлением потока.
Работает ли в вертикальном потоке?
Да, объекты переходят в новую колонку.
Чем это отличается от masonry?
Порядок жёсткий: колонка заполняется целиком, прежде чем начать следующую.
Сколько отступов настраивается?
Два: между элементами и между рядами.
Почему не происходит перенос?
Ширина фрейма стоит Hug, а не Fixed.
Почему это не сетка
Практика: wrap не создаёт колонок фиксированной ширины.
Практика: он просто переносит элемент, когда место кончилось, и выравнивает ряды по краю фрейма.
Практика: для настоящей сетки в Figma есть Grid-раскладка, и она решает другую задачу.
Практика с текстом
Практика: если внутри чипов текст, задайте каждому чипу Hug по ширине и горизонтальные внутренние отступы.
Практика: тогда длинный текст расширит чип, а не сломает ряд.
Практика: и проверьте, что у фрейма фиксированная ширина: иначе переносить нечего.
Итог
Практика: Wrap — для переменного числа элементов, а не для сетки.
Практика: фиксированная ширина фрейма и Hug у детей — обязательные условия.
Практика: два отступа настраиваются отдельно и почти всегда различаются.
Практика: в вертикальном потоке помните: это не masonry.
Про прототип
Практика: при изменении числа элементов через варианты компонента wrap пересобирает ряды автоматически.
Практика: это позволяет показать в прототипе состояние «много тегов» без правки макета.
Практика: и не ломает соседние элементы, как это было бы при абсолютном позиционировании.
Про экспорт
Практика: wrap не влияет на экспорт: каждый элемент остаётся отдельным слоем.
Практика: но при экспорте целого фрейма границы определяются его размером, а не содержимым.
Практика: если фрейм стоит в Hug по высоте, экспорт подстроится под число строк.