Рич-контент Ozon через Figma: как превратить дизайн в JSON

Почему rich-контент удобно делать в Figma

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

Проблема начинается после дизайна. Сам по себе макет в Figma нельзя просто загрузить в карточку товара как rich-контент. Ozon принимает rich-контент в специальной структуре, часто через JSON. Поэтому между красивым макетом и готовой карточкой появляется технический этап.

Rixfi закрывает этот разрыв: вы проектируете rich-контент в Figma, а затем превращаете его в JSON, который можно использовать для загрузки на Ozon.

Кому подходит такой способ

Подход «Figma → Rixfi → JSON → Ozon» особенно удобен:

• дизайнерам маркетплейсов;
• агентствам, которые делают карточки товаров;
• брендам с большим количеством SKU;
• селлерам, которые хотят сильное визуальное оформление;
• командам, где дизайн и загрузка карточек разделены между разными людьми.

Если вы уже делаете инфографику, баннеры и визуальные блоки в Figma, нет смысла пересобирать всё вручную в другом редакторе. Гораздо удобнее использовать Figma как источник дизайна, а Rixfi — как инструмент экспорта.

Чем Figma лучше ручной сборки

Быстрее проектировать визуал

В Figma удобно работать с композициями, сетками, компонентами, стилями, изображениями и текстом. Дизайнер видит карточку как цельный визуальный продукт, а не как набор отдельных технических блоков.

Проще править макеты

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

Удобнее работать в команде

Менеджер может оставить комментарий, дизайнер — внести правки, руководитель — согласовать визуал. После этого макет можно экспортировать через Rixfi.

Меньше технических ошибок

Ручная работа с JSON требует внимательности. Достаточно нарушить структуру или ошибиться с параметрами, чтобы rich-контент отображался некорректно. Автоматический экспорт снижает этот риск.

Как подготовить макет rich-контента в Figma

Чтобы экспорт прошёл корректно, макет должен быть собран аккуратно. Чем лучше структура в Figma, тем проще получить предсказуемый результат.

1. Разделите контент на блоки

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

• главный баннер;
• преимущества;
• сценарии использования;
• характеристики;
• комплектация;
• сравнение;
• финальный блок.

Такой подход помогает не запутаться и делает структуру rich-контента понятной.

2. Проверяйте читаемость текста

Текст на баннерах должен быть коротким и крупным. Не пытайтесь поместить в один блок всё описание товара. Rich-контент должен читаться быстро.

Хорошее правило: один блок — одна мысль.

3. Продумайте мобильное отображение

Даже если макет красиво выглядит на десктопе, он может плохо работать на мобильном экране. Проверяйте, чтобы:

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

Как работает экспорт через Rixfi

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

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

Общий процесс выглядит так:

1. Откройте Figma-плагин Rixfi и создайте страницу rich-контента.
2. Добавьте поддерживаемые блоки: баннер, шахматку, плитку, иконки, список, имидж, таблицу, текст или видео.
3. Отредактируйте тексты и изображения прямо на холсте Figma.
4. Проверьте, что обычная и мобильная версии блока связаны между собой.
5. Запустите проверку структуры перед выгрузкой.
6. Исправьте ошибки: нарушенные связи, отсутствующие изображения, неподходящие ссылки, сломанные служебные данные.
7. Выгрузите JSON и перенесите его в карточку товара на Ozon.

Такой процесс экономит время, потому что дизайнеру не нужно вручную переносить каждый блок в конструктор или писать JSON самостоятельно. При этом Rixfi не пытается выгрузить «что угодно»: если структура блока сломана слишком сильно, плагин покажет ошибку, а не создаст сомнительный JSON.

Что важно учесть перед экспортом

Не превращайте блоки в обычные группы слоев

Блоки Rixfi в Figma — это не просто декоративные группы. Внутри них есть служебные данные. Если вручную удалить важные узлы, переименовать структуру случайным образом или разорвать связь обычной и мобильной версии, плагин может остановить экспорт. Это не баг, а защита от некорректной выгрузки.

Следите за обычной и мобильной версиями

Плагин поддерживает связь между двумя версиями одного блока. При синхронизации он сверяет парные узлы, порядок элементов и служебные признаки. Если связь нарушена, проблему лучше исправить до генерации JSON, а не после загрузки в Ozon.

Используйте изображения хорошего качества

Плохие исходники не спасёт ни один инструмент. Если фото товара размытое, темное или неаккуратное, rich-контент будет выглядеть слабее. Изображения в плагине берутся из специальных контейнеров, поэтому важно аккуратно работать именно с ними.

Не делайте весь контент одной большой картинкой

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

Проверяйте ошибки и предупреждения

Если проблема не мешает выгрузке, Rixfi может показать предупреждение. Если ошибка критичная, экспорт будет остановлен. Например, если ссылка ведет не туда, отсутствуют обязательные данные или блок уже нельзя надежно распознать.

Пример структуры макета в Figma

Можно собрать rich-контент так:

1. Hero — главный баннер с товаром и оффером.
2. Benefits — 4 преимущества с иконками.
3. Usage — сценарии применения товара.
4. Details — крупные планы деталей.
5. Package — комплектация.
6. Final — финальный блок с ключевой выгодой.

Такая структура подходит для большинства товаров и легко адаптируется под разные категории.

Почему Rixfi полезен дизайнерам

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

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

Вывод

Figma удобна для дизайна rich-контента, но сама по себе не решает задачу загрузки на Ozon. Для этого нужен экспорт в подходящий формат. Rixfi помогает превратить макет из Figma в JSON и сократить ручную работу.

Если вы делаете карточки товаров, инфографику или rich-контент для Ozon, связка Figma и Rixfi может стать быстрым рабочим процессом: от дизайна до готового JSON.

FAQ

Можно ли сделать rich-контент Ozon в Figma?

Да, дизайн можно подготовить в Figma, а затем экспортировать его в JSON с помощью Rixfi.

Зачем нужен плагин, если есть Figma?

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

Нужно ли знать JSON?

Нет. Основная идея Rixfi — дать возможность работать визуально и получать готовый JSON без ручного написания кода.

Подходит ли способ для агентств?

Да. Агентствам удобно использовать Figma для дизайна, а Rixfi — для быстрого экспорта и передачи готового результата клиенту.