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

Карточка товара — это ключевой элемент интерфейса интернет-магазина, который напрямую влияет на конверсию и восприятие бренда. В Figma её создание требует не только дизайнерского вкуса, но и понимания структуры компонентов, слоёв, автолейаутов и прототипирования. Чтобы сделать карточку эффективной, необходимо продумать визуальную иерархию, адаптивность и масштабируемость.

Основные элементы карточки товара

Карточка товара — это миниатюрный рекламный блок, содержащий всю необходимую информацию для принятия решения о покупке. Она должна быть информативной, визуально привлекательной и легко сканируемой. Стандартный набор элементов включает изображение, название, цену, кнопку действия, рейтинг и дополнительные метки (скидка, новинка, наличие).
Изображение обычно располагается сверху или слева — оно играет доминирующую роль в привлечении внимания. Название должно быть кратким, но ёмким. Цена выделяется жирным шрифтом, часто с зачёркнутой старой стоимостью при наличии скидки. Кнопка «В корзину» или «Купить» размещается в зоне легкого доступа.
Важно учитывать контекст использования: мобильная версия требует более компактного расположения, тогда как десктоп позволяет использовать двухколоночную структуру. Адаптивность карточки — обязательное условие современного дизайна.

Микроэлементы, которые влияют на доверие

Помимо основных атрибутов, существуют второстепенные, но важные детали: индикатор наличия («в наличии», «под заказ»), количество отзывов, доставка, гарантия. Эти элементы формируют доверие и снижают тревожность пользователя.
Например, значок «Бесплатная доставка» увеличивает вероятность добавления в корзину на 18%, согласно исследованию Baymard Institute. Также эффективны микроинтеракции: при наведении можно показать второе фото или кнопку «Быстрый просмотр».

• Изображение товара (основное и ховер)
• Название и бренд
• Цена и скидка
• Рейтинг и количество отзывов
• Кнопка действия
• Метки (новинка, лидер продаж)
• Индикаторы доставки и гарантии

Создание структуры карточки в Figma

Первый шаг — определение размеров карточки. Для десктопа типичный размер — 280×400 пикселей, для мобильного — 160×240. Создайте фрейм с этими параметрами, выбрав ориентацию: вертикальную (чаще) или горизонтальную (для каталогов с большим количеством информации).
Начните с импорта изображения. Используйте плейсхолдеры, если реальные фото ещё недоступны. Разместите его в верхней части фрейма, задайте отступы (обычно 16 px со всех сторон). Под изображением добавьте текстовые блоки: название, цена, рейтинг. Располагайте их по принципу визуальной иерархии — сверху крупный шрифт, внизу мелкий.

Шаги создания базовой карточки

1. Создайте новый фрейм нужного размера (например, 280×400).
2. Добавьте прямоугольник под изображение, закрасьте серым или вставьте картинку через Fill.
3. Под изображением разместите текстовое поле с названием товара.
4. Добавьте строку с ценой и, при наличии, старой ценой (через зачёркивание).
5. Вставьте звёзды рейтинга (можно использовать иконки из библиотеки или векторные фигуры).
6. Добавьте кнопку действия (например, «В корзину») с закруглёнными углами.
7. Примените отступы между элементами (используйте 8px grid).

Работа с Auto Layout: основа гибкости

Auto Layout — одна из самых мощных функций Figma, позволяющая создавать адаптивные и масштабируемые интерфейсы. Применительно к карточке товара она решает сразу несколько задач: автоматическое выравнивание, динамические отступы и возможность изменения содержимого без ручной корректировки.
Чтобы применить Auto Layout, выделите группу элементов (например, всё содержимое карточки, кроме изображения) и нажмите «Auto Layout» в правой панели. По умолчанию элементы выстроятся в столбец. Убедитесь, что направление — vertical, а padding задан правильно.

Как вложить Auto Layout внутрь Auto Layout

Для сложных карточек используйте вложенные авто-лейауты. Например, блок с ценой может состоять из двух строк: новая цена (жирная) и старая (зачёркнутая). Оберните их во внутренний Auto Layout с горизонтальным направлением, чтобы они находились на одной линии.
Также удобно вынести рейтинг с количеством отзывов в отдельный контейнер. Это позволит легко перемещать и изменять группу как единое целое. Вложенность делает дизайн более предсказуемым и упрощает работу при изменении данных.

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

Компоненты — основа системного дизайна в Figma. Карточку товара следует делать компонентом, особенно если она будет использоваться в нескольких местах: каталог, главная страница, рекомендации. Это обеспечивает единообразие и ускоряет процесс внесения правок.
Выделите весь фрейм карточки и нажмите «Create Component». Теперь вы можете дублировать её в любом количестве. При изменении оригинала все экземпляры обновятся автоматически. Но настоящая сила — в вариантах (variants).

Настройка вариантов карточки

Варианты позволяют создавать разные состояния одной карточки: с/без скидки, в наличии/нет, с рейтингом/без. Для этого:

• Создайте несколько карточек с разными данными.
• Выделите их все и нажмите «Create Component Set».
• В свойствах задайте параметры, например: discount (yes/no), availability (in stock/out of stock).

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

Дизайн детализации: как улучшить восприятие

Карточка должна не только передавать данные, но и вызывать желание взаимодействовать. Добиться этого можно через микрокопирайтинг, цветовую стратегию и микроинтеракции. Например, вместо «В корзину» можно использовать «Добавить — доставка завтра», что создаёт ощущение срочности.
Цвет кнопки действия играет ключевую роль. Оранжевый и красный традиционно ассоциируются с призывом к действию, но важно учитывать фирменный стиль. Если бренд использует синий — сделайте кнопку насыщенного оттенка, но не теряйте контраст.

Ховер-состояния и прототипирование

Figma позволяет смоделировать поведение карточки при наведении. Создайте второй фрейм с изменённым состоянием: например, другое изображение, появившаяся кнопка «Быстрый просмотр» или увеличенная тень.
Свяжите фреймы через прототип: установите триггер «On Hover», действие «Instant», и укажите целевой фрейм. Это поможет заказчику оценить динамику, а команде — понять логику поведения.

• Увеличение тени при наведении
• Смена изображения (например, вид сбоку)
• Появление дополнительных кнопок («В избранное», «Сравнить»)
• Анимация цены или скидки

Типичные ошибки и профессиональные рекомендации

Даже опытные дизайнеры допускают ошибки при создании карточек. Одна из самых частых — отсутствие единой системы отступов. Когда gap между элементами отличается на 1–2 пикселя, это бросается в глаза и создаёт ощущение небрежности.
Ещё одна ошибка — игнорирование автолейаутов. Ручная расстановка элементов быстро становится проблемой при масштабировании. Если нужно 50 карточек, каждая с разным количеством строк, редактирование займёт часы вместо минут.

Чек-лист перед презентацией карточки

• Проверены ли все состояния (с/без скидки, нет в наличии)?
• Работают ли варианты компонентов?
• Правильно ли выстроена визуальная иерархия?
• Достаточный ли контраст текста и фона?
• Адаптирована ли карточка под мобильные устройства?
• Протестирована ли в прототипе с hover-эффектами?

Экспертное мнение

Создание карточки товара — это не просто дизайн, а стратегическая задача. Она находится на пересечении маркетинга, психологии и UX. Эффективная карточка снижает когнитивную нагрузку и направляет пользователя к действию.
По данным Nielsen Norman Group, пользователи проводят на странице категории менее 50 секунд, просматривая в среднем 7–10 карточек. Значит, каждая из них должна быть максимально информативной и узнаваемой.

Особое внимание уделяйте шрифтам. Используйте максимум два начертания: одно для названия (жирное), другое для описания (регулярное). Размеры должны различаться минимум на 20%, чтобы глаз сразу выделял главное.

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

Заключение

Создание карточки товара в Figma — это сочетание технических навыков и стратегического мышления. Успешная карточка не просто красиво выглядит, но и работает на конверсию, доверие и узнаваемость бренда.

• Структурируйте карточку по принципам визуальной иерархии.
• Обязательно применяйте Auto Layout для гибкости и адаптивности.
• Делайте карточку компонентом с вариантами состояний.
• Тестируйте hover-эффекты и кликабельность в прототипе.
• Следите за единообразием в рамках дизайн-системы.