Auto layout в Figma: что это, hug, fill и fixed простыми словами

Auto layout в Figma — раскладка, при которой фрейм сам расставляет своё содержимое: в строку или в столбец, с заданным промежутком и внутренними отступами. Напишете на кнопке длинный текст — кнопка станет шире сама, удалите пункт списка — остальные подвинутся. Включается кнопкой в свойствах фрейма или сочетанием Shift+A. Главное в нём — не направление, а режим размера каждого слоя: hug, fill или fixed.

Три правила раскладки

Направление — дети идут в ряд по горизонтали или в столбец. Внутренние отступы — от края фрейма до содержимого, по четырём сторонам. Промежуток — расстояние между соседними детьми. Кнопка «Купить» — горизонтальная раскладка, отступы 24 по бокам и 12 сверху и снизу, внутри текст. Это тот же flexbox, что в вёрстке: direction, padding, gap.

Hug, fill, fixed

Hug — «по содержимому»: слой ровно такого размера, как требует содержимое, кнопка растёт вместе с надписью. Fill — «заполнить»: слой занимает всё свободное место в родителе, как поле ввода в форме. Fixed — число, которое не меняется: значок 24 на 24. Ширину и высоту задают отдельно: у строки списка ширина fill, высота hug. Типичная ошибка — оставить всё fixed: раскладка вроде включена, а длинный текст вылезает за край.

Выравнивание и space between

Если места больше, чем нужно, детей выравнивают к началу, к середине или к концу. Особый режим — space between: первый ребёнок у начала, последний у конца, остальные поровну между. Так собирают шапку: логотип слева, корзина справа на любой ширине экрана.

Текст и min, max

Текст с шириной hug — одна строка, растущая вправо. Текст с шириной fill или fixed переносится на новые строки, а фрейм с высотой hug растёт вниз — так длинное название не ломает карточку. У растущих блоков задают максимальную ширину: абзац на ноутбуке не шире 680, иначе строка станет длиннее, чем глаз удерживает.

Частые вопросы

Что такое auto layout в Figma простыми словами?

Это режим фрейма, в котором содержимое расставляется автоматически по правилам: направление, промежуток и внутренние отступы. Блок подстраивается под содержимое и под размер родителя без ручного перетаскивания.

Чем hug отличается от fill?

Hug подгоняет размер слоя под его содержимое, а fill растягивает слой на всё свободное место в родительском фрейме. Кнопка обычно hug по ширине, поле ввода — fill.

Где потренировать auto layout без Figma?

В курсе Figma на Lil Teach есть учебный редактор макета прямо в уроках: в нём включают раскладку, задают hug и fill, а проверка подставляет длинную надпись и смотрит, подстроилась ли кнопка.

Где потренироваться

Auto layout — тема урока «Auto layout: блоки, которые подстраиваются» курса Figma; задания там выполняются в учебном редакторе прямо на странице. Основы — в уроке «Фреймы и сетки: размеры экранов и шаг 8». Без регистрации — тренажёр по Figma, а как то же устроено в вёрстке — статья «Flexbox простыми словами».