Как в фигме создать карточку товара

В современном UX/UI-дизайне карточка товара — это один из самых часто используемых элементов интерфейса. Она встречается в интернет-магазинах, маркетплейсах, приложениях для доставки, сервисах подписок и даже в корпоративных CRM. Несмотря на кажущуюся простоту — изображение, название, цена, кнопка — правильное создание карточки требует глубокого понимания иерархии, адаптивности, доступности и масштабируемости. В Figma, как в мощном инструменте для командной работы, этот процесс становится не просто удобным, а стратегически важным. Ошибки в карточке — неправильное выравнивание, несогласованные отступы, неадаптивный текст — приводят к снижению конверсии, путанице у пользователей и увеличению нагрузки на разработчиков. Поэтому важно не просто нарисовать карточку, а создать систему, которая будет работать в любом контексте.

Структура карточки товара: что обязательно должно быть

Карточка товара — это мини-страница, где пользователь принимает решение о дальнейших действиях. Её структура должна быть интуитивной и логичной. Минимальный набор элементов включает: изображение товара, название, цену, кнопку действия («В корзину», «Подробнее»), и, по возможности, рейтинг или количество отзывов. Дополнительно — скидка, метки («Хит продаж», «Новинка»), артикул, краткое описание.

Представьте, что пользователь скроллит ленту товаров. У него есть 2–3 секунды, чтобы понять, что это за продукт, стоит ли кликать. Поэтому визуальная иерархия критична. Изображение — первый элемент, который привлекает внимание. Оно должно быть чётким, без лишних элементов фона, с единым форматом (например, 1:1). Название — второй по значимости элемент. Оно должно быть читаемым даже на маленьких экранах. Цена — третий. Её нужно выделить цветом, размером или жирностью. Кнопка — четвёртый. Она должна быть достаточно большой, чтобы её можно было нажать пальцем на мобильном.

Для сложных товаров — например, электроники или одежды — добавьте иконки характеристик: «Бесплатная доставка», «В наличии», «Скидка 20%». Но не перегружайте. Каждый элемент должен иметь вес и цель. Если вы не можете объяснить, зачем он здесь — удалите.

Создание компонентов и библиотек

Figma — это не графический редактор, а система управления дизайном. Чтобы карточка товара работала в масштабе, её нужно превратить в компонент. Создайте один макет, затем выделите его, кликните «Создать компонент» (или Ctrl+Alt+K). Это превратит вашу карточку в шаблон, который можно повторять.

После этого создайте варианты компонента: основной, со скидкой, с рейтингом, с меткой «Новинка». Для этого используйте свойства компонентов (Component Properties). Например, добавьте текстовое поле «Цена», «Название», «Статус», и булево поле «Есть скидка». Теперь, когда вы вставляете компонент, вы можете менять его содержимое, не нарушая структуру.

Не забудьте сохранить компонент в библиотеке. Если вы работаете в команде — создайте отдельную библиотеку «Product Cards». Поделитесь ею с дизайнерами и разработчиками. Это гарантирует, что все используют одинаковые элементы, а не рисуют свои версии.

Работа с сеткой и автоматическим выравниванием

Карточки товара редко стоят поодиночке. Они всегда в ряду — 2, 3, 4 в строке. Поэтому важно, чтобы они выравнивались идеально, независимо от длины названия или наличия скидки. Используйте Auto Layout — это ключевой инструмент.

Выберите все элементы внутри карточки, кликните «Auto Layout». Установите направление — вертикальное. Добавьте отступы: 12–16px между элементами. Включите «Wrap children» — тогда, если название слишком длинное, оно перенесётся, а не выйдет за границы. Установите фиксированную ширину карточки — например, 280px. Высота должна быть адаптивной.

Теперь, когда вы копируете карточку, она сохраняет все параметры. Для группировки нескольких карточек используйте ещё один Auto Layout — горизонтальный — внутри контейнера. Это позволит вам легко менять количество колонок на разных разрешениях.

Адаптивность: как карточка ведёт себя на разных экранах

Мобильные устройства составляют более 60% трафика в e-commerce. Карточка должна работать на экранах от 320px до 1920px. Для этого используйте варианты компонента и фреймы с разными размерами.

Создайте три фрейма: Desktop (1440px), Tablet (768px), Mobile (375px). В каждом вставьте вашу карточку. В мобильной версии уменьшите отступы, упростите типографику, сделайте кнопку шире. В настройках Auto Layout установите «Fill container» для изображения — оно будет растягиваться, но не искажаться.

Используйте «Constraints» — это ограничения элементов внутри компонента. Например, изображение должно «прилипать» к верху и бокам, кнопка — к низу. Название — должно обрезаться троеточием, если не помещается. Проверьте это в режиме «Preview» — Figma позволяет смотреть, как карточка выглядит на разных устройствах прямо в редакторе.

Типографика: как текст влияет на восприятие

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

Например:
— Название: 16px, Semibold, черный (#1A1A1A)
— Цена: 18px, Bold, красный (#D32F2F)
— Старая цена: 14px, Regular, серый (#757575), зачёркнутая
— Метка: 12px, Medium, белый, фон #0066CC

Не используйте больше трёх шрифтов. Не применяйте курсив или все заглавные — это снижает читаемость. Для названий товаров — используйте шрифты с хорошей читаемостью на маленьких размерах: Inter, Roboto, Helvetica Neue, Open Sans.

Цветовая схема и визуальная иерархия

Цвет — один из самых мощных инструментов визуальной иерархии. Используйте цвет, чтобы направить взгляд. Цвет кнопки должен контрастировать с фоном. Цвет цены — ярче, чем название. Старая цена — тусклее. Метки — должны быть насыщенными, но не агрессивными.

Создайте палитру в Figma: откройте «Styles» → «Color Styles». Добавьте цвета: primary, secondary, success, warning, disabled. Привяжите к ним все элементы карточки. Так вы обеспечите единообразие.

Не забывайте про доступность. Проверяйте контрастность между текстом и фоном с помощью Figma’s Contrast Checker (встроенная функция). Минимальный контраст для текста 4.5:1, для крупного текста — 3:1.

Частые ошибки и как их избежать

Ошибки в карточках — одни из самых распространённых в дизайн-системах. Вот самые частые:

• Разные высоты карточек — возникают из-за разной длины названий. Решение: задайте фиксированную высоту контейнера или используйте «Fill container» в Auto Layout.
• Неадаптивные изображения — картинки растягиваются и искажаются. Решение: используйте «Scale to fit» или «Fill» в свойствах изображения.
• Слишком много информации — артикул, баркод, размеры, состав. Решение: оставьте только то, что влияет на решение. Детали — в детальной карточке.
• Нет состояний кнопки — кнопка «В корзину» не меняется при наведении. Решение: создайте компоненты для hover, active, disabled.
• Несогласованные отступы — в одной карточке 12px, в другой 16px. Решение: используйте систему отступов (8px, 16px, 24px) и применяйте её строго.

Проверяйте карточки в режиме «Inspect» — там вы увидите, какая высота, отступы, цвета у каждого элемента. Сравнивайте с эталоном.

Экспертное мнение: как проектируют карточки в крупных компаниях

В Яндекс.Маркете и Ozon карточки товара проходят 3–5 итераций тестирования с реальными пользователями. Команда дизайнеров использует не просто Figma, а связку: библиотека компонентов → прототип в Figma → A/B-тест в Google Optimize → фидбек от аналитиков.

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

Заключение

Создание карточки товара в Figma — это не рисование, а проектирование системы. Это процесс, который начинается с анализа поведения пользователя, продолжается созданием компонентов и завершается проверкой адаптивности. Правильно сделанная карточка — это не только эстетика, но и инструмент конверсии. Она влияет на продажи, на удовлетворённость пользователей и на эффективность команды.

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