Как в фигме сделать карточку для вб

Карточка товара для Wildberries — это визуальное представление продукта, которое напрямую влияет на решение покупателя. В Figma её создание требует понимания технических требований маркетплейса, знания принципов композиции и внимания к деталям: от размеров до цветовой палитры. Главное — сочетать привлекательность с информативностью.

Требования Wildberries к карточкам товаров

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

Основные параметры изображения: минимальный размер — 1080×1080 пикселей, соотношение сторон 1:1, формат JPEG или PNG, объём файла не более 5 Мб. Изображение должно быть чётким, без водяных знаков, рамок и логотипов других брендов. Фон — белый или однотонный, если это не противоречит типу товара (например, одежда на модели).

На карточке нельзя размещать контактную информацию, ссылки, QR-коды или надписи вроде «скидка», «распродажа» — эти элементы должны находиться в описании или тегах. Однако можно использовать графические акценты: значки «новинка», «топ продаж» или «экологичный материал», если они соответствуют правилам WB.

Ошибки при подготовке изображений

• Низкое разрешение — делает товар дешёвым и ненадёжным в глазах покупателя.
• Перегруженный фон — отвлекает внимание от продукта.
• Мелкий текст — нечитаем на мобильных экранах.
• Использование запрещённых слов — вызывает модерацию и задержку публикации.

Подготовка файла в Figma: стартовые шаги

Откройте Figma и создайте новый проект. Выберите опцию «Design file», затем добавьте фрейм размером 1080×1080 пикселей. Удобно использовать плагин «WB Frame Generator» или вручную задать параметры через панель свойств справа.

Настройте сетку: 4px-грид поможет выравнивать элементы. Включите «Layout Grids» и выберите «Square» с шагом 4 пикселя. Это обеспечит точность и масштабируемость. Также полезно включить «Snap to pixel» и «Pixel preview» в настройках просмотра.

Создайте несколько страниц в файле: например, «1. Макет», «2. Цвета», «3. Шрифты», «4. Экспорт». Так вы сможете систематизировать работу и быстро вносить правки. На странице «Цвета» задайте переменные: primary, secondary, text, background — это ускорит колор-коррекцию.

Работа с командой: советы по коллаборации

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

Также полезно подключить плагины:

• Content Reel — для быстрой вставки текстовых шаблонов (например, «Состав: 100% хлопок»).
• Unsplash — если нужен фон или референсы.
• Auto Layout — встроенная функция Figma, незаменима для выравнивания блоков.

Структура карточки: что должно быть на изображении

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

Центр — основное изображение товара. Оно занимает 60–70% площади. Важно, чтобы продукт был сфотографирован качественно: с нескольких ракурсов, в хорошем свете, без теней. Если это одежда — желательно на модели.

Верхний или нижний угол — место для брендинга. Логотип компании, слоган или фирменный значок. Размер — не более 10% от высоты изображения. Располагайте его в левом верхнем или правом нижнем углу — это зоны, куда взгляд попадает естественно.

Боковые или нижние поля — для ключевых преимуществ. Используйте иконки + короткий текст: «Быстрая доставка», «Гипоаллергенная ткань», «30 дней на возврат». Не более 3–4 таких элементов, иначе будет перегруз.

Пример структуры карточки для трикотажного платья

1. Фон — светло-бежевый градиент (не яркий, не отвлекает).
2. Центр — фото платья на модели в трёх четвертях роста.
3. Левый верхний угол — логотип бренда (размер 80×80 px).
4. Правый нижний угол — значок «Экологичный материал» с текстом.
5. Нижняя панель — три иконки: «Уход: ручная стирка», «Состав: 95% хлопок», «Размеры: S–XL».
6. Верхняя часть — хэштег #ЛетоНачалось (если разрешено).

Дизайн и выбор шрифтов: как сделать текст читаемым

Шрифт — не просто стиль, а инструмент восприятия. На маленьком экране смартфона текст должен быть понятен за 0,5 секунды. Поэтому выбирайте простые, беззасечковые шрифты: Inter, Roboto, Helvetica, SF Pro.

Размеры:

• Заголовок (если есть) — от 48 px.
• Ключевые выгоды — от 32 px.
• Дополнительная информация — от 24 px.

Избегайте курсива, подчёркивания и капслока (кроме логотипов). Используйте полужирное начертание для акцентов. Цвет текста — тёмный (черный или тёмно-серый #333333), на светлом фоне.

Как добавить шрифты в Figma

Если вы используете Google Fonts, установите шрифт на компьютер и перезапустите Figma. Или подключите через плагин «Google Fonts for Figma». После этого шрифт появится в списке.

Для командной работы: экспортируйте текстовые стили как «Text Styles» в библиотеке. Тогда все участники будут использовать одинаковые настройки.

Цвет и контраст: работа с эмоциями покупателя

Цвет влияет на решение купить. Например, синий вызывает доверие, красный — срочность, зелёный — экологичность. Но на карточке важно не переборщить. Используйте максимум 3–4 цвета: основной, акцентный, фоновый, текстовый.

Проверьте контраст между текстом и фоном. Минимальное соотношение — 4.5:1 для нормального зрения (по стандарту WCAG). В Figma это можно проверить с помощью плагина «Contrast Checker».

Если товар яркий, фон делайте нейтральным. Если товар — нейтральный (например, белая футболка), можно добавить мягкий градиент или текстуру, но без перегруза.

Создание макета: пошаговая инструкция

1. Создайте фрейм 1080×1080 px — задайте имя, например «Card_Main».
2. Добавьте фон — закрасьте фигуру цветом или градиентом.
3. Вставьте изображение товара — используйте «Place Image» (Ctrl+Alt+K), масштабируйте с учётом отступов.
4. Добавьте текстовые блоки — выделите выгоды, состав, размеры.
5. Вставьте иконки — скачайте из Figma Community (поиск: «e-commerce icons») или используйте SVG.
6. Выровняйте всё через Auto Layout — особенно строки с иконками и текстом.
7. Проверьте отступы — минимум 60 px от краёв для мобильного обрезания.
8. Сгруппируйте слои — назовите группы: «Product Photo», «Benefits», «Branding».

Проверка перед экспортом

• Все слои видимы и не перекрываются.
• Текст не «выпадает» за границы.
• Нет скрытых объектов с ошибками.
• Размер файла после экспорта — до 5 Мб.

Проверка и экспорт: финальные шаги

Перед экспортом сделайте «прогонку» по чек-листу. Откройте макет на телефоне: откройте ссылку Figma, уменьшите масштаб до 50%. Проверьте, читается ли текст, видно ли преимущество, не теряется ли логотип.

Экспорт: выделите фрейм, нажмите «Export» в правой панели. Выберите формат JPEG (80–90% quality) или PNG (если нужна прозрачность). Имя файла — понятное, например: «WB_Dress_Blue_v3.jpg».

Если вы делаете серию изображений, используйте «Batch Export» — выделите все фреймы и экспортируйте сразу. Это сэкономит время.

Экспертное мнение: советы от специалистов по e-commerce дизайну

По её словам, успешные карточки имеют «точку входа» — элемент, который цепляет взгляд: необычная форма текста, игривая иконка, контрастный акцент. Также она советует тестировать несколько вариантов: A/B-тестирование изображений через рекламные кампании.

Ещё один подход — сторителлинг. Даже на статичной карточке можно рассказать историю: «Создано с заботой о коже», «Произведено в экостудии». Это усиливает эмоциональную связь.

Вопросы и ответы

Заключение

Создание карточки для Wildberries в Figma — это не просто графическая задача, а стратегический элемент продвижения. Успешный макет сочетает техническое соответствие, визуальную привлекательность и информационную ёмкость. Каждый пиксель должен работать на конверсию.

• Соблюдайте размеры 1080×1080 px и требования WB по содержанию.
• Используйте чёткие шрифты, контрастные цвета и минимум текста.
• Работайте с Auto Layout и сетками в Figma для точности.
• Тестируйте макет на мобильных устройствах перед экспортом.
• Обновляйте карточки регулярно, чтобы поддерживать актуальность.