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

Карточки для маркетплейсов — это визуальный фасад вашего товара, который решает, купит ли покупатель или пролистает дальше. В условиях высокой конкуренции на Ozon, Wildberries, Яндекс.Маркете и других платформах, даже идеальный продукт может остаться незамеченным без грамотно спроектированной карточки. Figma — не просто инструмент для дизайнеров, а мощная платформа для создания стандартизированных, адаптивных и конверсионных макетов, которые соответствуют требованиям всех крупных маркетплейсов. Сделать карточку в Figma правильно — значит сэкономить часы на доработках, избежать отказов при загрузке и увеличить конверсию в 1,5–2 раза.

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

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

Кроме того, Figma позволяет экспортировать изображения в нужных форматах (PNG, JPG, WebP) с точным контролем качества и размеров — без потерь разрешения. Это особенно важно, ведь маркетплейсы требуют изображения с разрешением от 1000×1000 пикселей, а часто — 2000×2000. Неправильный экспорт может привести к отказу в загрузке или ухудшению визуального восприятия на мобильных устройствах.

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

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

• Ozon: фон — только белый или прозрачный; изображение — 1000×1000 пикселей минимум; запрещены водяные знаки, рамки, текст на изображении (кроме логотипа бренда); формат — JPG, PNG, WebP.
• Wildberries: обязательное наличие фона — только белый; изображение — 1500×1500 пикселей рекомендуется; запрещены любые надписи на главном фото; допускаются 5 дополнительных фото с деталями, упаковкой, применением.
• Яндекс.Маркет: фон — белый, серый или прозрачный; изображение — 800×800 пикселей минимум; разрешены логотипы и текст на фото, но не более 20% площади; рекомендуется WebP для быстрой загрузки.

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

Как настроить файл Figma для карточки

Первое, что нужно сделать — создать новый файл и настроить холст под стандартный размер. Для главного изображения используйте размер 1500×1500 пикселей — это перекрывает требования всех трёх крупнейших маркетплейсов. Установите фоновый слой в белый (#FFFFFF) — это обязательное условие для Wildberries и Ozon.

Создайте систему сеток: 12-колоночную сетку с отступами 40 пикселей по бокам. Это обеспечит визуальную стабильность при размещении элементов. Включите «Auto Layout» для всех компонентов — кнопок, заголовков, цен. Это позволит вам менять текст без нарушения верстки.

Не забудьте создать библиотеку стилей: определите 3–4 стиля шрифтов (заголовок, подзаголовок, цена, описание), 2–3 цвета (основной, акцентный, серый для текста) и один стиль тени (если нужна). Все эти стили должны быть привязаны к компонентам, а не настроены вручную.

Структура карточки: порядок элементов и визуальная иерархия

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

• Верх — изображение продукта. Оно должно занимать 50–60% площади. Товар должен быть центрирован, без обрезов, с чёткими контурами.
• Под изображением — название. Не более 2 строк. Используйте жирный шрифт, размер 20–24px. Не пишите «Новинка!», «Лидер продаж!» — это запрещено на Wildberries и может быть расценено как манипуляция.
• Цена — сразу под названием. Делайте её крупнее и ярче, чем остальной текст. Используйте цвет #E53935 (красный) или #FF6B35 (оранжевый) — они привлекают внимание на 37% чаще, чем чёрный (по данным A/B-тестов Ozon).
• Под ценой — скидка (если есть). Обязательно укажите «Сэкономьте X руб.» или «-X%». Это повышает конверсию на 18–22%.
• Ниже — краткое описание. 1–2 предложения. Не используйте маркированные списки — они не отображаются корректно на мобильных устройствах.

Не размещайте кнопки «Купить», «В корзину» или «Добавить в избранное» — это элементы интерфейса маркетплейса, а не вашей карточки. Ваша задача — только визуально подготовить продукт к покупке, а не создавать интерфейс.

Работа с изображениями: форматы, ретина, фоны

Изображение — это 80% успеха карточки. Даже если текст идеален, плохое фото убьёт конверсию. Вот как работать с ним в Figma:

• Используйте изображения с разрешением 2000×2000 пикселей — это обеспечит чёткость даже на экранах Retina.
• Никогда не растягивайте маленькое изображение. Figma автоматически снизит качество — это видно на мобильных устройствах.
• Если фон не белый — используйте инструмент «Remove Background» (в Figma Pro) или вручную выделите товар с помощью Pen Tool и удалите фон.
• Для сложных объектов (одежда, текстиль) используйте тени с размытием 4–6px, чтобы товар «отделить» от фона. Это создаёт ощущение объёма.
• Экспортируйте в WebP — он на 30% легче JPG при том же качестве. Это критично для скорости загрузки страницы.

Текст и шрифты: что можно, а что нельзя

Текст на карточке — это не реклама, а информационный элемент. Он должен быть читаемым, лаконичным и соответствовать правилам платформы.

• Шрифты: используйте только системные или лицензионные — Arial, Helvetica, Roboto, Open Sans. Шрифты с засечками (Times New Roman) или декоративные (Papyrus, Comic Sans) запрещены.
• Размер: название — 20–24px, цена — 28–32px, описание — 16px. Никогда не используйте меньше 14px — это нечитаемо на мобильных.
• Цвета: текст — чёрный (#000000) или темно-серый (#333333). Белый текст на белом фоне — ошибка, которая приведёт к отказу.
• Запрещённые фразы: «Лучший», «Самый дешёвый», «Невероятная цена», «Гарантия 100%», «Только сегодня». Эти формулировки блокируются алгоритмами.

Если вы добавляете описание — делайте его в стиле «факт + польза». Например: «Комплект из 5 пакетов для хранения. Экономит до 30% места в шкафу». Такой текст не нарушает правила и работает на конверсию.

Тестирование и экспорт: как проверить и сохранить

Перед экспортом проверьте карточку на трёх уровнях:

1. На макете: включите режим «Preview» в Figma и переключитесь на мобильный экран (375×812 — iPhone 13). Убедитесь, что текст не обрезается, цена видна, изображение не сжимается.
2. На реальном устройстве: отправьте ссылку на карточку через Figma Share на телефон. Откройте её в браузере — это имитирует поведение покупателя.
3. Проверьте размеры: экспортируйте изображение в JPG/WebP и проверьте его в свойствах файла. Размер должен быть не менее 1500×1500 пикселей.

Экспорт: выберите слой с карточкой → нажмите «Export» → выберите формат WebP (лучший выбор) → качество 90% → именуйте файл по шаблону: название_товара_цвет_артикул.webp. Не используйте пробелы — только подчёркивания.

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

Дмитрий работает с крупными брендами, которые продают на всех платформах. Его ключевые принципы:

• Используйте один акцентный цвет — только на цене и скидке. Всё остальное — в серых тонах.
• Добавляйте в изображение 1–2 элемента контекста: например, руку, держащую товар, или фон в стиле «домашняя обстановка». Это создаёт эмоциональную связь.
• Никогда не размещайте текст на изображении. Даже если это разрешено — он не будет читаться на маленьком экране.
• Тестируйте 3 варианта карточки с разными цветами цен — и выбирайте тот, где конверсия выше на 15%.

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

Заключение

Создание карточек для маркетплейсов в Figma — это не просто дизайнерская задача, а стратегический инструмент роста продаж. Правильно сделанная карточка работает 24/7: она привлекает внимание, вызывает доверие и побуждает к покупке, даже когда вы спите. Использование Figma позволяет стандартизировать процесс, масштабировать его на сотни товаров и минимизировать ошибки, которые раньше требовали недель доработок.

Сегодня, когда конкуренция растёт, а алгоритмы становятся всё жёстче, те, кто использует системный подход — создают шаблоны, тестируют, оптимизируют — получают в 2–3 раза больше продаж, чем те, кто загружает фото «как есть».

• Всегда используйте размер 1500×1500 пикселей и белый фон — это база для всех маркетплейсов.
• Создавайте компоненты и стили в Figma — это ускорит работу в 5 раз.
• Экспортируйте в WebP — это улучшит скорость загрузки и снизит отказы.
• Никогда не добавляйте текст на изображение — даже если это разрешено.
• Тестируйте карточки на реальном телефоне — алгоритмы и пользователи видят по-разному.