Разбираемся с Auto Layout на простых примерах

Это функция Figma, которая автоматически располагает элементы внутри Frame по заданным правилам и помогает управлять направлением, расстояниями, отступами и изменением размеров содержимого.

Это режим, при котором размер контейнера автоматически подстраивается под находящиеся внутри элементы с учётом заданных отступов.

Это режим, при котором элемент растягивается и занимает доступное пространство внутри родительского Auto Layout.

Это режим фиксированного размера, при котором ширина или высота элемента задаётся конкретным значением и не меняется автоматически вслед за содержимым или контейнером.

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

Это способ расположения нескольких текстовых элементов разного размера так, чтобы их базовые линии находились на одном уровне.

В уроке знакомимся с Auto Layout в Figma и постепенно разбираем его основные настройки. Научимся автоматически выстраивать элементы, задавать расстояния и внутренние отступы, работать с Hug contents, Fill container, вложенными группами и разными вариантами выравнивания.

Auto Layout помогает автоматизировать работу с повторяющимися и связанными элементами. Вместо того чтобы вручную передвигать каждый объект после изменения текста, удаления пункта или добавления нового элемента, можно заранее задать правила, по которым композиция будет перестраиваться сама.

Это удобно, например, при работе с:

• пунктами меню;
• карточками каталога;
• кнопками;
• списками;
• группами текста;
• повторяющимися интерфейсными элементами.

Если добавить, удалить или поменять местами объект внутри Auto Layout, остальные элементы автоматически перестроятся, сохраняя заданные расстояния.

Auto Layout может использоваться в сложных карточках и интерфейсах, но на первых этапах проще разобраться в нём на примитивных объектах.

Это могут быть квадраты, круги, треугольники или любые другие фигуры. Их цвет, заливка или содержимое не имеют принципиального значения.

Главная задача — понять саму логику работы:

• как элементы попадают внутрь Auto Layout;
• как задаётся направление;
• как меняются расстояния;
• как работает выравнивание;
• как контейнер реагирует на изменение содержимого.

После этого те же принципы значительно легче применять к реальным элементам сайта.

Чтобы создать Auto Layout, необходимо выделить несколько элементов.

Сделать это можно несколькими способами:

• через соответствующую функцию в правой панели;
• через контекстное меню;
• с помощью комбинации Shift + A.

Горячая клавиша — один из самых быстрых способов, особенно когда Auto Layout начинает постоянно использоваться в работе.

После применения функции элементы помещаются внутрь Frame с дополнительными настройками автоматического расположения.

Контейнер Auto Layout остаётся Frame, поэтому сохраняет знакомые возможности, например:

• Fill;
• Stroke;
• Clip content;
• скругления;
• размеры;
• другие параметры Frame.

Отличие заключается в том, что внутри него дополнительно работают правила автоматического расположения элементов.

Сам Frame можно переименовать так же, как и любой другой слой. Это особенно полезно, когда в макете появляется несколько вложенных Auto Layout.

В Auto Layout можно указать конкретное расстояние между соседними элементами.

Например:

• 20 px;
• 30 px;
• 50 px.

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

Расстояние можно изменить непосредственно в числовом поле или перетаскиванием. Для точной работы удобнее задавать конкретное значение вручную.

Объекты внутри Auto Layout можно переставлять без необходимости заново выстраивать всю композицию.

Для этого их можно:

• перетаскивать мышкой;
• перемещать стрелками;
• менять порядок непосредственно внутри контейнера.

Все остальные элементы автоматически занимают новые позиции, а заданные промежутки сохраняются.

Это особенно удобно для меню и других повторяющихся структур.

Если внутри Auto Layout находятся элементы разной высоты, можно выбрать способ их выравнивания:

• по верхнему краю;
• по центру;
• по нижнему краю.

Например, если один объект значительно выше остальных, размеры контейнера будут ориентироваться на самый крупный элемент, а остальные выстроятся относительно выбранной линии.

Если высота самого большого объекта меняется, размер Auto Layout также перестраивается.

Кроме расстояния между объектами, Auto Layout позволяет задавать отступы от содержимого до границ Frame.

Можно отдельно настроить:

• слева;
• справа;
• сверху;
• снизу.

Например, можно задать по 50 px со всех сторон. Тогда вокруг содержимого образуется равномерное пространство.

Если нужны разные значения, каждую сторону можно настроить отдельно.

Такие параметры особенно хорошо считываются, когда у контейнера есть заливка или обводка.

Поскольку Auto Layout является Frame, ему можно задать заливку.

Это позволяет сразу увидеть:

• реальные границы контейнера;
• внутренние отступы;
• положение содержимого;
• работу выравнивания.

На практике именно Auto Layout часто становится основой для кнопок, карточек и других элементов с подложкой.

Если включён режим Hug contents, ширина или высота контейнера определяется его содержимым.

Auto Layout как бы «обнимает» элементы внутри себя и учитывает:

• их размеры;
• расстояния между ними;
• внутренние отступы.

Если содержимое становится больше, контейнер увеличивается. Если меньше — уменьшается.

Это удобно, когда размер элемента должен зависеть именно от того, что находится внутри.

Если ширина или высота установлена в режиме Fixed, Auto Layout получает конкретное фиксированное значение.

Например, можно вручную растянуть контейнер, после чего его ширина перестанет автоматически подстраиваться под содержимое.

В такой ситуации настройки выравнивания определяют, где именно внутри свободного пространства окажутся элементы.

Поэтому если Auto Layout неожиданно перестаёт «обнимать» содержимое, стоит проверить, не переключился ли соответствующий параметр в Fixed.

Когда Frame становится шире или выше содержимого, появляется дополнительное свободное пространство.

Элементы можно расположить:

• слева;
• по центру;
• справа;
• сверху;
• по вертикальному центру;
• снизу.

Например, если выбрать центр, при любом изменении размера внешнего Frame содержимое продолжит оставаться в центре.

Это позволяет заранее определить, как группа должна вести себя внутри своего контейнера.

Иногда требуется обратная логика: не контейнер подстраивается под объект, а объект — под контейнер.

В таком случае используется Fill container.

Например, если внутреннему прямоугольнику задать Fill container по высоте, он растянется на доступную высоту Auto Layout за вычетом внутренних отступов.

Если выбрать Fill container и по ширине, объект начнёт занимать всё доступное пространство в обоих направлениях.

Необязательно использовать одинаковый режим сразу для двух измерений.

Например, элемент может:

• иметь Fixed по ширине и Fill container по высоте;
• Fill container по ширине и Fixed по высоте;
• растягиваться в обоих направлениях;
• сохранять фиксированный размер полностью.

Такие сочетания позволяют создавать более гибкие структуры.

Когда внутренние элементы используют Fill container, их размеры начинают зависеть от родительского контейнера.

Если менять ширину или высоту внешнего Auto Layout, внутренние объекты также перестраиваются.

Так можно создавать более «резиновое» поведение элементов и заранее понимать, как композиция будет реагировать на изменение доступного пространства.

Одна из ключевых возможностей — вложенность.

Внутри одного Auto Layout можно создать ещё один, а внутри него — следующий.

Например, если в одном общем ряду нужно:

• между двумя квадратами оставить 30 px;
• а между этой парой и другой группой сделать 60 px,

два связанных объекта можно объединить в отдельный Auto Layout и задать им собственное расстояние.

Внешний Auto Layout уже будет управлять расстоянием не между отдельными объектами, а между получившимися группами.

Логика похожа на систему «группа внутри группы».

Например:

• внешний Auto Layout отвечает за расстояния между карточками;
• внутренний — за элементы внутри карточки;
• ещё один вложенный Auto Layout может отвечать за текст и иконку.

Каждый уровень получает собственные настройки:

• направление;
• отступы;
• расстояния;
• заливку;
• обводку;
• скругления.

На первых этапах не стоит создавать слишком много уровней вложенности. Лучше использовать их только там, где они действительно помогают решить задачу.

Если внутри Auto Layout нужно создать копию уже существующего элемента, можно использовать Ctrl + D.

Новая копия сразу становится частью структуры и появляется рядом с исходным объектом.

Это особенно удобно при создании повторяющихся карточек, пунктов меню и других однотипных элементов.

Иногда нужно не задавать конкретное значение между объектами, а позволить Figma рассчитывать его самостоятельно.

Для этого используется режим Space between.

Элементы распределяются по доступной ширине контейнера, а промежутки между ними автоматически увеличиваются или уменьшаются.

Если контейнер становится шире, расстояния увеличиваются. Если уже — уменьшаются.

Такой режим полезен, когда элементы должны занимать всю доступную ширину.

При работе с текстом обычного выравнивания по верхнему, нижнему краю или центру иногда недостаточно.

Например, рядом находятся:

• крупный заголовок;
• небольшая текстовая ссылка.

Если просто выровнять их снизу, рамки могут совпасть, но сами буквы будут находиться на разных уровнях.

В таком случае полезно включить выравнивание по базовой линии.

Figma ориентируется не на нижние границы текстовых слоёв, а на положение самих символов. В результате тексты разного кегля визуально оказываются на одной линии.

В Auto Layout много взаимосвязанных параметров, поэтому на первых этапах легко запутаться. Важно не просто запомнить названия функций, а самостоятельно повторить действия из урока:

• создать Auto Layout;
• поменять направление;
• настроить расстояния;
• изменить внутренние отступы;
• попробовать Hug contents и Fixed;
• применить Fill container;
• создать вложенный Auto Layout;
• включить Space between;
• проверить работу Stroke;
• выровнять текст по базовой линии.

Чем больше таких действий выполняется самостоятельно, тем быстрее становится понятна общая логика функции.

Главная ценность Auto Layout заключается в том, что он избавляет от большого количества ручной работы. Элементы начинают автоматически перестраиваться, сохранять расстояния и реагировать на изменение содержимого.

На первых порах большое количество настроек может казаться сложным, поэтому лучше двигаться от простого к сложному. Сначала разобраться на нескольких фигурах, затем перейти к кнопкам, меню и карточкам и только после этого использовать более сложные вложенные конструкции.

Так Auto Layout постепенно превращается из непонятной функции в один из основных инструментов системной работы в Figma.

Перейти к следующему уроку