Что такое Auto Layout и зачем он нужен
Figma давно стала стандартом для проектирования интерфейсов. Но даже опытные дизайнеры тратят лишнее время на ручное выравнивание элементов, если не используют Auto Layout. Этот инструмент превращает статичные макеты в адаптивные конструкции, где отступы, размеры и расположение элементов регулируются автоматически.
Разница заметна сразу. Без Auto Layout изменение одного текста в кнопке требует вручную двигать иконку, фон, рамку. С Auto Layout кнопка сама растянется или сожмется под новый текст, сохранив все заданные отступы. По данным практики, веб-студии, перешедшие на Auto Layout при работе с лендингами, сократили время адаптации макетов под мобильные устройства с 2-3 часов до 20 минут.
Фреймы как основа макета
Auto Layout работает внутри фреймов. Фрейм в Figma ближе к div в HTML, чем к группе: он задает границы, клипирует содержимое и управляет поведением вложенных элементов.
Главные свойства фрейма, на которые стоит обратить внимание:
- Clip Content скрывает элементы, выходящие за границы фрейма. Включайте, когда нужно обрезать изображение по карточке или скрыть избыточный текст.
- Constraints определяет, как элемент ведет себя при изменении размера родителя. Настройки Left, Right, Center, Scale, Left and Right дают гибкий контроль над поведением на разных экранах.
- Auto Layout direction: вертикальное направление (элементы столбцом) подходит для списков и карточек товаров, горизонтальное (строкой), для навигации и кнопок с иконками.
Как включить Auto Layout
Включить Auto Layout можно тремя способами:
- Выделить элемент и нажать Shift + A.
- Использовать пункт Add Auto Layout в правой панели.
- Кликнуть правой кнопкой мыши по элементу и выбрать Add Auto Layout в контекстном меню.
После включения на правой панели появляются настройки: направление (Direction), промежутки между элементами (Gap), внутренние отступы (Padding) и поведение размера.
Отступы: Gap и Padding
Два параметра определяют внутреннюю структуру контейнера:
- Gap регулирует расстояние между соседними элементами внутри одного фрейма с Auto Layout.
- Padding задает пространство от границ контейнера до содержимого, чтобы текст или иконка не прилипали к краям.
Практический совет: используйте 4px grid это отступы, кратные 4 (8, 12, 16 и т. д.). Так значения всегда делятся без дробной части и корректно отображаются на экранах с разной плотностью пикселей. Этот принцип лежит в основе дизайн-системы Google Material Design.
Даже при массовых изменениях или добавлении новых элементов внутри фрейма отступы сохраняются автоматически. Если добавить новый пункт в выпадающее меню, всё останется ровным без ручных правок.
Поведение размеров: Hug, Fill, Fixed
Три режима определяют, как элемент реагирует на изменения:
- Hug Contents: элемент подстраивается под своё содержимое и сохраняет заданные отступы. Кнопка с Hug Contents всегда будет ровно под размер текста внутри неё.
- Fill Container: элемент растягивается и занимает всё доступное пространство внутри родительского контейнера. Полезно для текстовых полей в форме: одно поле с Fill Container займет всё свободное место между соседними полями.
- Fixed: фиксированный размер, не зависящий от содержимого или родителя.
Дополнительно работают Minimum/Maximum Dimensions: ограничения, которые задают допустимый диапазон размеров. Например, кнопка может быть не уже 120px и не шире 320px.
Продвинутые возможности Auto Layout
Перенос строк (Wrap)
Когда элементы не помещаются в одну строку, включите Wrap: они автоматически переносятся на следующую строку. Полезно для тегов, чипов и коллекций иконок, где количество элементов меняется.
Canvas Stacking
При отрицательных отступах элементы перекрываются. Canvas Stacking управляет порядком отображения объектов в таком случае: можно задать, какой элемент находится поверх какого.
Baseline Alignment
Если в макете несколько строк текста разной высоты или с вложенными фреймами, включите Align Text Baseline. Все надписи выровняются по общей базовой линии, даже если внутри есть буквы разного размера.
Absolute Position
Декоративные элементы внутри Auto Layout контейнера можно перевести в режим Absolute Position. Они игнорируют правила контейнера и могут располагаться в любом месте без влияния на остальную раскладку.
Когда Auto Layout не нужен
Auto Layout решает не все задачи. Для сложных бенто-сеток, где элементы занимают произвольные ячейки сетки, лучше подходят стандартная Grid или фреймы с Constraints. Сложные нерегулярные макеты, где соседние элементы должны иметь отступы разных размеров, требуют создания нескольких вложенных Auto Layout это усложняет структуру файла.
Компоненты: массовое редактирование
Компоненты в Figma работают как повторно используемые блоки. Главный компонент (Main Component) хранит эталон, а его копии (Instances) можно размещать по всему макету. Изменение в главном компоненте мгновенно применяется ко всем экземплярам.
В связке с Auto Layout компоненты дают максимальный эффект:
- Кнопка-компонент с Auto Layout автоматически подстраивается под любой текст, сохраняя заданные отступы.
- Карточка-компонент с переменным материалом корректно растягивается независимо от длины заголовка.
- Навигационная строка-компонент сама перераспределяет пункты меню при добавлении нового раздела.
Типичные ошибки и как их исправить
Несколько проблем, с которыми сталкиваются при первом знакомстве с Auto Layout:
- Элементы выходят за границы: включите Clip Content в настройках фрейма.
- Контейнер не растягивается: переключите режим размера с Fixed на Fill Container или Hug Contents.
- Отступы «съезжают» при добавлении элемента: проверьте, что Gap задан в Auto Layout, а не вручную через X/Y координаты.
- Элементы выстраиваются не в ту сторону: поменяйте Direction с горизонтального на вертикальное или обратно.
- Разные отступы у однотипных элементов: проверьте, что Padding одинаковый у всех экземпляров компонента.
Практические советы для начала работы
Если вы только начинаете осваивать Auto Layout:
- Начинайте с простых элементов: кнопки, теги, строки ввода. Они дают быстрый результат без сложных вложений.
- Затем переходите к карточкам и блокам с переменным материалом.
- На третьем этапе: сложные компоненты: таблицы, адаптивные сетки, навигационные панели.
- Используйте 4px grid с самого начала, чтобы не переделывать позже.
- Если что-то идет не так: проверьте Direction, Gap и режим размера (Hug/Fill/Fixed). В 90% случаев причина в одном из этих трех параметров.
Auto Layout вместе с компонентами превращает Figma из инструмента рисования в полноценную систему для проектирования интерфейсов. Макеты становятся живыми: они адаптируются к материалу, масштабируются под разные экраны и не требуют постоянного ручного выравнивания при правках.
