Как проверить карточку Figma с длинным текстом через Auto Layout

Проблема с карточкой товара обычно проявляется не на первом аккуратном макете, а в момент, когда короткий заголовок меняют на длинный. Визуально все было ровно, но после замены текста съезжают отступы, цена налезает на кнопку, а сама карточка неожиданно меняет ширину. Проверка через Auto Layout нужна именно для того, чтобы поймать такие поломки до передачи компонента дальше.

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

Содержимое и ограничения карточки

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

Дальше определите правило именно для заголовка. Если он должен переноситься на несколько строк, ему нельзя мешать фиксированным текстовым боксом. В справке Figma отдельно отмечено, что фиксированные текстовые блоки внутри Auto Layout могут приводить к наложению слоев. Если вы хотите ограничить заголовок по высоте, не смешивайте два ограничения сразу: у текстового слоя нельзя одновременно задавать и max height, и число max lines. Для проверки лучше выбрать один понятный сценарий: либо текст свободно растет, либо обрезается по строкам.

Настройка вложенных контейнеров

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

Полезно помнить три базовых режима из официальной документации. Hug contents работает у Auto Layout-фреймов и позволяет контейнеру подстраиваться под содержимое. Fill container доступен детям Auto Layout и растягивает слой в свободное место родителя. Fixed удерживает размер постоянным. Важная тонкость: если дочерний объект по оси задан как Fill container, родитель по этой же оси уже не сможет оставаться в режиме Hug contents и станет фиксированным. Для карточки это не проблема, если вы как раз и хотели жестко зафиксировать ее ширину.

• Внешняя карточка: вертикальный Auto Layout, фиксированная ширина, внутренние паддинги и общий gap.
• Контентный блок: отдельный вертикальный Auto Layout, чтобы заголовок не спорил с изображением за отступы.
• Строки с ценой, рейтингом или кнопкой: отдельные вложенные контейнеры, если элементы должны выравниваться по горизонтали.
• Плашки поверх изображения: только если нужно, и лучше как отдельный слой с Ignore auto layout, а не как участник общего потока.

Последний пункт особенно важен. Если бейдж «Новинка» или «-20%» случайно включить в обычный поток Auto Layout, он начнет влиять на размеры карточки. Для наложений удобнее исключать объект из потока и позиционировать относительно родителя, но не использовать этот прием для основного текста. Заголовок и цена должны оставаться в естественном потоке, иначе вы не проверите реальное поведение карточки.

Проверка длинного текста и узкой ширины

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

Учебный пример. Условная карточка имеет ширину 280 px, внутренние отступы слева и справа по 16 px, сверху и снизу тоже по 16 px. Значит, полезная ширина контента внутри карточки равна 280 - 16 - 16 = 248 px. У карточки есть изображение высотой 160 px, затем gap 12 px, затем контентный блок с gap 8 px между заголовком, ценой и кнопкой. При коротком заголовке в одну строку высотой 24 px общая высота карточки получается 16 + 160 + 12 + 24 + 8 + 24 + 8 + 40 + 16 = 308 px. Если длинный заголовок занимает уже 3 строки по 24 px, его высота становится 72 px, а вся карточка — 356 px. Если ту же карточку сузить до 220 px, полезная ширина контента станет 220 - 32 = 188 px, и тот же заголовок может занять 4 строки, то есть 96 px. Тогда итоговая высота карточки вырастет до 380 px. Это проверяемый результат: ширина не меняется, растет только высота и только за счет текста.

Если в этом же примере ваша карточка осталась высотой 308 px, а часть заголовка исчезла, значит где-то зафиксирована высота контейнера или самого текстового слоя. Если вместо роста высоты карточка внезапно стала шире 280 px, значит внешний контейнер оставили в Hug contents или текст не ограничен доступной шириной. Если цена наехала на кнопку, скорее всего, у текста фиксированный бокс или элементы выровнены вручную, а не через вложенный Auto Layout.

• Проверьте очень короткий заголовок: не схлопываются ли gap и не прилипает ли цена к изображению.
• Проверьте длинный заголовок: переносится ли текст без наложений.
• Проверьте узкую ширину карточки: остается ли внешняя ширина под контролем.
• Если у заголовка есть ограничение по строкам, не смешан ли этот режим с ограничением по максимальной высоте.

Отдельный случай — прототип с обрезкой содержимого или прокруткой. В документации Figma есть важная оговорка: Auto Layout сам подстраивается под контент, поэтому для сценариев с clip или scrolling overflow его помещают внутрь обычного frame. Для проверки карточки это полезно помнить, если вы хотите показать фиксированную область внутри попапа или боковой панели.

Критерии передачи готового элемента

Готовой можно считать не ту карточку, которая выглядит аккуратно в одном состоянии, а ту, у которой понятны правила изменения. Перед передачей проверьте компонент как минимум в трех состояниях: короткий заголовок, длинный заголовок и узкая ширина. Если карточка участвует в каталоге, важно проверить еще и соседство с другими карточками: не ломается ли общий ритм сетки из-за неожиданного роста ширины.

Практически полезный результат такой проверки простой: после нее вы можете описать поведение карточки одной фразой, и она будет воспроизводимой. Например: «Ширина карточки фиксирована, заголовок переносится по доступной ширине, высота карточки растет по содержимому, внутренние отступы сохраняются». Это уже не субъективное «вроде работает», а понятное правило для команды и для самого себя через неделю.

Если хотите отработать такие задачи не на одном элементе, а в составе более крупного макета, посмотрите, есть ли в программе практика по Figma, Auto Layout, компонентам, библиотекам и UI-китам, и как именно проверяют результат. По официальной странице и сохраненному описанию каталога курса «UX/UI-дизайнер Расширенный + ИИ» подтверждается тема проектирования интерфейсов в Figma с использованием Auto Layout, компонентов, библиотек и UI-китов. Для этой темы полезно заранее задать себе вопрос: будете ли вы на обучении не только смотреть на настройку карточки, но и самостоятельно проверять ее на длинном тексте и узкой ширине.