Инфографика в Figma для маркетплейсов: порядок работы

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

5 фреймовзакрывают обе площадки

×2масштаб макета к целевому размеру

5 МБпотолок для рич-контента WB

5 товаровс них окупается структура файла

Коротко. Заведите фреймы под целевые размеры: 900 × 1200 для Ozon и 700 × 900 для Wildberries, плюс 800 × 500 и 700 × 700 под виджеты рич-контента. Внутри фрейма задайте поля и безопасную зону, чтобы текст не попадал под бейджи площадки. Повторяющиеся элементы сделайте компонентами, тексты соберите автолейаутом. Экспорт настраивается один раз и дальше работает по всему файлу.

Почему инфографику собирают в Figma

У маркетплейсов работа устроена сериями: один товар редко бывает один. Появляется вторая расцветка, третий объём, сезонная версия. Ручная перерисовка каждой карточки в растровом редакторе съедает время, потому что там нет наследования.

Компоненты меняются централизованно. Поправили плашку в мастере, она обновилась во всех макетах.
Автолейаут держит отступы. Текст стал длиннее, блок перестроился сам, ничего не наезжает.
Экспорт настраивается один раз. Дальше выгрузка комплекта делается одной командой.
Файл открывается в браузере. Заказчик и подрядчик смотрят один документ, а не пересылают исходники.

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

Какие фреймы завести под площадки

Размеры берём не на глаз, а из требований площадок. Их четыре, и они не совпадают.

Фрейм	Размер	Куда идёт
Карточка Ozon	900 × 1200	главное и дополнительные изображения, пропорция 3:4
Карточка Wildberries	700 × 900	минимальное допустимое разрешение площадки
Рич-контент WB, «Картинка»	800 × 500	широкий виджет
Рич-контент WB, квадрат	700 × 700	деталь крупно
Рич-контент WB, вертикаль	700 × 900	товар целиком

Важно. Для Wildberries 700 × 900 — это минимум, а не рекомендация. Рисовать сразу в минимальном размере рискованно: любая последующая обрезка уводит кадр ниже порога. Рабочий приём — делать макет вдвое крупнее и экспортировать с масштабом.

Схема: один исходник в Figma и три экспорта под разные форматы площадок — Структура файла: мастер-макет, от него фреймы под площадки, из них экспорт. Правка вносится в мастер, а не в каждый формат.

Поля и безопасная зона

Главная причина, по которой макеты переделывают, не эстетика, а перекрытие. Ozon накладывает на главное фото собственные бейджи и иконки и просит не размещать в этих зонах инфографику и текст.

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

Проверять перекрытие всё равно нужно в редакторе площадки: только он показывает, как бейджи лягут на конкретный кадр. Подробности про зоны и запреты собраны в разборе размеров инфографики для Ozon.

Что делать компонентами, а что стилями

Разделение простое: повторяющаяся форма становится компонентом, повторяющееся оформление становится стилем.

Компоненты. Плашка характеристики, иконка с подписью, блок «состав», рамка изображения, подложка под текст.
Стили текста. Заголовок макета, подзаголовок, характеристика, сноска. Четырёх обычно достаточно.
Стили цвета. Фон, акцент, текст на светлом, текст на тёмном.
Варианты компонента. Одна плашка с состояниями вместо пяти похожих: короткий текст, длинный текст, с иконкой, без иконки.

Смысл в том, что при смене требований площадки правка делается в одном месте. Когда Ozon переводит категории на единую пропорцию 3:4, файл с компонентами перестраивается за час, а файл без них — за неделю.

Разбираю изменения площадок в Telegram. Когда меняются размеры и правила модерации, макеты приходится переделывать. Пишу заранее: что поменялось и какие фреймы затронет.

Читать в Telegram

Сколько текста ставить на макет

Здесь Figma не поможет, решает правило площадки. Wildberries прямо пишет: тексты влияют на рейтинг тем сильнее, чем больше их размер, а часть надписей влияет независимо от размера, включая упоминания скидок, срочности и гарантии.

Отсюда рабочий подход к вёрстке:

Одна мысль на кадр. Не пытайтесь уложить в один макет все характеристики.
Три-четыре слова на плашку. Длинные формулировки не читаются в плитке каталога.
Никаких обещаний. Скидки, гарантии, «хит продаж» запрещены прямо.
Проверка уменьшением. Уменьшите макет до ширины 320 пикселей: то, что не читается, лишнее.

Что именно площадка считает инфографикой и какие три элемента в ней должны быть, разобрано отдельно. Ограничения Wildberries по надписям собраны в материале про размер фото для карточки Wildberries.

Схема: макет рисуется вдвое крупнее и экспортируется с масштабом 0,5 — Макет вдвое крупнее целевого размера остаётся резким после экспорта и переживает любую обрезку.

Как настроить экспорт

Выберите формат под площадку. JPG для фото карточки, PNG там, где нужна прозрачность или резкая графика.
Задайте масштаб, а не размер. Макет вдвое крупнее целевого экспортируется с коэффициентом 0,5 и остаётся резким.
Проверьте вес. Ozon и Wildberries принимают файлы до 10 МБ, но рич-контент Wildberries — только до 5 МБ.
Держите имена файлов по слагу товара. Иначе комплект невозможно связать с карточкой при загрузке.
Выгружайте фреймами, а не выделением. Экспорт выделения теряет поля.

Конвейер на линейку товаров

Когда структура готова, добавление нового товара выглядит так.

Дублируете страницу-шаблон. Все фреймы и компоненты уже на месте.
Меняете фотографии. Подставляете снимки в рамки-компоненты.
Правите тексты. Автолейаут перестраивает блоки сам.
Проверяете безопасную зону. Включаете слой-подсказку, смотрите, ничего ли не заехало.
Экспортируете комплект. Настройки уже заданы.

Такой файл окупается примерно с пятого товара. До этого проще рисовать напрямую, после — дешевле держать структуру.

Частые ошибки

Работа в минимальном размере. Макет 700 × 900 после любой обрезки уходит ниже порога площадки.
Текст в углах кадра. Перекрывается бейджами и элементами интерфейса.
Один макет во все форматы. Пропорции разные, изображение обрезается или растягивается.
Копирование вместо компонентов. Первая же правка требований превращается в ручной обход всех макетов.
Файл тяжелее лимита рич-контента. Пять мегабайт на Wildberries вместо десяти.

Когда комплект собран, остаётся выложить его по правилам площадки. Порядок для Wildberries: как добавить рич-контент. Для Ozon: рич-контент на Ozon.

Файл без компонентов заметен сразу: когда площадка меняет требования, работа на неделю превращается в ручной обход всех макетов линейки.

Герман Садуртдинов

Разборы карточек и требований площадок в канале

Показываю на живых примерах, что снимает модерация, где теряется площадь кадра и какие правки дают эффект сразу. Без спама.

Подписаться на канал

Что забрать с собой. Заводите фреймы под целевые размеры площадок, рисуйте вдвое крупнее и экспортируйте с масштабом. Повторяющиеся элементы делайте компонентами: при смене требований правка вносится один раз. Держите поля и пустые углы под бейджи площадки, а объём текста на макете — минимальным. Структура окупается примерно с пятого товара.

Источники

Частые вопросы

Какие размеры фреймов заводить в Figma?

900 × 1200 под карточку Ozon, 700 × 900 под карточку Wildberries, плюс 800 × 500, 700 × 700 и 700 × 900 под виджеты рич-контента Wildberries.

Можно ли рисовать сразу в размере площадки?

Лучше рисовать вдвое крупнее и экспортировать с масштабом. Макет в минимальном размере после обрезки уходит ниже допустимого разрешения.

Зачем компоненты, если товаров мало?

Структура окупается примерно с пятого товара. Для одной карточки проще нарисовать напрямую, для линейки компоненты экономят дни.

Как проверить, что текст не перекроют бейджи?

Оставить поля и пустые верхние углы, а перед публикацией посмотреть макет в редакторе площадки: только он показывает реальное наложение.

В каком формате экспортировать?

JPG для фотографий и PNG для графики с резкими краями. Вес до 10 МБ для карточки и до 5 МБ для рич-контента Wildberries.

Шаблон под площадки я не делаю, а упаковку и этикетку делаю

Оформление карточек и инфографики в услуги не входит. Упаковку и этикетку я делаю, цены на странице «Цены». Пришлите фото товара в упаковке, скажу, что в ней стоит поправить первым.

Оставить заявку

Смотрю сам, отвечаю в течение рабочего дня. На выходе письменный разбор: что работает, что мешает, что поправить первым. Он остаётся у вас, даже если работать вместе не будем.

Инфографика в Figma для маркетплейсов: шаблон и порядок работы