Как делать карточки на ВБ в фигме

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


 

Проектирование карточек товара для Wildberries в Figma

Figma, как инструмент для совместной работы, идеально подходит для создания, тестирования и передачи макетов разработчикам.

Подготовка структурного макета карточки

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

1.1. Определите размеры и сетку.

Карточка должна быть создана в пропорциях, соответствующих отображению на маркетплейсе. Используйте сетку для выравнивания элементов. Пример: установите артборд размером 360x540 пикселей, что является стандартным соотношением для подобных карточек. Создайте направляющие для отступов, например, по 16 пикселей от краев.

1.2. Спланируйте иерархию блоков.

Разделите артборд на основные смысловые зоны. Пример: верхняя часть для изображения товара, центральная — для названия, цены и рейтинга, нижняя - для ключевых свойств (например, «Бесплатная доставка», «Цвет»). Расположите фреймы для каждого блока, используя Auto Layout для обеспечения адаптивности.

1.3. Добавьте текстовые и графические элементы-заглушки.

На данном этапе используйте простые прямоугольники и текст-рыбу (Lorem ipsum) для обозначения будущего контента. Пример: разместите серый прямоугольник для фото товара, текстовый слой «Название товара», еще один слой «4.8 ★ (1250)» для рейтинга и блоки-плейсхолдеры для кнопок или иконок.

Также предоставляется подробный разбор в формате видео:
 

Разработка визуального стиля и контента

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

2.1. Стилизуйте изображение товара и статусы.

Работа с визуальной доминантой карточки - фотографией. Добавьте реалистичные изображения, обрамление, уголки для бейджей. Пример: импортируйте фото товара, добавьте поверх изображения в левом верхнем углу красный бейдж «Скидка 15%» с помощью авто-лейаута, а в правом нижнем - иконку сердца для кнопки «Избранное».

2.2. Настройте типографику и цветовую палитру.

Определите стили для текста (Text Styles), строго регламентирующие размер, вес и цвет шрифта для каждого типа информации. Пример: заголовок товара - Roboto, 16px, #333, вес 500; старая цена - Roboto, 14px, #999, вес 400, с эффектом перечеркивания; акционная цена - Roboto, 24px, #FF2D2D, вес 700. Это обеспечит единообразие.

2.3. Детализируйте интерактивные элементы и состояния.

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

Ключевые элементы карточки товара WB в Figma
 

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

Вывод

Проектирование карточек для Wildberries в Figma - это последовательный процесс от структурного макета к детализированному UI-киту. Начинать необходимо с четкого модульного расположения элементов, используя Auto Layout для создания гибких компонентов. Затем, через стилизацию типографики, работы с изображениями и создания интерактивных состояний, карточка наполняется жизнью и готова к передаче в разработку.Такой системный подход позволяет создавать эффективные, единообразные и технически корректные дизайн-макеты, напрямую влияющие на пользовательский опыт и конверсию.