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

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

В этом задании Mentoring.digital важен воспроизводимый результат: заголовок переносится, описание увеличивает высоту, кнопка не перекрывает текст. Размеры ниже заданы для упражнения и не являются стандартом всех интерфейсов.

Что будем собирать

Карточка содержит небольшую метку «Практика», заголовок «Разбор интерфейса», описание в две строки и кнопку «Посмотреть программу». Начальная ширина карточки 360 px. По вертикали её размер должен зависеть от содержимого.

Создайте отдельный фрейм Card и четыре перечисленных слоя. Текст кнопки поместите в собственный фрейм Button. Для включения Auto Layout выделите нужный фрейм или слои и нажмите Shift+A. На панели проверьте направление: Figma может выбрать его автоматически, но для Card нам нужно вертикальное.

Card: вертикальный Auto Layout
  Label: текстовая метка
  Title: заголовок
  Description: описание
  Button: горизонтальный Auto Layout
    Button label: текст кнопки

Такую структуру проще проверять, чем группу из прямоугольников и отдельно лежащих надписей. Фон задайте самому Card, а фон кнопки самому Button. Не добавляйте отдельные прямоугольники для имитации внутренних отступов.

Настройте размеры: Fixed, Hug и Fill

Fixed удерживает заданный размер. Hug contents подстраивает фрейм под дочерние объекты. Fill container позволяет дочернему объекту занять доступное пространство родителя с учётом его настроек. Ширина и высота настраиваются отдельно.

У заголовка и описания проверьте перенос строк и автоматическое увеличение высоты текстового слоя. Не оставляйте фиксированную высоту на две строки, если текст вправе стать длиннее. Для верхнего Card режим Fill появится только при подходящем родительском Auto Layout; для самостоятельной карточки в упражнении используем Fixed.

Не пытайтесь одновременно заставить родителя Hug определять ширину по ребёнку, а ребёнка Fill определять её по родителю. Выберите один понятный источник размера. В нашем случае это ширина Card, поэтому текст заполняет её доступную часть.

Отделите внутренние поля от расстояния между слоями

Для Card задайте padding по 24 px и gap 16 px. Padding отделяет край фрейма от содержимого, gap разделяет соседние элементы. У Button задайте горизонтальные поля 16 px, вертикальные 12 px и выравнивание текста по центру.

При ширине Card 360 px и боковых полях 24 px доступная ширина составляет 312 px. Это контрольный расчёт для нашей конструкции без дополнительных ограничений. Если текстовая область получилась заметно уже, проверьте лишний вложенный фрейм, его padding и фиксированную ширину.

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

Добавьте вложенный горизонтальный блок

Допустим, рядом с меткой нужна иконка. Создайте Header row с горизонтальным Auto Layout и поместите туда квадрат 24 × 24 px и текст «Практика». Для Header row поставьте ширину Fill container, высоту Hug contents, gap 8 px и вертикальное выравнивание по центру. Квадрат оставьте фиксированным, тексту разрешите занимать оставшуюся ширину и расти по высоте.

Теперь горизонтальный Header row находится внутри вертикального Card. У каждого контейнера собственные поля и расстояния. Изменение gap у Card не должно раздвигать иконку с меткой: это проверяется на Header row.

Если нужно закрепить декоративный значок поверх угла, у него может быть отдельное исключение из потока. Но для заголовка, описания и кнопки не включайте Ignore auto layout: такой слой не участвует в обычном распределении места и может перекрыть соседей.

Пять проверок, которые обнаруживают хрупкий макет

Последняя проверка может потребовать сделать ширину Button label Fill container и включить центрирование текста: это позволяет многострочной надписи использовать доступную ширину. Короткая подпись сама по себе не проверяет длинную. Решение о переносе или сокращении текста должно соответствовать продукту, а не скрывать ошибку макета.

Сохраните рядом две копии карточки: исходную и с длинным содержимым. Для сравнения важны одинаковые правила, а не одинаковая итоговая высота. Если высота зафиксирована бизнес-требованием, отдельно определите ограничение строк и способ показать полный текст.

Что проверить, если Auto Layout работает не так

• Карточка вытянулась в одну длинную строку. Проверьте Fixed у Card и Fill у текстовых слоёв. Hug по ширине мог убрать ограничение для переноса.
• Текст наезжает на кнопку. Найдите фиксированную высоту текста или контейнера, проверьте Ignore auto layout.
• Fill container отсутствует. Проверьте непосредственного родителя выбранного слоя: он должен поддерживать Auto Layout.
• Отступы отличаются. Проверьте padding вложенных фреймов, затем gap. Не исправляйте два независимых свойства случайным перетаскиванием.
• После ручного растягивания макет изменился. Повторно проверьте режим размера: ручной ввод ширины или высоты может переключить его в Fixed.

При передаче разработчику опишите поведение: что переносится, что растёт, какая ширина минимальна. Автолейаут в макете не заменяет адаптивную вёрстку и проверку реальной страницы. На индивидуальном курсе Figma можно разобрать ваш компонент, а наставник по Figma поможет проверить вложенность и ограничения на реальном содержимом.