Auto Layout значительно упрощает процесс проектирования в Figma. В этом мастер-классе мы разберем его работу шаг за шагом, научимся создавать гибкие и адаптивные дизайны.
Auto Layout — мощный инструмент, который позволяет создавать фреймы, автоматически изменяющиеся в зависимости от заданных параметров. С его помощью можно контролировать такие параметры, как расстояние между элементами, их выравнивание и отступы. Это означает, что фрейм будет адаптироваться под содержимое, а содержимое — под фрейм.
При добавлении или удалении объектов Auto Layout автоматически корректирует расположение элементов. Вам больше не придется вручную изменять размеры, выравнивать или передвигать элементы — Auto Layout сделает это за вас.
Эта функция не только экономит время при создании макетов, но и помогает поддерживать порядок в слоях, а также сохранять консистентность дизайна. Это особенно важно при работе над сложными проектами или в команде. Поэтому важно освоить Auto Layout и научиться его эффективно использовать.
Давайте начнем!
Первые шаги
Чтобы добавить Auto Layout к фрейму или объекту, используйте один из трех способов:
- Нажмите кнопку «+» в разделе Auto Layout на правой панели.
- Используйте сочетание клавиш SHIFT + A.
- Щелкните правой кнопкой мыши по выделенному объекту и выберите «Add Auto Layout».
После активации Auto Layout автоматически подстроит фрейм и его содержимое. Можно также выбрать несколько объектов и включить Auto Layout — в этом случае будет создан новый фрейм, содержащий все выбранные элементы.
По умолчанию свойства Auto Layout имеют стандартные значения, но их можно настроить вручную. Далее мы подробно разберем каждую настройку.
Исследуем свойства Auto Layout
Direction (Направление)
Свойство Direction определяет, как будут располагаться элементы: горизонтально или вертикально.
- Horizontal — объекты размещаются в один ряд.
- Vertical — элементы располагаются друг под другом.
Чтобы изменить направление, используйте стрелки в правой панели, как показано ниже.
Важно помнить, что в Auto Layout можно задать только одно направление (горизонтальное или вертикальное) за раз. Если требуется расположить элементы в обеих плоскостях, нужно вкладывать один Auto Layout фрейм в другой. Однако пока не стоит беспокоиться о вложенности — мы рассмотрим это позже.
Padding (Отступы)
Padding отвечает за пространство внутри фрейма и вокруг его границ. Он может быть настроен двумя способами:
- Вертикальные и горизонтальные отступы
- Первый параметр задает вертикальные отступы (сверху и снизу).
- Второй параметр отвечает за горизонтальные отступы (слева и справа).
- Независимые отступы (Individual Padding)
- Позволяет установить разное значение отступов для каждой стороны отдельно.
- Чтобы включить эту опцию, нажмите иконку независимых отступов, после чего появятся четыре отдельных поля для ввода значений (верхний, правый, нижний, левый).
Кроме того, Auto Layout позволяет настраивать расстояние между элементами внутри фрейма. Этот параметр называется Gap (интервал), и он определяет, насколько далеко друг от друга расположены объекты внутри Auto Layout контейнера.
Вы можете изменять Padding и Gap двумя способами:
- Перетаскивая специальные маркеры прямо на холсте.
- Вводя точные числовые значения в правой панели.
Расстояние между элементами (Spacing)
Spacing — это расстояние между объектами внутри Auto Layout фрейма.
- Чем больше значение Spacing, тем больше будет промежуток между элементами.
- Этот параметр одинаково применяется ко всем элементам внутри Auto Layout контейнера.
Как и Padding, Spacing можно изменять вручную:
- Перетаскивая маркеры на холсте.
- Вводя точные числовые значения в правой панели.
Alignment (Выравнивание)
Alignment отвечает за позиционирование элементов внутри фрейма. Всего существует 9 вариантов выравнивания:
- Верхний левый
- Верхний центр
- Верхний правый
- Левый край
- Центр
- Правый край
- Нижний левый
- Нижний центр
- Нижний правый
Однако если для Spacing Mode установлено значение Space Between, количество доступных вариантов выравнивания будет ограничено. Это связано с тем, что элементы автоматически распределяются по ширине или высоте фрейма.
В этом случае останутся только 3 варианта выравнивания:
- При горизонтальном направлении: Верх, Центр, Низ.
- При вертикальном направлении: Лево, Центр, Право.
Таким образом, Auto Layout в Figma позволяет легко управлять расположением и адаптацией элементов, что делает процесс дизайна более гибким и удобным.
Resizing (Изменение размеров)
Параметр Resizing управляет размером элементов в вашем дизайне. Он применяется как к родительским фреймам, так и к вложенным компонентам. Вы можете отдельно настраивать параметры изменения размеров по ширине и высоте для каждого объекта.
Чтобы изменить размеры, используйте настройки H (Height, Высота) и W (Width, Ширина) в правой панели.
Рассмотрим каждый вариант изменения размеров по порядку.
1. Fixed (Фиксированный размер)
При выборе параметра Fixed (фиксированный размер) высота и ширина объекта остаются неизменными независимо от содержимого или размера родительского фрейма, если он есть.
В приведённом ниже примере все объекты имеют фиксированные размеры по высоте и ширине. Обратите внимание: если изменить размер одного из объектов, остальные останутся без изменений.
Этот параметр можно применять как к родительским фреймам, так и к вложенным компонентам.
2. Hug Contents (Подстраивание под содержимое)
При выборе параметра Hug Contents размер фрейма автоматически подстраивается под его содержимое.
- Фрейм сжимается или расширяется, чтобы окружить все элементы внутри.
- При расчёте размеров фрейма учитываются размеры вложенных объектов, интервалы между ними и отступы (Padding).
В примере ниже у родительского фрейма высота и ширина установлены в Hug Contents. Обратите внимание: размер фрейма изменяется при изменении вложенных элементов.
Важно: Опция Hug Contents может быть применена только к родительским фреймам или текстовым контейнерам.
3. Fill Container (Заполнение контейнера)
При выборе Fill Container элемент растягивается или сжимается, чтобы заполнить доступное пространство внутри родительского фрейма.
Если у элемента установлено Fill Container для высоты и/или ширины, его размеры динамически изменяются и адаптируются к доступному пространству.
В примере ниже у вложенных элементов установлено Fill Container, поэтому они автоматически изменяют свои размеры при изменении размеров родительского фрейма.
Важно: Опция Fill Container может быть применена только к вложенным элементам, а не к родительскому фрейму.
Таким образом, выбор между Fixed, Hug Contents и Fill Container зависит от того, требуется ли вам фиксированный размер, адаптация под содержимое или динамическое заполнение контейнера.
Режим распределения элементов (Spacing Mode)
Дополнительные настройки макета в Auto Layout можно найти, нажав на значок «…» в панели справа. Одна из них — Spacing Mode, которая определяет, как располагаются элементы внутри фрейма.
В Auto Layout доступно два режима распределения элементов:
Фиксированный режим — элементы располагаются на основе фиксированного значения параметра Gap (расстояние между элементами). Это означает, что объекты будут сгруппированы с одинаковым расстоянием между ними, независимо от того, насколько велик или мал фрейм.
Auto (Равномерное распределение) — фиксированное значение Gap игнорируется, и элементы равномерно распределяются по всей ширине или высоте фрейма (в зависимости от заданного направления). В этом режиме расстояние между элементами автоматически изменяется в зависимости от размера фрейма.
Примечание:
- Если направление вертикальное, элементы выравниваются по оси y.
- Если направление горизонтальное, элементы выравниваются по оси x.
Strokes (Обводка)
В Figma добавленная к объекту обводка (stroke) не входит в его размер. По умолчанию Auto Layout игнорирует обводку, и её толщина не учитывается при расчёте Padding (отступов) и Spacing (расстояния между элементами).
Если необходимо учитывать толщину обводки в макете, выполните следующие шаги:
- Перейдите в меню Auto Layout Settings.
- В разделе Stroke выберите Included in layout (Включить в макет).
После этого Auto Layout скорректирует размеры фрейма с учётом пространства, занимаемого обводкой.
Важно: Этот параметр работает только в Auto Layout и не изменяет фактический размер объектов.
Порядок наложения на холсте (Canvas Stacking)
Настройка Canvas Stacking находится в меню Auto Layout settings и управляет визуальным порядком слоёв в Auto Layout.
Вы можете выбрать один из двух режимов:
- First on top (Первый сверху) — первый элемент в Auto Layout будет поверх остальных.
- Last on top (Последний сверху) — последний элемент будет находиться выше всех остальных.
Эта настройка не влияет на порядок слоёв в панели слоёв слева, а меняет только их визуальное наложение.
Настройка Canvas Stacking особенно полезна, если используется отрицательное расстояние между элементами (negative spacing), поскольку она помогает управлять наложением объектов.
Выравнивание по базовой линии текста (Text Baseline Alignment)
Последний параметр в Auto Layout settings — Text Baseline Alignment. При включении этой настройки элементы выравниваются по базовой линии текста, а их расположение рассчитывается относительно неё.
При активном Text Baseline Alignment доступны только три варианта выравнивания:
- Left (По левому краю)
- Center (По центру)
- Right (По правому краю)
Ограничения:
- Эта функция доступна только для горизонтального направления (Horizontal Direction).
- Внутри фрейма должен находиться текстовый компонент.
Эта настройка помогает создать более аккуратные макеты с текстовыми элементами, особенно в ситуациях, когда элементы с разным размером шрифта должны быть визуально выровнены по текстовой строке.
Absolute Position/Ignore Auto Layout (Абсолютное позиционирование)
Что делать, если Auto Layout подходит для макета, но некоторые элементы не должны подчиняться его правилам? Нужно ли использовать обычный фрейм вместо Auto Layout?
На самом деле, можно сочетать Auto Layout и независимые элементы в одном и том же фрейме, используя функцию Absolute Position / Ignore Auto Layout.
Если включить Ignore Auto Layout для объекта внутри Auto Layout, то этот объект перестанет следовать правилам Auto Layout. Это означает, что его можно разместить в любом месте внутри фрейма, не изменяя размер и положение при изменении других параметров Auto Layout. Однако к такому элементу всё ещё можно применять стандартные ограничения (Constraints).
Теперь ваша очередь!
Auto Layout в Figma — это мощный инструмент для создания упорядоченных и масштабируемых дизайнов. Если вы прошли этот мастер-класс, значит, уже находитесь на пути к освоению Auto Layout и оптимизации своего рабочего процесса.
Теперь пришло время применить полученные знания! Экспериментируйте, пробуйте новые методы и получайте удовольствие от процесса.
Спасибо за внимание, и удачного дизайна! 🎨🚀