Figma (Фигма) и Photoshop дают полный контроль над карточкой: вы сами расставляете товар, тексты и иконки до пикселя. Цена — время: каждый слайд собирается вручную, и серия из 5–7 слайдов на один товар может занять несколько часов. Ниже — пошаговая инструкция, как сделать карточку товара и слайд инфографики в Фигме, короткая версия для Photoshop и приёмы, которые ускоряют работу.
Как сделать карточку товара в Фигме: что подготовить
- Фото товара без фона — PNG с прозрачностью. Вырезать товар в Figma неудобно; проще удалить фон заранее — бесплатно, до 3 фото в день.
- Тексты — заголовок и 2–4 тезиса для каждого слайда.
- Шрифт с кириллицей — например, Onest, Montserrat или Inter из Google Fonts. Подробнее — в статье о шрифтах для инфографики.
- Иконки — один набор, лучше с лицензией MIT или Apache 2.0. Где взять — в статье об иконках и плашках.
Шаг 1. Фрейм 900×1200 и поля
Нажмите F (инструмент Frame), кликните по холсту и в правой панели задайте ширину 900 и высоту 1200. Это пропорция 3:4 — её показывают Wildberries, Ozon и Яндекс Маркет.
Сразу отметьте поля: отступите 40–60 пикселей от каждого края и не ставьте туда текст. Ozon накладывает на главное фото свои бейджи, а Яндекс Маркет показывает изображения, приведённые к формату 3:4.
Шаг 2. Фон
Нарисуйте прямоугольник на весь фрейм (R) и задайте заливку. Для главного фото — белый или светлый нейтральный, для слайдов — спокойный цвет из палитры товара. О выборе — в статье «Фон для инфографики».
Шаг 3. Товар
Перетащите PNG товара во фрейм. Масштабируйте с зажатым Shift, чтобы не исказить пропорции. Товар — главный элемент слайда: он должен занимать основную часть кадра и не упираться в края. Добавьте мягкую тень: эффект Drop shadow с большим размытием и низкой непрозрачностью.
Шаг 4. Заголовок и тезисы
Инструмент Text (T):
- заголовок — жирное начертание, 2 строки максимум;
- тезисы — обычное начертание, по одной строке;
- текст тёмный на светлом фоне или белый на тёмном.
Wildberries рекомендует контраст мелкого текста к фону не ниже 4,5:1, крупного или жирного — не ниже 3:1.
Шаг 5. Инфографика в Фигме: тезисы, иконки и плашки
Вставьте SVG-иконки и перекрасьте их в акцентный цвет. Тезис с иконкой удобно собрать в Auto layout (Shift+A): иконка и текст выстроятся в ряд с одинаковым отступом, а плашка-подложка будет растягиваться под длину текста.
Шаг 6. Компоненты для серии слайдов
Если слайдов несколько, сделайте повторяющиеся элементы компонентами: плашку тезиса, бейдж с цифрой, заголовок. Правка главного компонента применится ко всем копиям — стиль серии останется одинаковым. Копии можно менять (текст, цвет, размер), не разрывая связь.
Остальные слайды делайте дублированием фрейма (Ctrl/Cmd+D) и меняйте только товар и тексты.
Шаг 7. Экспорт
Выделите фрейм, в правой панели в разделе Export нажмите «+», выберите формат и масштаб:
- PNG — без потерь, файл тяжелее;
- JPG — легче, по умолчанию экспортируется в высоком качестве;
- масштаб 1x даст 900×1200, 2x — 1800×2400.
Все три площадки — Wildberries, Ozon и Яндекс Маркет — принимают JPG, PNG и WEBP до 10 МБ. Figma экспортирует PNG и JPG, а WEBP в её справке не упоминается. Проверьте вес файла перед загрузкой.
Как сделать карточку товара в Фотошопе
- Файл → Создать: ширина 900, высота 1200 пикселей, отметьте Монтажные области (Artboards).
- Поместите товар через Файл → Поместить встроенные — он станет смарт-объектом и не потеряет качество при масштабировании.
- Добавьте фон, текст (T) и иконки на отдельных слоях; тень — стилем слоя «Тень».
- Для серии создайте несколько монтажных областей в одном документе.
- Экспорт: Файл → Экспортировать → Экспортировать как — формат PNG или JPG и размер; для всех монтажных областей сразу — Монтажные области в файлы.
Сколько это занимает и как ускорить
Первый слайд в редакторе обычно отнимает больше всего времени: нужно выбрать шрифт, палитру, расставить элементы. Дальше помогают компоненты и дублирование, но вырезка товара, подбор иконок и тексты для каждого слайда остаются ручной работой.
Если нужно быстрее, часть работы можно отдать сервису:
- удалить фон — бесплатно, до 3 фото в день: товар на прозрачном фоне для Figma;
- взять готовые шаблоны карточек товаров для WB и Ozon вместо макета с нуля;
- сделать слайды в sellshot и, если нужно, доработать их вручную.
Ниже — карточки, которые сверстал ИИ-дизайнер sellshot: он доступен после регистрации, 5 кредитов за карточку.
Частые ошибки
- Фрейм не 3:4 — Ozon рекомендует 900×1200, а Яндекс Маркет приводит изображения к 3:4.
- Текст у самого края — на главном фото Ozon его могут закрыть бейджи.
- Шрифт без кириллицы — например, у Lato и Poppins кириллицы нет, и русские буквы отрисуются другим шрифтом.
- Экспорт в 0,5x или с низким качеством JPG — мыльная картинка.
- Разные стили слайдов — без компонентов серия быстро расползается.
Источники
- Фреймы в Figma, форматы и настройки экспорта, компоненты, auto layout — справка Figma.
- Политика Figma для пользователей из России и Беларуси и тарифы — Figma.
- Access from Russia — форум Figma, сообщения пользователей, не официальное заявление.
- Монтажные области, смарт-объекты, экспорт монтажных областей — справка Adobe Photoshop.
- Фото товаров: правила, рекомендации и частые ошибки — Wildberries.
