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

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

Основные элементы карточки товара

Карточка товара — это не просто изображение и цена. Это комплексный интерфейсный элемент, объединяющий визуальную и информационную составляющие. Каждый компонент должен быть продуман до мелочей: от расположения кнопки «В корзину» до цвета акцентной метки «Хит продаж».
Стандартный набор элементов включает:

• Изображение товара (основное и дополнительные ракурсы).
• Название продукта.
• Цена (текущая, старая при наличии скидки).
• Рейтинг и количество отзывов.
• Кнопка действия («В корзину», «Купить в один клик»).
• Дополнительные индикаторы: наличие, доставка, скидка, новинка.

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

Какие данные чаще всего влияют на конверсию

Исследования Baymard Institute показывают, что 78% пользователей обращают внимание на изображение, 64% — на цену, 51% — на наличие скидки. Рейтинг и отзывы влияют на доверие, особенно в нишах с высокой степенью риска (электроника, одежда).

Подготовка проекта в Figma

Прежде чем начинать создавать карточки, необходимо правильно настроить файл. Это сэкономит время при масштабировании и работе в команде.
Создайте отдельную страницу (page) в Figma под названием «Компоненты» или «Design System». Здесь будут храниться:

• Цветовые стили (text styles и color styles).
• Шрифтовые стили (размеры, насыщенность, интерлиньяж).
• Отступы и грид-сетки (например, 8px baseline grid).
• Готовые компоненты: кнопки, иконки, теги.

Используйте систему именования: например, для цветов — `Text / Primary`, `Background / Surface`, `Accent / Red`. Для шрифтов — `Heading / H3`, `Body / Small`, `Label / Medium`.

Настройка сетки и отступов

Рекомендуется использовать сетку с шагом 8px. Это упрощает верстку и делает интерфейс визуально сбалансированным. Задайте внутренние отступы карточки: 16px по бокам, 12–16px сверху и снизу. Расстояние между элементами — кратно 8px (8, 16, 24).

Создание карточки товара по шагам

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

1. Определите тип карточки: каталог, главная, мини-карточка. Это влияет на размер и состав элементов.
2. Создайте фрейм: задайте размер, например, 280x400px для стандартной карточки в каталоге.
3. Добавьте изображение: используйте фигуру с заливкой (image fill), установите объект — cover, чтобы изображение масштабировалось без искажений.
4. Разместите текстовые блоки: название, цена, рейтинг — привяжите к стилям из design system.
5. Добавьте кнопку: используйте готовый компонент кнопки, чтобы сохранить единообразие.
6. Вставьте метки: скидка, новинка, хит — оформите как отдельные компоненты с цветовой кодификацией.

Пример структуры карточки

• Верх: изображение (200x200px).
• Центр: название (до двух строк), рейтинг (звёзды + число отзывов).
• Нижняя часть: цена (актуальная и зачёркнутая старая), кнопка «В корзину».
• Угол изображения: метка скидки (например, –30%).

Работа с компонентами и авто-макетами

Компоненты и авто-макеты — ключевые инструменты Figma для создания гибких и поддерживаемых карточек.
Компонент — это переиспользуемый элемент. Создав один раз кнопку «В корзину», вы можете использовать её в десятках карточек. При изменении мастер-компонента все экземпляры обновятся автоматически.
Авто-макет (Auto Layout) позволяет создавать динамические контейнеры. Например, если название товара слишком длинное, авто-макет автоматически увеличит высоту блока, сохранив отступы.

1. Выделите группу элементов (название, цена, кнопка).
2. Нажмите «Auto Layout» в правой панели.
3. Задайте направление (vertical), отступы (gap) и выравнивание.
4. Включите wrap, если нужно переносить элементы на новую строку.

Создание вариаций через component properties

Figma позволяет создавать вариации компонентов: например, карточка с меткой «Новинка» и без. Используйте Component Properties:

• Добавьте свойство «Badge» (да/нет).
• Создайте вариант с видимой меткой.
• Назначьте условия отображения.

Теперь дизайнер может переключать состояния одной кликом, не нарушая целостности макета.

Адаптивная вёрстка и отзывчивость

Карточка должна корректно отображаться на всех устройствах. В Figma это реализуется через frame constraints и auto layout.
Задайте ограничения для фрейма карточки:

• Ширина: hugging (подстраивается под контент) или fixed (фиксированная).
• Высота: hug contents, чтобы карточка росла при длинных названиях.

Для адаптивного каталога создайте несколько версий карточки:

• Desktop: полная версия с рейтингом, кнопкой, скидкой.
• Tablet: упрощённая — без кнопки, только «+».
• Mobile: минималистичная — изображение, название, цена.

Как проверить отзывчивость

Измените ширину фрейма и посмотрите, как ведут себя элементы:

• Не выходят ли тексты за границы?
• Сохраняются ли отступы?
• Правильно ли переносятся строки?

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

Передача макетов разработчикам

Один из главных критериев успешного дизайна — простота передачи в разработку. Figma предоставляет мощные инструменты для этого.
Разработчики используют режим «Dev Mode», где могут:

• Просматривать значения отступов, цветов, шрифтов.
• Копировать CSS-свойства.
• Экспортировать изображения в нужных форматах (SVG, PNG).

Чтобы упростить работу:

• Называйте слои понятно: не «Rectangle 3», а «Image Container».
• Группируйте элементы логически: «Price Block», «Badge».
• Добавляйте комментарии к спорным моментам.

Чек-лист для передачи

• Все стили заданы как text и color styles.
• Компоненты вынесены в библиотеку.
• Автомакеты настроены корректно.
• Добавлены states: hover, active, sold out.
• Предоставлены все состояния карточки (в наличии, нет в наличии, с предзаказом).

Ошибки, которые нельзя допускать

Даже опытные дизайнеры совершают ошибки при создании карточек. Вот самые распространённые:

• Отсутствие единой системы стилей: каждый текст имеет разный размер и цвет. Это ведёт к визуальному хаосу.
• Жёсткая привязка к размеру: карточка не реагирует на изменение контента. Длинное название ломает макет.
• Игнорирование состояний: нет отображения «нет в наличии» или «предзаказ». Разработчики вынуждены догадываться.
• Слишком много информации: карточка перегружена. Пользователь не может сосредоточиться на главном.
• Несогласованность с дизайн-системой: используются неофициальные цвета, шрифты, отступы.

Как избежать ошибок

• Проводите аудит карточек раз в месяц.
• Создайте чек-лист проверки перед сдачей.
• Просите коллег пройти по карточкам глазами пользователя.
• Тестируйте с данными разной длины: короткие и длинные названия, цены с разным количеством знаков.

Экспертное мнение

Создание карточек товара — это не просто дизайн, это стратегия конверсии. Успешные карточки работают на доверие, ясность и действие.

Используйте A/B тестирование для проверки гипотез: например, влияет ли наличие кнопки «В корзину» прямо в карточке на конверсию. По данным AB Tasty, добавление кнопки увеличивает CTR на 27%.
Также внедряйте микроинтеракции: при наведении показывайте второй ракурс товара или кнопку «Быстрый просмотр». Это повышает вовлечённость без перегрузки интерфейса.

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

Заключение

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

• Всегда начинайте с подготовки design system: цвета, шрифты, отступы.
• Применяйте авто-макеты для гибкости и адаптивности.
• Создавайте компоненты с вариациями (properties) для разных состояний.
• Тестируйте карточки на реальных данных и разных устройствах.
• Обеспечьте прозрачную передачу в разработку через Dev Mode и чёткую структуру слоёв.