Scott
Кнопка должна расширяться вместе с надписью, а карточка — сохранять отступы, когда заголовок занимает две строки. Автолейаут в Figma позволяет задать эти правила один раз вместо ручного перемещения каждого слоя.
Разберём направление элементов, внутренние отступы, интервалы и размеры на примере кнопки и карточки. После настройки подставьте длинный текст: именно на изменяющемся содержимом видно, правильно ли собран блок.
1. Что такое автолейаут в Figma
Автолейаут (Auto Layout) — способ организовать дочерние элементы внутри фрейма. Вы задаёте направление, расстояния и правила размеров, а редактор размещает содержимое с учётом этих настроек.
Это инструмент для макета: он помогает показать, как блок должен реагировать на изменения, но не создаёт готовую адаптивную страницу в коде.
В повседневной работе автолейаут помогает:
- Сохранять отступы вокруг текста при изменении надписи на кнопке.
- Перестраивать расположение карточек и строк при изменении размера контейнера.
- Использовать одни и те же правила в повторяемых компонентах.
2. Пятнадцать приёмов работы с автолейаутом
Начните с простого блока. Добавляйте вложенность и дополнительные настройки только тогда, когда этого требует содержание.
1. Создайте первый контейнер
Выделите текст или несколько слоёв и добавьте Auto Layout. Для первых упражнений достаточно надписи и иконки внутри кнопки.
- Shift + A добавляет автолейаут к выбранным элементам.
- Чтобы убрать автолейаут, используйте соответствующую команду в панели свойств или контекстном меню.
- После изменения типа контейнера проверьте положение дочерних слоёв.
- Если нужно повторить оформление, скопируйте свойства через контекстное меню.
- Вставив свойства, проверьте размеры, отступы и поведение текста.
- Дублируйте готовый блок и меняйте его содержимое, чтобы проверить правила на нескольких вариантах.
2. Выберите направление
Горизонтальное расположение подходит для иконки с подписью или строки кнопок. Вертикальное — для карточки с заголовком, описанием и действием. Вложенные контейнеры позволяют сочетать эти варианты.
Сначала определите порядок чтения. Затем выберите направление на панели Auto Layout и проверьте, совпадает ли порядок слоёв с расположением элементов на холсте.
3. Настройте внутренние отступы
Padding — расстояние от края контейнера до его содержимого. Задайте одинаковые отступы или отдельные значения сверху, справа, снизу и слева. Для кнопки, например, горизонтальные отступы могут быть больше вертикальных.
Меняйте значения на панели или маркерами на холсте. После настройки замените короткую надпись длинной и убедитесь, что текст не касается краёв.
4. Выберите правила размера
Размеры контейнера и вложенных элементов настраиваются отдельно по ширине и высоте. Три основных режима решают разные задачи:
- Fixed width / height — фиксированный размер выбранного объекта по соответствующей оси.
- Hug contents — размер контейнера подстраивается под дочерние элементы и внутренние отступы.
- Fill container — вложенный элемент занимает доступное пространство родительского контейнера.
5. Настройте выравнивание
Выравнивание определяет положение содержимого внутри свободной области контейнера. Например, подпись можно расположить по центру кнопки, а строки карточки — по левому краю.
Сначала выберите направление и способ распределения, затем задайте выравнивание. Проверьте короткое и длинное содержимое: удачное положение на одном примере не гарантирует такой же результат на другом.
6. Разместите элемент вне потока
Ignore auto layout позволяет оставить слой внутри фрейма, но исключить его из обычной компоновки. Это удобно для значка уведомления или кнопки закрытия поверх карточки.
Выберите нужный слой, включите Ignore auto layout и задайте его положение. Уточните ограничения относительно родительского фрейма, чтобы значок не смещался неожиданно при изменении размеров.
7. Задайте интервалы между элементами
Gap — расстояние между соседними элементами контейнера. Не путайте его с padding: внутренние отступы находятся у границ блока, а интервалы разделяют его содержимое.
Задайте числовое значение и сравните группировку. Для намеренного перекрытия объектов можно использовать отрицательный интервал; убедитесь, что перекрытие не скрывает важные данные.
8. Измените порядок элементов
Перемещайте дочерние слои внутри контейнера и следите за порядком на панели слоёв. Для карточки полезно отдельно проверить положение заголовка, описания и кнопки.
- Перетащите слой на нужное место внутри контейнера.
- Проверьте порядок при изменении направления и вложенности.
9. Выровняйте текст по базовой линии
Базовая линия — ориентир, на котором располагается основная часть знаков. Такое выравнивание полезно, например, для цены и пояснения, набранных разными размерами.
Включите выравнивание по базовой линии в доступных настройках горизонтального контейнера. Проверьте результат на реальных шрифтах: визуальные размеры иконки также могут потребовать уточнения.
10. Продумайте длинный текст
Решите, должен ли текст переноситься, увеличивать высоту блока или сокращаться. Это продуктовое решение: обрезанная подпись может скрыть важную информацию.
Если выбрано сокращение с многоточием, предусмотрите способ увидеть полный текст. Для описаний карточек часто лучше позволить блоку расти по высоте.
11. Учитывайте обводку
Обводка может влиять на доступное место внутри блока. После изменения её толщины проверьте размер контейнера и положение содержимого. Для точной передачи разработчику укажите, где проходит обводка относительно границы.
12. Распределите свободное место
Gap можно задать числом или выбрать Auto для автоматического распределения свободного пространства. Сравните варианты Between, Around и Evenly на своём блоке. Подробности есть в официальном руководстве Figma.
13. Работайте с вложенными контейнерами
В сложной карточке удобно разделить задачи: один контейнер объединяет весь блок, другой — иконку с подписью, третий — кнопки. Называйте слои по назначению, чтобы быстрее находить нужный уровень.
- Выбирайте дочерние слои через панель слоёв или команды навигации по вложенности.
- При изменении родительского фрейма проверяйте настройки его дочерних элементов.
- Если выбрано несколько уровней, сначала уточните, к какому контейнеру относится изменяемое свойство.
- Проверяйте соседние элементы после правки одного вложенного блока.
14. Следите за вложением при перетаскивании
После перемещения объекта посмотрите, в какой фрейм он попал. Если слой стал дочерним элементом не того контейнера, перенесите его на нужный уровень через панель слоёв.
15. Проверяйте контейнеры с малой высотой
Служебный контейнер с очень малой высотой иногда используют для особого расположения вложенных объектов. Перед таким решением проверьте обычное выравнивание и Ignore auto layout. Если небольшой контейнер всё же нужен, убедитесь, что содержимое не обрезается и структура остаётся понятной команде.
3. Как применять автолейаут в компонентах
Выбирайте настройки по задаче
Не каждый объект нужно включать в поток. Для иллюстрации или свободной композиции обычный фрейм может быть удобнее. Используйте автолейаут там, где элементы связаны правилами расположения. Если в одной карточке нужно совместить рост текста и кнопку поверх содержимого, разберите, как выбирать и сочетать привязки и Auto Layout.
Проверяйте варианты компонента
Создайте компонент кнопки и проверьте короткую надпись, длинную надпись и вариант с иконкой. Затем используйте экземпляры. Изменения основного компонента сохраняют общую структуру, а локальные переопределения нужно учитывать отдельно.
4. Продолжение работы в Pixso
В Pixso также можно настраивать автоматическую компоновку. После импорта файла сравните поведение кнопок и карточек: замените текст и измените ширину контейнера. Для совместной работы выберите подходящие тарифы Pixso.
Узнайте больше о возможностях Pixso >>
Начните с одного повторяемого блока
Соберите кнопку или карточку, задайте отступы и правила размеров, затем проверьте несколько вариантов содержания. Хорошо настроенный небольшой компонент полезнее сложной вложенной структуры, которую команда не понимает.
