⟺Auto Layout

Auto Layout автоматически выстраивает дочерние элементы фрейма в ряд или колонку с отступами.

Выделите фрейм и найдите секцию Auto Layout в правой панели.

Выберите направление: Row (горизонталь) или Column (вертикаль).

Настройте Gap (зазор между элементами) и Padding (внутренние отступы).

Добавляйте или удаляйте дочерние элементы — фрейм автоматически пересчитывает размер.

Ручное выравнивание — самая дорогая рутина в макете: добавили пункт в список, и вы двигаете каждую карточку ниже, потом ещё раз, когда текст стал на строку длиннее. Auto Layout снимает эту работу: вы задаёте не координаты, а правила, по которым элементы встают сами.

Три параметра, которые решают всё

Направление задаёт ось потока — Row выстраивает детей слева направо, Column сверху вниз. Gap — расстояние между соседями, единый шаг ритма вместо подогнанных на глаз отступов. Padding — внутренние поля самого фрейма; в Rugma можно задать общий отступ или развести горизонтальный и вертикальный.

Hug, Fill и Fixed — кто кем управляет

У каждого элемента внутри авто-раскладки есть режим размера по оси. Hug сжимает контейнер по содержимому: кнопка обнимает надпись, и при смене текста ширина пересчитывается сама. Fill растягивает элемент на всё свободное место — так ведут себя поля ввода и текстовые блоки в строке. Fixed держит заданный размер несмотря ни на что: иконка 24×24 остаётся 24×24.

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

Вложенность

Одна авто-раскладка — удобство, вложенные — уже система. Строка списка: слева аватар (Fixed), в середине блок из имени и статуса (вертикальная раскладка, Fill), справа время (Hug). Оберните десяток таких строк в вертикальный контейнер с Gap — получится лента, которая переживёт любую правку контента без ручных сдвигов.

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

Если фрейм «не хочет» сжиматься по содержимому — проверьте, не стоит ли у него Fixed по этой оси: Hug работает только там, где размер не зафиксирован. Если элементы наезжают друг на друга, чаще всего Gap задан отрицательным или ребёнок вынесен из фрейма и потерял связь с раскладкой. И помните: авто-раскладка управляет только прямыми детьми фрейма — внуки подчиняются своему контейнеру, а не верхнему.

Скорее всего вам пригодятся привязка к сетке (G) и умные направляющие (Shift+G): пока вы приноравливаетесь, они подсказывают, куда встанет элемент. Готовый блок группируется в Ctrl+G и размножается Ctrl+D.