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

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

Почему именно Фигма для карточек маркетплейсов

Фигма стала стандартом для команд, работающих с маркетплейсами, не случайно. Её облачная архитектура позволяет одновременно работать над одним файлом дизайнерам, маркетологам, разработчикам и менеджерам продуктов — без потерь в качестве и синхронизации. В отличие от Photoshop или Illustrator, Фигма поддерживает компоненты, стилевые переменные и автоматические макеты, что критически важно при масштабировании карточек для сотен товаров.

Представьте: вы запускаете акцию на 500 позиций. Вручную править каждую карточку — невозможно. В Фигме вы создаёте один шаблон, привязываете к нему динамические поля (название, цена, рейтинг), и за минуты генерируете все варианты. Это не просто удобство — это экономия до 60% времени на подготовку к запуску.

Кроме того, Фигма позволяет импортировать реальные данные из Google Sheets, тестировать карточки на разных разрешениях экрана и экспортировать ресурсы в нужных форматах (PNG, JPG, WebP) с точным соблюдением размеров, требуемых Wildberries, Ozon или Яндекс.Маркетом. Никаких «а вроде бы подошло» — только точные пиксели, соответствующие спецификациям платформ.

Технические требования маркетплейсов: что нельзя игнорировать

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

Вот ключевые параметры, которые нужно учитывать:

• Wildberries: изображение — 1000×1000 пикселей (минимум 800×800), фон — белый, текст не должен перекрывать более 20% площади, логотип бренда — не более 10% от размера изображения.
• Ozon: требует прозрачный фон для некоторых категорий, рекомендует 1200×1200 для высокого разрешения, запрещает водяные знаки и текст на фоне изображения товара.
• Яндекс.Маркет: поддерживает изображения до 3000×3000, но оптимальный размер — 1000×1000, обязательна чёткая видимость товара, без рамок и текста на краях.
• AliExpress: требует белый фон, запрещает сравнения с другими брендами, ограничивает размер шрифта заголовка — не более 14% от высоты изображения.

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

Структура карточки: как правильно распределить элементы

Эффективная карточка — это не просто набор элементов, а визуальная иерархия, ведущая глаз покупателя к действию. Исследования Nielsen Norman Group показывают, что пользователь решает о покупке за 1,5–2,5 секунды. За это время он успевает заметить: товар, цену, рейтинг и ключевое преимущество.

Правильная структура включает 6 обязательных элементов:

1. Главное изображение товара — центральный элемент. Должно быть чётким, без теней, с правильным масштабом. Товар должен занимать 70–85% площади.
2. Название товара — не более 2 строк. Используйте жирный шрифт, контрастный цвет. Избегайте всех заглавных букв — это снижает читаемость на 17%.
3. Цена и скидка — цена должна быть крупнее, чем оригинальная. Скидка — ярким цветом (красный, оранжевый). Не используйте зелёный — он ассоциируется с «бесплатно», а не со скидкой.
4. Рейтинг и количество отзывов — звёзды обязательны. Минимум 4,5/5 — иначе покупатель не доверяет. Число отзывов — не менее 50 для доверия.
5. Ключевое преимущество — 5–8 слов: «Быстрая доставка», «Гарантия 2 года», «Подходит для чувствительной кожи».
6. Логотип бренда — в углу, не более 10% от площади. Не перегружайте — покупатель ищет товар, а не бренд.

Представьте, что вы смотрите на карточку с расстояния 30 см — с телефона. Что вы видите первым? Изображение. Вторым — цену. Третьим — рейтинг. Если ваша карточка не передаёт эти три элемента за 1,2 секунды — она не работает.

Пример правильной структуры

Как создать шаблон карточки в Фигме: пошаговая инструкция

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

1. Создайте новый файл — назовите его «Шаблон карточки маркетплейс». Выберите размер: 1000×1000 пикселей (для WB, Яндекса). Для Ozon — 1200×1200.
2. Создайте фрейм с Auto Layout — выделите весь фрейм, нажмите Shift + A. Выберите вертикальную вертикальную ось. Установите отступы: 24px слева, справа, сверху и снизу.
3. Добавьте изображение — вставьте placeholder (можно использовать «Unsplash» через плагин). Установите ширину 80% от фрейма, высоту — 500px. Выровняйте по центру.
4. Добавьте название — шрифт: Inter, 18px, жирный, цвет #1A1A1A. Ограничьте ширину 80% — включите «Wrap text».
5. Добавьте цену — шрифт: Inter, 22px, жирный, цвет #000000. Сразу под названием. Добавьте текст «₽».
6. Добавьте скидку — шрифт: Inter, 14px, цвет #E53935. Используйте зачёркивание через текстовый стиль (Text → Strikethrough).
7. Добавьте рейтинг — вставьте звёзды из библиотеки «Star Rating» или создайте их вручную. Добавьте текст «(128)» рядом. Цвет текста — #666666.
8. Добавьте преимущество — шрифт: Inter, 14px, цвет #4A4A4A. Поместите под рейтингом.
9. Добавьте логотип — размер 80×80 пикселей, разместите в правом верхнем углу, отступ от края — 16px.
10. Сделайте компонент — выделите все элементы, нажмите Ctrl + Alt + K (или «Create Component»). Назовите «Card_Product_Main».
11. Создайте варианты — скопируйте компонент 3 раза: для обычного товара, со скидкой, для товара без рейтинга. Подстройте текст под каждый случай.

Лучшие практики: что работает, а что — нет

Многие дизайнеры полагаются на «красиво», но маркетплейсы работают по другим законам. Вот что действительно повышает конверсию:

• Работает: использование белого фона — снижает когнитивную нагрузку. Покупатель фокусируется на товаре, а не на фоне.
• Не работает: цветные фоны, градиенты, текстуры — они отвлекают и нарушают единообразие.
• Работает: использование одного шрифта (Inter, Roboto, Open Sans) — повышает доверие и читаемость.
• Не работает: 3–4 разных шрифта в одной карточке — выглядит как спам.
• Работает: акцент на цене и скидке — 67% покупателей принимают решение по цене, а не по качеству изображения.
• Не работает: «Супер-скидка! Только сегодня!» — такие фразы вызывают недоверие. Лучше: «Снижена цена на 15%».
• Работает: добавление значков — «Быстрая доставка», «Гарантия», «Подарок» — повышает конверсию на 22% (по данным Ozon).

Тестируйте свои карточки с помощью Figma’s Prototype — создайте кликабельную версию, имитирующую мобильное приложение, и пройдите тест с 5 реальными пользователями. Запишите, где они задержались, что не поняли, что пропустили.

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

Ошибки в карточках — это не просто «не так красиво». Это потеря продаж.

• Перегруженный текст — более 3 строк названия или 2 строки описания. Решение: ограничьте 2 строками, используйте «Text Overflow: Ellipsis».
• Низкий контраст текста — серый текст на белом фоне. Решение: используйте инструмент «Contrast Checker» в Figma (плагин «Stark») — соотношение должно быть не ниже 4,5:1.
• Неправильный размер изображения — товар мелкий, вокруг много пустоты. Решение: всегда используйте «Fit to Frame» с масштабированием по высоте.
• Разные стили в одном каталоге — у одного товара шрифт 18px, у другого — 20px. Решение: используйте стили и компоненты, а не ручную настройку.
• Отсутствие скидки при наличии — если товар со скидкой, но в карточке только новая цена — покупатель не поймёт выгоду. Решение: всегда показывайте старую цену с зачёркиванием.

Экспертное мнение: от дизайн-лидера Ozon

Елена рекомендует: всегда добавлять в шаблон «зоны риска» — области, где запрещён текст (например, 15% по краям). Это предотвращает отклонения при модерации. Также она использует «Component States» для разных состояний: «в наличии», «нет в наличии», «предзаказ» — и переключает их в одном компоненте.

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

Заключение

Создание карточек для маркетплейсов в Фигме — это не задача дизайнера, а стратегический процесс, влияющий на продажи, ранжирование и репутацию бренда. Шаблоны, созданные с учётом технических требований, поведения покупателей и принципов визуальной иерархии, становятся основой масштабируемого и эффективного продвижения. Не стоит экономить на этом этапе — одна хорошо спроектированная карточка может принести больше, чем десятки рекламных кампаний.

Ключ к успеху — не в инструменте, а в дисциплине. Используйте компоненты, стили, проверяйте контраст, тестируйте на реальных устройствах. Не полагайтесь на «как-нибудь». Маркетплейсы не про эстетику — они про результат.

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