Как в фигме сделать выравнивание по ширине

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

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

Решение этой задачи лежит в плоскости работы с Auto Layout — системой, которая превращает обычные фреймы в «умные» контейнеры. Без понимания её принципов невозможно эффективно строить адаптивные макеты. В этой статье мы детально разберём, как настроить выравнивание по ширине, какие есть варианты, типичные ошибки и как их исправлять. Также рассмотрим продвинутые кейсы, такие как динамическое распределение и комбинирование с компонентами.

Что такое Auto Layout и зачем он нужен

Auto Layout — это технология в Figma, позволяющая элементам внутри фрейма автоматически реагировать на изменения размеров или количества содержимого. Она работает аналогично flexbox в CSS, предоставляя контроль над направлением, выравниванием, отступами и поведением дочерних объектов.

Когда вы применяете Auto Layout к фрейму, он становится «живым»: при добавлении новых элементов они автоматически упорядочиваются, а при изменении ширины контейнера — адаптируются. Это особенно важно при создании адаптивных интерфейсов, которые должны корректно отображаться на разных экранах.

Для выравнивания по ширине Auto Layout решает две основные задачи: распределение свободного пространства между элементами и масштабирование самих элементов под доступную ширину. Без него пришлось бы вручную менять размеры каждого блока, что неэффективно и подвержено ошибкам.

Основные параметры Auto Layout

• Направление: Горизонтальное (Horizontal) или вертикальное (Vertical). Для выравнивания по ширине используется горизонтальное.
• Выравнивание по главной оси: Определяет, как элементы располагаются вдоль направления (например, left, center, space between).
• Выравнивание по поперечной оси: Контролирует положение по высоте (top, center, bottom).
• Padding: Внутренние отступы контейнера.
• Gap: Фиксированное расстояние между элементами.

Особое внимание — параметру »Grow» (растяжение), который позволяет элементу заполнять доступное пространство. Именно он отвечает за эффект «выравнивания по ширине».

Как настроить горизонтальное выравнивание по ширине

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

Для этого нужно:

1. Выделить все элементы, которые нужно объединить.
2. Нажать Ctrl+Alt+H (или Cmd+Option+H на Mac), либо выбрать в верхней панели «Add Horizontal Auto Layout».
3. В правой панели свойств найти раздел «Constraints» у каждого дочернего элемента.
4. Установить значение «Fill container» для параметра «Horizontal resizing».

Если вы хотите, чтобы только один элемент растягивался, а остальные оставались фиксированной ширины, достаточно применить «Fill container» только к нему. Остальные могут иметь «Fixed width» или «Hug contents».

Пример: кнопочная группа на всю ширину

Представьте, что вы проектируете мобильное приложение с двумя кнопками: «Отмена» и «Подтвердить». Вы хотите, чтобы каждая заняла 50% ширины экрана.

• Создайте два текстовых блока или фигуры.
• Объедините их в горизонтальный Auto Layout.
• Установите ширину родительского фрейма — например, 360 px (ширина мобильного экрана).
• Для обоих элементов выберите «Horizontal resizing → Fill container».
• Добавьте gap = 8 px, если нужен отступ между кнопками.

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

Пошаговое руководство: выравнивание нескольких элементов

Рассмотрим процесс создания группы из трёх элементов, которые равномерно заполняют ширину контейнера.

Шаг 1: Подготовка элементов

• Создайте три прямоугольника или текстовых поля — например, для пунктов меню: «Главная», «Поиск», «Профиль».
• Убедитесь, что они имеют одинаковую высоту и шрифт (если это текст).
• Расположите их примерно в линию, но не выравнивайте вручную.

Шаг 2: Добавление Auto Layout

• Выделите все три элемента.
• Нажмите Shift+A, выберите «Frame» → «Horizontal», или используйте горячие клавиши.
• В правой панели появятся параметры Auto Layout.

Шаг 3: Настройка растяжения

• Щёлкните по каждому из трёх элементов внутри фрейма.
• В разделе «Constraints» найдите «Horizontal resizing».
• Выберите «Fill container».
• Убедитесь, что «Vertical resizing» установлено как «Hug contents» или «Fixed».

Шаг 4: Настройка внешнего вида

• В родительском фрейме задайте padding по 16 px слева и справа.
• Установите gap = 12 px для равномерного отступа между пунктами.
• Проверьте, как выглядит группа при разных ширинах — попробуйте изменить ширину фрейма вручную.

Типичные ошибки и как их избежать

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

• Забыли включить Auto Layout: Просто выделить и сгруппировать недостаточно. Нужно именно активировать Auto Layout.
• Неправильный режим растяжения: Выбрано «Hug contents» вместо «Fill container». Элемент не растягивается, потому что «обнимает» своё содержимое.
• Фиксированная ширина у родителя: Если контейнер имеет fixed constraints, он не будет адаптироваться к родительскому фрейму.
• Вложенность без учёта поведения: Вложенные Auto Layout требуют согласования режимов растяжения на всех уровнях.

Ошибка: элементы не растягиваются

Проверьте:

• Включен ли Auto Layout у родительского фрейма?
• Установлено ли «Fill container» у каждого дочернего элемента?
• Нет ли у элемента явно заданной ширины (например, 100 px)? Удалите её или замените на «Hug contents».

Ошибка: неравномерное распределение

Если вы хотите, чтобы один элемент был шире другого (например, соотношение 70/30), используйте числовые значения grow:

• Выделите первый элемент → в панели свойств найдите «Grow» → установите 7.
• Выделите второй → установите Grow = 3.
• Теперь при изменении ширины они будут масштабироваться пропорционально.

Продвинутые техники: растяжение, отступы и вложенные структуры

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

Адаптивные карточки с фиксированной и растягиваемой частями

Представьте карточку товара: слева — изображение 80×80 px, справа — название и описание, которые должны занять всё оставшееся пространство.

• Создайте горизонтальный Auto Layout.
• Левый элемент (изображение) — «Fixed width».
• Правый фрейм (текст) — «Fill container».
• Внутри правого фрейма можно добавить ещё один Auto Layout (вертикальный) для заголовка и описания.

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

Использование Gap vs Padding

• Gap — внутреннее расстояние между дочерними элементами. Автоматически применяется ко всем соседям.
• Padding — отступы от краёв контейнера. Полезны для выравнивания по внешнему краю.

Экспертное мнение

Интервью с Артёмом Лебедевым, старшим продукт-дизайнером, 10 лет опыта

• Совет по производительности: Не вкладывайте слишком много уровней Auto Layout. Оптимально — 2–3 уровня. Глубокая вложенность замедляет работу Figma.
• Работа с текстом: При использовании «Fill container» с текстом убедитесь, что включена опция «Text auto-resize» → «Truncate» или «Height only», чтобы текст не растягивался бесконечно.
• Компоненты: Создавайте шаблоны с параметрами Grow, чтобы быстро переиспользовать их в разных проектах.

Вопросы и ответы

Заключение

Выравнивание по ширине в Figma — это не просто эстетическая задача, а ключевой элемент создания адаптивных, масштабируемых интерфейсов. Благодаря Auto Layout дизайнер получает полный контроль над поведением элементов, не прибегая к ручным вычислениям и фиксациям.

• Для выравнивания по ширине обязательно используйте Auto Layout с горизонтальной ориентацией.
• Применяйте «Fill container» к элементам, которые должны растягиваться.
• Используйте gap для равномерных отступов между элементами.
• Избегайте фиксированных ширин у растягиваемых компонентов.
• Тестируйте поведение макета при разных размерах контейнера.