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

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

Зачем нужна продуманная карточка товара в Figma

Карточка товара — один из самых часто просматриваемых элементов в интернет-магазинах. По данным Nielsen Norman Group, пользователи принимают решение о клике на товар за 0,5–1,5 секунды. Это означает, что каждая деталь — от выравнивания текста до цвета кнопки — влияет на конверсию. В Figma карточка становится не просто визуальным элементом, а прототипом поведения пользователя. Если она неструктурирована, разработчики начинают «угадывать» намерения дизайнера, что ведёт к задержкам и ошибкам в реализации.

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

Структура и компоненты карточки товара

Любая успешная карточка товара строится на трёх основных блоках: визуальном, информационном и призыве к действию. Каждый из них требует чёткой иерархии.

• Изображение товара — центральный элемент. Должно быть пропорциональным, без искажений, с чёткой тенью или границей для выделения.
• Название — максимум 2 строки, жирный шрифт, контрастный цвет. Не используйте все заглавные буквы — это снижает читаемость.
• Цена и скидка — цена должна быть визуально доминирующей. Старая цена — зачёркнутая, новая — жирная и яркая. Добавьте значок скидки, если есть.
• Рейтинг и отзывы — звёзды + количество оценок. Упрощённая версия: 4,7 (128) — достаточно для быстрого восприятия.
• Кнопка «В корзину» — контрастный цвет, достаточный размер (минимум 44×44 пикселей для мобильных), с ховер-эффектом.
• Дополнительно — лейблы («Новинка», «Хит продаж»), иконки доставки, сроки, наличие на складе.

Эти элементы должны быть размещены в логической последовательности: сверху вниз, слева направо — в соответствии с Z-образной моделью восприятия. Не перегружайте карточку: 5–7 элементов — оптимально. Более 10 — риск потери фокуса.

Пошаговое создание карточки в Figma

Создание карточки — это не рисование, а проектирование системы. Следуйте этим шагам:

1. Создайте новый файл или фрейм размером 300×400 пикселей — типичный размер для десктопной карточки.
2. Добавьте изображение товара. Используйте placeholder-изображение (например, через Unsplash или Lorem Picsum) и зафиксируйте его пропорции (Lock aspect ratio).
3. Под изображением создайте текстовый блок для названия товара. Выберите шрифт из стиля (например, Inter SemiBold 18px). Не забудьте про line-height: 140%.
4. Под названием добавьте цену. Используйте стиль цвета «primary» (например, #2563EB) и размер 20px. Под ней — зачёркнутую старую цену в сером (#6B7280).
5. Добавьте рейтинг: 5 звёзд (иконки из Figma Community) и число отзывов рядом. Используйте компонент «Star Rating» из библиотеки Figma Design System.
6. Создайте кнопку «В корзину». Установите фон — например, #10B981, радиус 8px, отступы 12px по вертикали и 20px по горизонтали.
7. Сгруппируйте все элементы (Ctrl+G) и превратите группу в компонент: нажмите «Create Component» в правой панели.

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

Как использовать Auto Layout для адаптивности

Auto Layout — ключ к созданию адаптивных карточек без ручного позиционирования. Он позволяет элементам автоматически подстраиваться под содержимое.

• Выделите все слои внутри компонента (изображение, название, цена, рейтинг, кнопка).
• В правой панели выберите «Auto Layout».
• Установите направление — Vertical.
• Добавьте отступы между элементами: 8–12px между заголовком и ценой, 16px между рейтингом и кнопкой.
• Для кнопки установите Horizontal Auto Layout, чтобы текст внутри неё центрировался и растягивался по ширине.
• Включите Fill container для изображения — оно будет занимать всю ширину карточки.

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

Применение переменных для динамических состояний

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

• Перейдите в Design System → Variables.
• Создайте переменную типа Enum с именем «Product Status».
• Добавьте значения: «In Stock», «Sold Out», «New», «Limited».
• В компоненте выберите элемент, который нужно изменить (например, лейбл «Новинка»).
• В свойствах компонента найдите «Overrides» → выберите вашу переменную «Product Status».
• Теперь при использовании компонента вы можете выбрать статус — и лейбл автоматически появится/исчезнет.

Также можно настроить переменные для цвета кнопки (например, серый для «Sold Out»), прозрачности изображения или даже иконки доставки. Это позволяет одной карточке служить 5–7 разным сценариям — без дублирования.

Лучшие практики и распространённые ошибки

Даже опытные дизайнеры допускают ошибки, которые снижают эффективность карточки. Вот что работает, а что — нет.

Частая ошибка — перегрузка карточки информацией. Добавление «Бесплатная доставка», «Только сегодня», «Скидка 70%», «Лучший выбор», «Рейтинг 4.9» — это не преимущества, а шум. Пользователь не может обработать 7 призывов одновременно. Выберите 1–2 ключевых преимущества и выделите их визуально.

Экспертное мнение: как дизайнеры повышают конверсию

Артём Козлов работает над UX-оптимизацией крупнейших российских маркетплейсов. Его команда провела A/B-тестирование 14 вариантов карточек. Победил вариант с:

— увеличенной кнопкой (на 20% больше),
— выделенной ценой (жирный шрифт, цвет #10B981),
— иконкой «Бесплатная доставка» под ценой,
— и убранной звёздочкой рейтинга — вместо неё появился текст «Популярный».

«Звёзды — это хорошо, но не всегда. В условиях высокой конкуренции пользователь смотрит не на рейтинг, а на выгоду. Если цена и доставка ясны — он покупает. Рейтинг — это вторичный триггер.»

Его команда также внедрила систему «карточек-шаблонов»: 3 базовых типа (стандарт, скидка, распродажа) с 5 вариантами контента внутри. Это сократило время на создание новых карточек с 45 минут до 7.

Часто задаваемые вопросы

Заключение

Создание карточки товара в Figma — это не просто оформление изображения и текста. Это проектирование поведения пользователя, масштабируемой системы и единого языка между дизайном и разработкой. Использование компонентов, Auto Layout и переменных превращает одну карточку в целую экосистему, способную адаптироваться под любые условия — от скидок до многоязычных интерфейсов.

Помните: чем меньше ручной работы, тем выше качество и скорость. Команда, которая использует системный подход, может выпускать новые карточки в 5 раз быстрее, чем та, что рисует каждую вручную. Это не теория — это практика, подтверждённая результатами топовых продуктов.

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