Как создавать карточки для маркетплейсов в фигме

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

Почему Figma — лучший инструмент для создания карточек маркетплейсов

Figma — это не просто среда для дизайна, а полноценная система управления визуальными активами для команд, работающих с тысячами SKU. В отличие от Photoshop или Illustrator, Figma позволяет создавать модульные компоненты, которые автоматически обновляются при изменении одного элемента. Это критично для маркетплейсов, где один и тот же товар может иметь десятки вариантов: цвет, размер, комплектация, акции. Представьте, что вам нужно обновить шрифт цены на 3000 карточек — в Figma это делается за одну минуту, а в Photoshop — за неделю.

Кроме того, Figma поддерживает совместную работу в реальном времени, интеграции с библиотеками стилей, экспорт в форматы, подходящие для загрузки на маркетплейсы (PNG, JPG, SVG), а также возможность создавать прототипы для тестирования поведения пользователя. Это делает его идеальным инструментом для продуктовых команд, маркетологов и дизайнеров, которые работают в условиях высокой скорости и требований к точности.

Требования к карточкам на крупных маркетплейсах: Wildberries, Ozon, Яндекс.Маркет

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

• Wildberries: Изображение — 1000×1000 пикселей, минимум 4 фото (фасад, детали, упаковка, применение), текст не должен перекрывать более 20% площади изображения, запрещены водяные знаки и логотипы конкурентов.
• Ozon: Фон — только белый или нейтральный, изображение — 1200×1200 пикселей, допускаются 1–2 акцентных элемента (например, «Скидка» или «Бестселлер»), но без перегрузки.
• Яндекс.Маркет: Требует высокое качество (минимум 800×800), запрещает использование текста на изображениях, рекомендует использовать только фотографии реального товара, а не 3D-рендеры.

Как настроить Figma-документ для массового дизайна карточек

Перед началом работы создайте чистый файл в Figma. Не начинайте с пустого холста — настройте систему. Первым делом: определите размеры. Для Wildberries и Ozon используйте размер 1200×1200 пикселей — это стандарт, который подходит и для десктопа, и для мобильного. Установите сетку: 12-колоночную с отступами 40 пикселей. Это обеспечит согласованность при размещении элементов.

Затем создайте стили: шрифты (например, Inter для заголовков, Roboto для описаний), цвета (основной — #000000, акцентный — #FF6B35 для скидок), и тени (если нужны). Сохраните всё как «Стили» в панели Design. Это позволит применять единые параметры к сотням элементов без ручного подбора.

Не забудьте создать фреймы-шаблоны под разные типы товаров: одежда, техника, бытовая химия. Каждый тип требует своего подхода к расположению характеристик и изображений. Например, для одежды важны фото в носке, для техники — разборка и интерфейс.

Создание компонентов и вариантов: основа масштабируемости

Компоненты — это основа эффективного дизайна на маркетплейсах. Создайте основной компонент карточки: рамка, фон, изображение, заголовок, цена, характеристики, кнопка «В корзину». Затем превратите его в компонент (Ctrl+Alt+K или через панель Components). Теперь вы можете создавать экземпляры — и при изменении исходного компонента все копии обновятся автоматически.

Далее — варианты. Добавьте варианты для:
— Скидки (с меткой «-30%»)
— Бестселлер (с иконкой «🔥»)
— Новинка (с бейджем «Новинка»)
— Статус «В наличии» / «Под заказ»

Каждый вариант — это отдельный набор значений свойств. Например, в варианте «Скидка» вы меняете цвет цены на красный, добавляете бейдж и уменьшаете прозрачность старой цены. Такой подход позволяет дизайнеру за 5 минут создать 50 вариантов карточек для разных акций.

Пошаговая структура карточки: от изображения до CTA

Каждая успешная карточка следует проверенной структуре. Вот пошаговый алгоритм:

1. Изображение товара — занимает 50–60% высоты карточки. Центральное положение, белый фон, без лишних объектов. Допускается 1–2 дополнительных фото в виде миниатюр под основным изображением.
2. Заголовок — 2–3 строки, максимальная длина 80 символов. Используйте заглавные буквы только для первого слова и имен собственных. Пример: «Фитнес-браслет Xiaomi Mi Band 8».
3. Цена и скидка — цена выделена жирным, старая цена зачеркнута, скидка — в красном бейдже. Располагайте их рядом, чтобы пользователь сразу видел выгоду.
4. Характеристики — 3–5 ключевых параметров: бренд, цвет, размер, материал, гарантия. Используйте иконки для ускорения восприятия.
5. Кнопка CTA — «В корзину», «Купить», «Добавить в избранное». Цвет — контрастный (оранжевый, зеленый), размер — не менее 48×48 пикселей для мобильных.
6. Рейтинг и отзывы — звезды + количество отзывов (например, «4.8 (1 243)»). Размещайте под ценой — это повышает доверие на 27% по данным NPS-анализа Wildberries.

Не забывайте про отступы: между элементами — минимум 16 пикселей, между блоками — 24–32. Это создает «воздух», который улучшает читаемость и снижает когнитивную нагрузку.

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

Даже опытные дизайнеры допускают типичные ошибки, которые снижают конверсию:

• Перегрузка текстом на изображении — маркетплейсы могут заблокировать карточку. Держите текст только в текстовых слоях, а не на фото.
• Несоответствие цветов бренду — если бренд использует синий, а карточка — красная, это вызывает недоверие. Соблюдайте брендбук.
• Размытые или низкокачественные фото — изображение должно быть четким даже при увеличении. Используйте исходники 300 DPI.
• Отсутствие CTA — если кнопка «Купить» маленькая или не контрастная, пользователь уйдет. Проверяйте контрастность по WCAG 2.1 (минимум 4.5:1).
• Игнорирование мобильной версии — до 75% покупок происходят с телефона. Тестируйте карточку в режиме «Mobile» в Figma.

Тестирование и A/B-версии: как проверить эффективность

Дизайн — не догма, а гипотеза. Перед финальной загрузкой карточки на маркетплейс протестируйте её. Создайте 2–3 варианта в Figma: разный цвет кнопки, разное расположение цены, разный заголовок. Используйте Figma’s “Prototype” — свяжите карточки с переходами, чтобы симулировать поведение пользователя.

Затем используйте инструменты вроде Maze или UsabilityHub, чтобы собрать обратную связь от реальных пользователей. Спросите: «Где вы ищете цену?», «Что привлекло ваше внимание?», «Понятно ли, что это за товар?». Записывайте результаты.

Для масштабного тестирования используйте A/B-тесты на самом маркетплейсе. Загрузите две версии карточки, включите таргетинг по сегментам (например, пользователи 25–35 лет), и через 7 дней сравните CTR и конверсию. Часто победит не самая «красивая» версия, а самая понятная.

Экспертное мнение: как дизайнеры из крупных брендов работают с карточками

Её команда использует:
— Плагин “Content Reel” для подстановки текста из CSV;
— “Auto Layout” для адаптивных блоков характеристик;
— “Component States” для отображения статусов («Только сегодня», «Осталось 3 шт.»);
— Систему цветовых меток, чтобы быстро отличать карточки по категории.

Это не просто дизайн — это инженерия визуального контента.

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

Заключение

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

Помните: ваша карточка — это первый и последний контакт с покупателем. Если она не работает, товар не продастся, даже если он лучший на рынке. Начните с шаблона, создайте компоненты, протестируйте, оптимизируйте — и повторяйте цикл. Это не разовая задача, а постоянная работа.

• Используйте Figma для создания масштабируемых компонентов, а не одноразовых дизайнов.
• Соблюдайте технические требования каждого маркетплейса — нарушения ведут к блокировке.
• Тестируйте карточки на реальных пользователях — конверсия важнее эстетики.
• Автоматизируйте обновления через переменные и плагины — экономьте до 80% времени.
• Обновляйте карточки каждые 3–6 месяцев — рынок меняется, и ваши конкуренты тоже.