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

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

Figma — один из самых популярных инструментов среди дизайнеров. Но многие селлеры используют её для карточек товаров самостоятельно, без дизайнерского образования. И это работает.

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

В этом гайде разберём всё по шагам: от настройки холста до экспорта готового файла для Wildberries и Ozon.

Требования к размерам: что нужно знать до начала работы

Прежде чем открывать Figma, разберитесь с техническими требованиями маркетплейсов. Размеры для Wildberries и Ozon немного отличаются.

Важно: соотношение сторон для WB — 3:4. Для Ozon можно использовать квадрат (1:1) или вертикаль (3:4). Создавайте файл сразу в нужном соотношении, чтобы потом не кадрировать.

Про разрешение

Figma работает в пикселях. Для маркетплейсов достаточно 72–96 PPI (пикселей на дюйм) — это стандарт для экранной графики. Не нужно делать 300 DPI, как для печати. Файл будет тяжелее, а результат на экране — тот же.

Шаг 1–3: Настройка проекта в Figma

Шаг 1. Создайте новый файл и фрейм

1. Зайдите на figma.com и войдите в аккаунт (или зарегистрируйтесь бесплатно).
2. Нажмите «New design file».
3. В левом меню выберите инструмент Frame (горячая клавиша F).
4. Нарисуйте фрейм на холсте или введите размеры вручную в правой панели: ширина 900, высота 1200.

Фрейм — это ваш «холст» для одного слайда инфографики. Дайте ему понятное название, например «WB_инфографика_1».

Шаг 2. Настройте сетку и направляющие

Добавьте отступы, чтобы текст и элементы не «прилипали» к краям. Это критично: Wildberries иногда обрезает края при отображении.

1. Выделите фрейм.
2. В правой панели найдите раздел «Layout grid» и нажмите +.
3. Выберите тип «Margin» и установите отступ 40–60 пикселей со всех сторон.

Все важные элементы — текст, иконки, плашки — должны находиться внутри этих отступов.

Шаг 3. Загрузите фото товара

1. Перетащите фото товара прямо в Figma (формат PNG с прозрачным фоном — идеально).
2. Расположите его на фрейме: обычно товар занимает 50–70% площади карточки.
3. Используйте Ctrl+Shift+H и Ctrl+Shift+V для выравнивания по центру.

Если фото на белом фоне без прозрачности — не страшно. Поставьте белый фрейм и наложите картинку сверху. Главное, чтобы границы товара и фона совпадали.

Шаг 4–6: Создание инфографики в Figma

Шаг 4. Добавьте текстовые блоки

Текст на инфографике для маркетплейсов — это не описание. Это короткие, конкретные тезисы, которые покупатель читает за 3 секунды.

Правила текста на карточке:

• Максимум 5–7 слов на один тезис
• Размер шрифта — минимум 28–32px для основного текста
• Используйте 2 шрифта: один для заголовков (жирный), один для пояснений
• Контраст текста и фона — не менее 4.5:1

Чтобы добавить текст: нажмите T, кликните на холсте и введите текст. В правой панели настройте шрифт, размер и цвет.

Шаг 5. Расставьте иконки и иллюстрации

Иконки делают инфографику понятной без чтения. В Figma можно найти готовые иконки через плагин «Iconify» или «Material Design Icons».

1. Зайдите в Plugins → Browse plugins in Community.
2. Найдите Iconify и установите.
3. Запустите плагин: Plugins → Iconify.
4. Введите название иконки (например, «shield», «star», «truck») и вставьте в макет.

Иконки должны визуально «рифмоваться» с тезисами рядом. Иконка замка + «Безопасный материал», иконка грузовика + «Доставка за 2 дня» — понятная связка.

Шаг 6. Оформите цветовую схему

Используйте цвета бренда или выберите палитру из 2–3 цветов. Не больше. Пёстрые карточки смотрятся дёшево и отпугивают покупателей.

Быстрая схема для инфографики:

• Основной цвет — для заголовков и акцентов (например, #FF5733)
• Нейтральный — для фона плашек (#F5F5F5 или белый)
• Цвет текста — тёмно-серый или чёрный (#2D2D2D)

Чтобы сохранить цвета как стили в Figma: выделите элемент → в правой панели нажмите на иконку стиля рядом с цветом → «Create style». Теперь один клик применяет нужный цвет к любому элементу.

Какие слайды делать: 5 работающих форматов

Инфографика для маркетплейсов — это обычно 3–6 дополнительных слайдов после главного фото товара. Вот форматы, которые реально влияют на конверсию:

Создавайте каждый слайд как отдельный фрейм в том же файле Figma. Называйте их по порядку: «WB_слайд_1», «WB_слайд_2» и так далее — это упростит экспорт.

Экспорт и типичные ошибки

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

1. Выделите все нужные фреймы (удерживайте Shift при клике).
2. В правой панели прокрутите вниз до раздела «Export».
3. Нажмите + и выберите формат: PNG (для прозрачного фона) или JPEG (для белого фона).
4. Масштаб — 1×, этого достаточно при правильных размерах холста.
5. Нажмите «Export [N] layers».

Файлы сохранятся в папку «Downloads». Проверьте размер: для маркетплейсов файл должен быть до 10 МБ. Если больше — снизьте качество JPEG до 80% или уменьшите разрешение.

Типичные ошибки при работе с Figma

• Текст слишком мелкий. На мобильном телефоне карточка маленькая. Если шрифт меньше 24px — покупатель не прочитает.
• Слишком много текста. Инфографика — не описание товара. 3–5 тезисов максимум на слайде.
• Низкий контраст. Серый текст на светло-сером фоне — классическая ошибка. Проверяйте контраст через плагин «Contrast».
• Неправильное соотношение сторон. Загрузили горизонтальную картинку на WB — маркетплейс обрежет и сломает дизайн.
• Растровые иконки низкого качества. Используйте SVG-иконки, они масштабируются без потери качества.

Полезные плагины Figma для инфографики

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

• Iconify — тысячи бесплатных иконок прямо в Figma. Незаменим для оформления тезисов.
• Unsplash — бесплатные фоновые текстуры и паттерны без авторских прав.
• Contrast — мгновенная проверка контраста текста и фона. Не дайте читаемости подвести.
• Remove BG — удаление фона с фото товара прямо внутри Figma.
• Figma to WB / Figma to Ozon — специализированные плагины с шаблонами под размеры маркетплейсов (ищите в Community).
• Style Organizer — порядок в цветовых стилях при работе с несколькими карточками.

Установка любого плагина: Plugins → Browse plugins in Community → поиск по названию → «Install».

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

Figma платная или бесплатная?

Базовый тариф Figma бесплатен. Он позволяет создавать неограниченное количество файлов в режиме «Starter». Для работы с инфографикой на маркетплейсы его полностью хватает. Платный тариф (от $15/мес) нужен командной работе и расширенным функциям.

Какой размер холста делать для Wildberries?

Рекомендуемый размер — 900×1200 пикселей (соотношение 3:4). Минимальный — 700×900. Загружайте изображения в формате JPEG или PNG. Файл не должен превышать 10 МБ.

Можно ли использовать один шаблон Figma для разных товаров?

Да, и это правильный подход. Создайте базовый шаблон с сеткой, стилями и компонентами. Для каждого нового товара дублируйте файл (Ctrl+D) и меняйте только фото, текст и цвета. Это экономит 70–80% времени на каждой следующей карточке.

Сколько времени занимает создание инфографики в Figma?

Первая карточка с нуля — 3–5 часов: освоение инструмента, создание шаблона, подбор шрифтов и цветов. Следующие карточки по готовому шаблону — 30–60 минут. Если нужно быстрее — используйте специализированные сервисы для инфографики, где шаблоны уже готовы.

Где взять готовые шаблоны Figma для маркетплейсов?

Ищите в Figma Community (figma.com/community) по запросам «маркетплейс», «wildberries», «ozon card». Часть шаблонов бесплатна. Также шаблоны продают на Behance, Etsy и в Telegram-каналах для дизайнеров. Средняя цена — 500–2000 рублей за комплект из 5–10 слайдов.