Создание продающих карточек товаров в Figma: техники и приемы

Для кого эта статья:

• начинающие веб-дизайнеры и дизайнеры интерфейсов
• владельцы интернет-магазинов, стремящиеся улучшить конверсии

• студенты и профессионалы, интересующиеся освоением Figma и созданием дизайна для e-commerce проектов

  Качественные карточки товаров — это лицо любого интернет-магазина и прямой путь к увеличению конверсии. Figma стала золотым стандартом для создания прототипов e-commerce проектов, но многие новички теряются в её возможностях. Каждый день я вижу десятки однотипных ошибок в дизайне товарных карточек, которые отпугивают клиентов и снижают продажи. Готовы освоить профессиональный подход к созданию карточек товаров, который выделит ваш магазин среди конкурентов? Давайте разберёмся, как использовать мощь Figma для создания продающих карточек с нуля! 🚀

Хотите за 9 месяцев освоить не только создание карточек товаров, но и весь спектр веб-дизайна? Курс веб-дизайна от Skypro — это профессиональная программа с реальными проектами для портфолио. Вы научитесь создавать не просто карточки, а целые интерфейсы интернет-магазинов, от концепции до готового прототипа. Наши выпускники трудоустраиваются уже во время обучения, а некоторые повышают доход на 30-40% после завершения курса.

Что такое Figma и зачем создавать карточки товаров

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

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

Алексей Ковалёв, UX/UI-дизайнер

Когда я начинал работу над редизайном крупного маркетплейса электроники, клиент был уверен, что проблема низких конверсий кроется в сложной навигации. Анализ пользовательских сессий показал другое — 67% пользователей покидали сайт именно на странице категории, где отображались карточки товаров. Мы провели A/B-тестирование с обновлённым дизайном карточек, который создали в Figma. Основные изменения: увеличенные фотографии, акцентированная кнопка покупки и выделение скидок. Результат превзошёл ожидания — конверсия выросла на 23% за первый месяц после внедрения. Именно тогда я понял, что правильно спроектированная карточка товара — это не просто элемент интерфейса, а мощный инструмент продаж.

Создание карточек товаров в Figma имеет ряд преимуществ:

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

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

Подготовка к работе: настройка сетки и инструментов

Успешный дизайн карточки товара начинается с правильной организации рабочего пространства в Figma. Это закладывает основу для создания профессиональных и согласованных интерфейсов. 🛠️

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

1. Откройте Figma и создайте новый файл (Ctrl+N или ⌘+N)
2. На панели инструментов слева выберите инструмент Frame (F)
3. В правой панели свойств выберите размер Desktop (1440×1024) для настольной версии
4. Создайте дополнительные фреймы для мобильной версии (375×812) и планшетной версии (768×1024)

Шаг 2: Настройка сетки

Сетка обеспечивает визуальную структуру и помогает создавать согласованные макеты. Для карточек товаров рекомендуется использовать 12-колоночную сетку.

1. Выберите созданный фрейм
2. В правой панели найдите раздел "Layout Grid"
3. Нажмите "+" и выберите "Grid" (сетка)
4. Настройте следующие параметры:
   • Columns (колонки): 12
   • Margin (отступ): 20px с обеих сторон
   • Gutter (промежуток): 20px
   • Color: полупрозрачный синий (#0000FF с прозрачностью 10%)

Шаг 3: Создание цветовой палитры

Правильно организованная цветовая палитра обеспечит единообразие во всём дизайне и упростит дальнейшую работу.

1. Откройте панель "Color Styles" в меню слева
2. Добавьте основные цвета вашего бренда, нажав "+"
3. Создайте как минимум следующие цветовые стили:
   • Primary: основной цвет бренда
   • Secondary: дополнительный цвет
   • Background: для фона карточек (обычно светлый)
   • Text Primary: основной цвет текста
   • Text Secondary: цвет для менее важного текста
   • Accent: акцентный цвет для кнопок и важных элементов

Шаг 4: Настройка типографики

Единообразная типографика — залог профессионального дизайна.

1. Откройте панель "Text Styles"
2. Создайте стили для разных элементов карточки:
   • Product Title: 16-18px, полужирный
   • Price: 16-20px, полужирный
   • Description: 14px, обычный
   • Button Text: 14-16px, полужирный

Мария Светлова, Senior UI Designer

Один из моих клиентов, владелец интернет-магазина косметики, долго не мог понять, почему при отличном трафике у него такие низкие показатели конверсии. Когда он обратился ко мне, первое, что я заметила — полный хаос в дизайне карточек товаров. Каждая категория имела свой стиль, размеры кнопок различались, а расположение элементов было непредсказуемым. Мы начали с организации системы в Figma: создали чёткую сетку, определили компоненты и стили. Ключевым моментом стала настройка Auto Layout, которая позволила создать адаптивные карточки товаров. После внедрения нового дизайна время, проведённое пользователями на сайте, увеличилось на 18%, а конверсия выросла на 27%. Этот случай показал мне, насколько важна систематизация дизайна и почему нельзя пренебрегать этапом подготовки в Figma.

Шаг 5: Организация слоёв

Хорошо организованная структура слоёв сделает вашу работу более эффективной:

1. Создайте отдельную страницу для карточек товаров
2. В рамках этой страницы создайте фреймы для разных типов карточек (базовая, с акцией, с рейтингом и т.д.)
3. Используйте понятные имена для слоёв и группируйте связанные элементы

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

Пошаговое создание шаблона карточки товара в Figma

Теперь, когда рабочее пространство настроено, приступим к созданию базового шаблона карточки товара. Этот шаблон станет основой для всех карточек в вашем каталоге, поэтому важно уделить внимание каждой детали. 📝

Шаг 1: Создание основы карточки

1. В панели инструментов выберите "Rectangle" (R) и нарисуйте прямоугольник размером 280×400px
2. В правой панели настройте:
   • Corner Radius (скругление углов): 8px
   • Fill (заливка): используйте цвет Background из вашей палитры
   • Stroke (обводка): добавьте тонкую обводку 1px светло-серого цвета (#E5E5E5)
   • Effects (эффекты): добавьте лёгкую тень (Drop Shadow) с параметрами: x=0, y=2, blur=8, прозрачность=10%

Шаг 2: Настройка Auto Layout

Auto Layout — мощный инструмент Figma, который автоматически регулирует размещение и отступы между элементами.

1. Выделите созданный прямоугольник
2. Нажмите Shift+A или выберите "Add auto layout" в правой панели
3. Настройте параметры:
   • Direction: Vertical (сверху вниз)
   • Padding: 16px со всех сторон
   • Spacing Between Items: 12px

Шаг 3: Добавление области для изображения

1. Внутри карточки с Auto Layout создайте прямоугольник для изображения
2. Установите ширину равной 100% (заполнит всю доступную ширину карточки минус padding)
3. Высота: 180px
4. Corner Radius: 4px
5. Заливка: светло-серый цвет (#F5F5F5) как плейсхолдер

Шаг 4: Добавление основных текстовых элементов

1. Выберите инструмент Text (T) и добавьте следующие элементы:
   • Название товара: примените стиль "Product Title", выравнивание по левому краю, 2 строки максимум с многоточием
   • Короткое описание: стиль "Description", выравнивание по левому краю, светло-серый цвет
   • Цена: стиль "Price", выравнивание по левому краю, используйте основной цвет

Шаг 5: Создание кнопки "Добавить в корзину"

1. Нарисуйте прямоугольник высотой 40px и шириной 100%
2. Corner Radius: 4-6px
3. Fill: используйте акцентный цвет из вашей палитры
4. Добавьте текст "В корзину" с выравниванием по центру, белым цветом
5. Примените Auto Layout к кнопке (Shift+A) с отступами 12px по горизонтали

Шаг 6: Создание компонента

Превращение карточки в компонент позволит использовать её многократно с сохранением всех свойств.

1. Выделите всю карточку целиком
2. Нажмите Ctrl+Alt+K (или ⌘+Option+K) для создания компонента
3. Переименуйте компонент в "Product Card/Basic"

Шаг 7: Создание вариаций

1. Создайте копию компонента (Alt+перетащить или Option+перетащить)
2. Модифицируйте копию, добавив элемент скидки или бейдж "Новинка"
3. Превратите эту версию в компонент "Product Card/Sale" или "Product Card/New"

Шаг 8: Настройка вложенных компонентов

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

1. Выделите кнопку "В корзину"
2. Создайте компонент (Ctrl+Alt+K)
3. Повторите для изображения товара и блока с ценой

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

Компоненты карточки: фото, текст, цена и кнопки

Каждый элемент карточки товара играет важную роль в привлечении внимания пользователя и стимулировании покупки. Рассмотрим детально, как оптимизировать каждый компонент для максимальной эффективности. 🖼️

Изображение товара

Изображение — это первое, на что обращает внимание пользователь, поэтому его качество и представление критически важны.

• Оптимальные пропорции: для большинства товаров рекомендуется соотношение сторон 1:1 или 4:3
• Размер контейнера: установите фиксированную высоту 180-220px с шириной 100%
• Обработка изображений:
• Используйте режим Fill для контейнера изображения
• Установите параметр Clip Content для обрезки изображений по границам контейнера
• Настройте Position параметр для центрирования изображения в контейнере
• Дополнительные элементы:
• Иконка "Избранное" в правом верхнем углу (создайте круглую подложку для лучшей видимости)
• Бейдж "Скидка" или "Новинка" в левом верхнем углу
• Индикатор галереи, если у товара несколько фотографий

Текстовые элементы

Текстовая информация должна быть лаконичной и хорошо структурированной:

• Название товара:
• Используйте Text Truncate с максимум 2 строками
• Шрифт: 16px, полужирный
• Настройте Line Height (высоту строки) на 1.2-1.4 для лучшей читаемости
• Краткое описание:
• Одна строка с многоточием при переполнении
• Шрифт: 14px, нормальный вес
• Цвет: светло-серый (#666666 или аналогичный)
• Дополнительная информация:
• Артикул или SKU (мелким шрифтом, 12px)
• Наличие на складе (используйте цветовую индикацию: зелёный для "в наличии", оранжевый для "заканчивается")

Блок с ценой

Цена — один из решающих факторов при покупке, поэтому её представление требует особого внимания:

• Основная цена:
• Шрифт: 18-20px, полужирный
• Используйте акцентный цвет для выделения
• Добавьте символ валюты с правильным форматированием (пробелы, позиция символа)
• Старая цена (при наличии скидки):
• Шрифт: 14-16px, обычный
• Цвет: светло-серый
• Оформление: зачёркнутый текст (используйте свойство Text Decoration: Line-through)
• Размер скидки:
• Компактный бейдж рядом с ценой
• Яркий цвет (красный или оранжевый)
• Чёткое указание процента скидки (например, "-25%")

Кнопки и элементы действия

Кнопки призывают к действию и должны быть заметными и понятными:

• Кнопка "В корзину":
• Ширина: 100% или фиксированная (зависит от дизайн-системы)
• Высота: 40-48px для удобного нажатия пальцем на мобильных устройствах
• Цвет: яркий, контрастный относительно фона карточки
• Иконка корзины слева от текста для усиления визуального сигнала
• Анимация при наведении: создайте Prototype с изменением оттенка кнопки
• Дополнительные действия:
• "Быстрый просмотр" — иконка глаза или лупы, появляющаяся при наведении на изображение
• "Сравнить" — компактная иконка в правом нижнем углу карточки

Рейтинги и отзывы

Социальное доказательство повышает доверие пользователей:

• Визуализация рейтинга:
• Создайте компонент со звёздами (пустые, половинки и заполненные)
• Размер звёзд: компактный, но разборчивый (16-20px)
• Цвет звёзд: жёлтый или оранжевый (#FFB800 или аналогичный)
• Количество отзывов:
• Размещайте число в скобках рядом со звёздами
• Сделайте этот элемент кликабельным в прототипе

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

Адаптивные шаблоны карточек для разных платформ

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

Создание адаптивной системы карточек

1. Определите брейкпоинты — ключевые точки, где дизайн должен изменяться:
   • Desktop: ≥1024px
   • Tablet: 768-1023px
   • Mobile: ≤767px
2. Создайте отдельные фреймы для каждого брейкпоинта:
   • Desktop frame: 1440×1024px
   • Tablet frame: 768×1024px
   • Mobile frame: 375×812px

Десктопная версия карточки

Десктопная версия является наиболее полной и содержит все элементы:

• Размеры: ширина 280-320px, высота 400-450px
• Расположение элементов: вертикальное, с изображением вверху
• Особенности:
• Полное название товара (до 2 строк)
• Детальный блок с ценой, включая скидки
• Дополнительные характеристики товара
• Полноразмерная кнопка "В корзину"
• Отображение рейтинга и количества отзывов

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

Планшетная версия сохраняет большинство элементов десктопной, но с небольшими изменениями:

• Размеры: ширина 220-240px, высота 380-400px
• Расположение: вертикальное, с небольшим уплотнением элементов
• Особенности:
• Название товара ограничено 1-2 строками
• Сокращение некоторых второстепенных характеристик
• Сохранение всех основных элементов управления

Мобильная версия карточки

Мобильная версия требует наибольших изменений для обеспечения удобства использования:

• Размеры: ширина 160-180px, высота 300-320px
• Расположение: вертикальное, с максимальной компактностью
• Особенности:
• Название товара ограничено 1 строкой
• Упрощённый блок с ценой (только текущая цена и скидка)
• Кнопка "В корзину" может быть заменена на иконку для экономии места
• Рейтинг представлен только звёздами без текста
• Устранение несущественных элементов

Настройка Auto Layout для адаптивности

Auto Layout — ключевой инструмент для создания адаптивных компонентов:

1. Для десктопной версии:
   • Vertical Auto Layout с Padding 16px
   • Spacing Between Items: 12px
   • Resizing: Hug contents по вертикали, Fixed width по горизонтали
2. Для планшетной версии:
   • Те же настройки, но с Padding 12px
   • Spacing Between Items: 8px
3. Для мобильной версии:
   • Padding: 8px
   • Spacing Between Items: 6px
   • Изображение с уменьшенной высотой (140-160px)

Создание вариантов компонентов для разных платформ

Варианты (Variants) в Figma позволяют создавать компоненты, которые могут переключаться между различными состояниями:

1. Выделите все три версии карточки (Desktop, Tablet, Mobile)
2. Нажмите "Create Component" в верхней панели
3. В панели "Properties" справа добавьте свойство "Platform" с вариантами "Desktop", "Tablet" и "Mobile"
4. Теперь у вас есть единый компонент с переключаемыми вариантами для разных платформ

Адаптация для разных маркетплейсов и платформ

Различные платформы имеют свои требования к карточкам товаров:

• Шаблоны карточек для Wildberries:
• Акцент на изображении (соотношение 3:4)
• Ограниченная высота названия товара
• Яркое выделение скидок
• Дополнительные бейджи для промо-акций
• Шаблоны для Ozon:
• Квадратные изображения (соотношение 1:1)
• Подробное отображение рейтинга и отзывов
• Акцент на программе лояльности (бонусы)
• Адаптация для других платформ:
• Изучите требования и рекомендации каждой платформы
• Создайте отдельные компоненты или варианты для каждой платформы
• Используйте Auto Layout для быстрой перестройки элементов

Тестирование адаптивности

После создания адаптивных шаблонов необходимо проверить их работоспособность:

1. Используйте режим прототипа для проверки поведения карточек на разных устройствах
2. Протестируйте крайние случаи:
   • Очень длинные названия товаров
   • Товары с акциями, скидками и дополнительными бейджами
   • Изображения нестандартных пропорций
3. Просмотрите карточки на реальных устройствах, используя Figma Mirror или экспортируя прототип

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

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

Читайте также

• Как редактировать фото товаров для увеличения продаж: гайд
• Создаем карточки товаров в Photoshop: пошаговое руководство
• Создание профессиональных карточек товаров на Wildberries в Photoshop
• Как оформить идеальную карточку товара на Wildberries: 10 примеров
• Шаблоны карточек товаров: как увеличить продажи на 35% без затрат
• Создание продающей карточки товара в Figma для Wildberries: секреты
• Лучшие программы для Wildberries: как выбрать инструменты продавца
• ТОП-10 программ для карточек товаров: автоматизация, выгрузка, AI
• Шаблоны карточек товаров на Wildberries: полное руководство
• Как создать продающее описание товара на маркетплейсе: пошаговый гайд