Figma для инфографики карточек товаров: как сделать слайды для WB, Ozon и Я.Маркета

Разбираем новое по теме карточек товаров каждую неделю: инструменты, ошибки, требования площадок. Подпишитесь на Продавашкин, чтобы не пропустить.

Зачем использовать Figma для карточек товара?

Коротко: Figma дает пиксельную точность и систему компонентов, которых нет у онлайн-конструкторов. Но для одного продавца с пятью товарами - это перебор.

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

Что Figma дает для работы с карточками:

• Компоненты. Один раз создаете плашку с преимуществом - дальше переиспользуете на всех карточках. Поменяли цвет в одном месте - он обновился везде.
• Auto Layout. Элементы выстраиваются автоматически: добавили строку характеристик - остальные сдвинулись. Не нужно двигать каждый блок вручную.
• Совместная работа. Два человека могут редактировать один файл одновременно. Если работаете с дизайнером - видите правки в реальном времени.
• Бесплатный тариф. До трех проектов - бесплатно. Для небольшого магазина этого достаточно.

«Figma: профессиональный векторный графический редактор, который предоставляет максимальную свободу для дизайна. Требует определенных навыков и больше времени на создание макета с нуля, но позволяет добиться полной уникальности» - TopCheck, vc.ru

При этом Figma - не волшебная кнопка. Интерфейс на английском, готовых шаблонов под маркетплейсы нет из коробки, а для обработки фото нужны дополнительные плагины. Если у вас пять товаров и нет опыта в дизайне, проще начать с Flyvi или Canva, а Figma подключить, когда линейка вырастет до 30-50 позиций.

Какие размеры артбордов выставить для каждого маркетплейса?

Коротко: универсальный размер - 1500 на 2000 пикселей (3:4). Из него можно кадрировать под любую площадку.

Самая частая ошибка новичка в Figma - неправильные размеры. Карточка сделана красиво, но после загрузки обрезается или теряет качество. Вот актуальные требования площадок на 2026 год:

Ozon в 2025-2026 году переходит с квадратного формата (1:1) на вертикальный (3:4) для всех категорий. Если делаете карточки сейчас, сразу берите 3:4 - не придется переделывать.

Как создать артборд в Figma:

• 1. Нажмите F (Frame) или выберите Frame Tool на панели сверху.
• 2. Справа в панели свойств введите ширину 1500 и высоту 2000.
• 3. Назовите фрейм по шаблону: WB-slide-01, Ozon-slide-01 - потом проще экспортировать.

Важно. Не путайте размер артборда и размер в поисковой выдаче маркетплейса. Покупатель видит карточку в миниатюре примерно 190 на 250 пикселей. Текст, который читается на полном размере, в миниатюре может превратиться в кашу. Всегда проверяйте уменьшенную версию.

Как настроить Figma под карточки товара с нуля?

Коротко: создайте файл, настройте сетку из 12 колонок и соберите библиотеку цветов и шрифтов - на всё уйдет 15 минут.

Открывайте Figma (figma.com), создайте новый файл. Дальше по шагам:

• 1. Создайте страницы по площадкам. В левой панели добавьте три страницы: WB, Ozon, ЯМ. Так слайды не перемешаются.
• 2. Сделайте фрейм нужного размера. F - введите 1500 x 2000. Для каждого слайда карточки - отдельный фрейм.
• 3. Добавьте сетку. Выберите фрейм, справа в Design нажмите + у Layout Grid. Поставьте Columns: 12, Margin: 60, Gutter: 20. Сетка помогает выравнивать текст и картинки.
• 4. Настройте цвета. Создайте 3-4 цвета: основной, акцентный, фон, текст. Перейдите в Local Variables (иконка ромба внизу левой панели) и добавьте их как переменные. Теперь поменять палитру для всей карточки - одно действие.
• 5. Выберите 1-2 шрифта. Для инфографики маркетплейсов подходят простые гротески: Inter, Montserrat, Nunito Sans. Один для заголовков, один для текста. Три и больше шрифтов - верный признак хаоса.

«На карточке нарушено несколько базовых правил типографики. Шрифты сильно различаются по типу, размеру и начертанию. Ритм и композиция нарушаются» - Логомашина, блог

Не хотите разбираться с настройкой? Продавашкин собирает карточку товара для WB, Ozon и Я.Маркета из фото с телефона за 3 минуты - текст, слайды и проверка на запрещенные слова. 3 карточки бесплатно по промокоду СТАРТ.

Какие плагины поставить для работы с карточками?

Коротко: минимальный набор - плагин для удаления фона, плагин для мокапов и типограф для русского текста.

Figma из коробки не умеет удалять фон с фотографий, делать мокапы и правильно расставлять кавычки в русском тексте. Всё это закрывают плагины. Устанавливаются за секунду: Community - Plugins - Install.

Удаление фона

Мокапы и визуализация

Текст и эффекты

Обратите внимание: плагин Remove BG (ONNX) работает локально и не отправляет ваши фото на чужие серверы. Для товаров, которые еще не в продаже, это может быть принципиально.

Как собрать первый слайд карточки по шагам?

Коротко: загрузите фото товара, удалите фон, поставьте на цветную подложку, добавьте текст с главной выгодой.

Разберем на примере обложки - первого слайда карточки для Wildberries.

• 1. Создайте фрейм 1500 x 2000. Залейте фон нейтральным цветом (светло-серый, пастельный - не белый, иначе сольется с интерфейсом WB).
• 2. Перетащите фото товара в фрейм. Figma поддерживает PNG, JPG, WebP.
• 3. Удалите фон. Запустите плагин Remove BG (Ctrl+/ - наберите Remove BG - Run). Через 5-10 секунд фон исчезнет.
• 4. Разместите товар. Он должен занимать 60-70% площади фрейма. Снизу оставьте место для текста.
• 5. Добавьте текст. Нажмите T, напишите главную выгоду товара. Например: «Не скользит на любой поверхности». Размер шрифта - от 48 pt, чтобы читался в миниатюре.
• 6. Добавьте плашку. Создайте прямоугольник (R), скруглите углы на 16 px, поставьте акцентный цвет. Положите текст сверху - получится бейдж с выгодой.
• 7. Проверьте в миниатюре. Нажмите Ctrl+0, потом Ctrl+- несколько раз, пока фрейм не уменьшится до размера ногтя. Текст читается? Товар виден? Если нет - укрупните.

«Контент на маркетплейсах потребляют быстро. И в основном с маленьких экранов: на Ozon более 90% заказов пользователи совершают через мобильное приложение. Поэтому если покупателю сложно разобрать слова в карточке - он может уйти со страницы» - Skillbox Media, skillbox.ru

Какой порядок слайдов работает?

Коротко: обложка - выгоды - характеристики - сцена использования - гарантия. Это не догма, а рабочая последовательность.

«Есть просто инфографика для маркетплейса, а есть продуктовая воронка, состоящая из качественной последовательности слайдов. Инфографика просто информирует человека, а продуктовая воронка вовлекает, удерживает человека в карточке товара и продает» - Андрей Батталов, Т-Банк Секреты

Рабочая структура для большинства товаров:

• 1. Обложка. Товар крупно + одна главная выгода. Должна цеплять в поисковой выдаче.
• 2. Выгоды. 3-4 преимущества с иконками. Не «высокое качество», а «не пачкается», «складывается за секунду».
• 3. Характеристики. Размеры, вес, материал, состав. Конкретные цифры снижают возвраты.
• 4. Сцена использования. Товар в реальной жизни: на кухне, в спортзале, в интерьере.
• 5. Сравнение или комплектация. Что входит в набор, чем отличаетесь от аналогов.
• 6. Гарантия и доверие. Сертификаты, условия возврата, отзывы.

Для простого аксессуара хватит 4-5 слайдов. Для техники или мебели нужны 7-8, потому что вопросов у покупателя больше.

Figma или онлайн-конструктор - что выбрать?

Коротко: для 5-10 товаров проще Flyvi или Canva. Для 30+ товаров с единым стилем Figma окупается.

Flyvi - российский сервис, специально заточенный под маркетплейсы. Есть готовые шаблоны для WB и Ozon, удаление фона в один клик, экспорт в нужных размерах. Для старта подойдет лучше.

Figma побеждает, когда карточек много: компоненты и переменные позволяют обновить стиль всех 50 карточек одним движением. В Canva или Flyvi придется править каждую вручную. Подробнее о всех инструментах для инфографики - в статье Инфографика для маркетплейсов: как сделать, где заказать, какие инструменты использовать.

Где взять бесплатные шаблоны для Figma?

Коротко: в Figma Community есть готовые шаблоны для WB и Ozon. Дублируйте в свой проект и адаптируйте.

Figma Community - это библиотека файлов, которыми делятся другие дизайнеры. Для карточек маркетплейсов есть несколько популярных шаблонов:

• Исходник дизайна карточки товара для МП - 11 000 пользователей. Базовая структура с плашками и иконками.
• Wildberries - Карточки товара - 4 100 пользователей. Готовые артборды под WB.
• Шаблон для WB / OZON - универсальный набор под обе площадки.

Как использовать: зайдите в Figma Community, в поиске наберите «инфографика маркетплейс» или «wildberries карточка». Нажмите Duplicate - файл скопируется в ваш аккаунт. Дальше меняйте фото, тексты и цвета под свой товар.

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

Какие правила площадок нарушать нельзя?

Коротко: нельзя писать цены, ставить чужие логотипы и использовать превосходную степень без доказательств.

Карточка, которая не прошла модерацию, бесполезна. Вот актуальные запреты на 2026 год:

• Цены и скидки - запрещены на инфографике на всех площадках
• Чужие логотипы - нельзя, даже в формате «аналог бренда X»
• «Лучший», «№1», «Хит продаж» - превосходная степень без документального подтверждения
• Контакты продавца, QR-коды - запрещены
• Призывы к действию - «Купи сейчас», «Скидка только сегодня»
• Обещания за отзывы - «Оставь отзыв и получи подарок»
• Лишняя латиница - с 2026 года по 168-ФЗ ограничено использование иностранных слов. «New», «Sale», «Premium» лучше заменить на русские аналоги. Подробнее о требованиях закона - в статье ФЗ-168 и иностранные слова в карточках товаров

Специфика по площадкам:

• Ozon: на главном фото инфографика запрещена - только чистый товар. Инфографику можно ставить на дополнительные фото.
• Яндекс Маркет: фон главного фото строго белый, товар должен занимать не менее 2/3 площади.
• Wildberries: инфографика допускается на всех фото, включая главное.

«Маркетплейс отклонит карточку, если инфографика перекрывает изображение товара; фон карточки не должен сливаться с товаром; запрещается использовать субъективные описания товара, такие как "Лучший", "Первый номер", "Хит продаж"» - Виктор Подольский, СберБизнес

Типичные ошибки при работе в Figma для маркетплейсов

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

• 1. Цветовой взрыв. Пять разных цветов, три градиента, два паттерна. Глаз не понимает, куда смотреть. Правило: 2-3 цвета максимум, один акцентный.

• 2. Мелкий текст. Дизайнер работает на большом мониторе и видит каждую букву. Покупатель открывает карточку на телефоне - и текст превращается в серое пятно. Минимальный размер шрифта для инфографики - 36-48 pt при артборде 1500 x 2000.

• 3. Копия конкурента. Посмотрели, как сделал сосед - и повторили. Вся выдача выглядит одинаково, покупатель не отличает одну карточку от другой.

• 4. Общие слова вместо характеристик. «Высокое качество», «превосходный дизайн» - пустые формулировки. Покупатель хочет знать: 183 x 61 см, толщина 6 мм, материал TPE, вес 800 г. Как грамотно оформить всю карточку - в статье Дизайн карточки товара для маркетплейсов.

• 5. Забытый экспорт. В Figma нет кнопки «экспортировать для WB». Нужно вручную: выбрать фрейм - Export (правая панель) - формат PNG или JPEG, 1x - Export. Проверьте вес файла: не больше 10 МБ.

«Слишком много разношерстных цветов, шрифтов и элементов сбивает фокус. В итоге глаз устает, ключевое сообщение теряется» - wb-photo.ru, источник

Как делать карточки быстрее с помощью компонентов Figma?

Коротко: соберите библиотеку из 10-15 компонентов - плашки, иконки, текстовые блоки. Новая карточка будет собираться за 15 минут вместо часа.

Компоненты в Figma - это переиспользуемые элементы. Создали один раз, используете во всех карточках. Обновили оригинал - все копии обновились автоматически.

Минимальная библиотека для карточек маркетплейса:

• Плашка выгоды (иконка + текст)
• Бейдж (скругленный прямоугольник + текст)
• Строка характеристики (название + значение)
• Текстовый блок с заголовком
• Ценник (перечеркнутая старая цена + новая) - для внутреннего использования, не для загрузки

Как создать компонент: выделите элемент, нажмите Ctrl+Alt+K. Теперь его можно вставлять через Assets (левая панель). Чтобы изменить текст или иконку в копии, просто кликните дважды.

Auto Layout (Shift+A) делает компоненты адаптивными: текст стал длиннее - плашка растянулась. Не нужно подгонять размер вручную.

При линейке из 30+ товаров библиотека компонентов экономит часы. Вы собираете карточку из готовых блоков как из конструктора, а не рисуете с нуля каждый раз.

Источники

• Figma Help - Auto Layout - https://help.figma.com/hc/en-us/articles/30987538800023 - официальная документация Figma
• TopCheck: программы для создания инфографики на маркетплейсах - https://vc.ru/marketplace/2659448-programmy-dlya-sozdaniya-infografiki-na-marketpleysakh - сравнение инструментов
• Skillbox Media: разбор дизайна карточек товара - https://skillbox.ru/media/design/good-bad-ugly-card/ - ошибки и антипаттерны
• Т-Банк Секреты: инфографика в карточке товара - https://secrets.tbank.ru/biznes-s-nulya/infografika-v-kartochke-tovara - продуктовая воронка слайдов
• Логомашина: ошибки в дизайне карточек товаров - https://blog.logomachine.ru/ispravlyaem_v_dva_schyota_glavnye_oshibki_v_dizajne_kartochek_tovarov - типографика и композиция
• wb-photo.ru: 9 ошибок инфографики - https://wb-photo.ru/9-oshibok-infografiki - типичные промахи
• Cleverence: как в Figma создать инфографику для Ozon или WB - https://www.cleverence.ru/articles/elektronnaya-kommertsiya/kak-v-figme-sozdat-infografiku-dlya-kartochki-tovara-na-ozone-ili-vayldberriz/ - безопасные зоны
• СберБизнес: инфографика для маркетплейсов - https://sberbusiness.live/publications/infografika-dlya-marketplejsov - правила площадок