Auto Layout в Figma: карточка, которая выдерживает длинный текст

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

Подготовьте содержание карточки

Для учебного примера возьмите заголовок, описание и кнопку. Разместите их в понятном порядке без десятка декоративных слоёв. Выделите элементы и примените Auto Layout; в официальной справке Figma указан вариант через Shift+A. Названия элементов интерфейса могут зависеть от локализации и обновления редактора. Выберите вертикальное направление для карточки. Задайте внешние внутренние отступы контейнера и расстояние между дочерними элементами. Не имитируйте отступы пустыми строками текста: такое решение ломается при изменении содержания.

Три режима размера

Не пытайтесь одновременно заставить родителя целиком зависеть от ребёнка и ребёнка — заполнять неопределённый размер родителя по той же оси. Проверяйте, на каком уровне задано ограничение. Именно вложенность часто объясняет «неработающий Fill».

Соберите кнопку отдельным контейнером

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

Проверьте длинный текст

Замените короткий заголовок на несколько слов, которые не помещаются в одну строку. Карточка должна сохранить отступы, а текст — переноситься без наложения на кнопку. Затем сократите описание до одного предложения и проверьте обратное изменение.

Для следующей проверки измените ширину родительского блока. Следите отдельно за текстом, кнопкой и вложенными контейнерами. Перетаскивание края рамки без понимания режимов может дать случайно правильный результат только в одном размере.

Почему макет ломается

Частые причины: лишняя фиксированная высота, неверный режим ширины текста, абсолютное позиционирование элемента, которому нужно оставаться в потоке, и отступы, нарисованные отдельными объектами. Исправляйте одну причину за раз, наблюдая за изменением. Полезное упражнение — сделать набор из трёх карточек с разным количеством текста. Если каждая требует ручной подгонки, правила ещё не работают как система. На курсе графического дизайна в Figma уточните, какие проекты и приёмы редактора используются сейчас, и принесите свой пример на разбор. Конкретный модуль Auto Layout следует подтвердить в программе курса.

Источники и материалы для проверки: Figma: руководство по Auto Layout.

Читайте также: Figma для подростка с нуля: как сделать первый макет.