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

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

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

Карточка товара — это микропосадочная страница, где пользователь за 3–5 секунд должен понять, что перед ним, сколько стоит товар и как его купить. Отсутствие ключевых элементов или их плохая организация резко снижают доверие и конверсию.

Обязательные компоненты:

• Фотография или изображение товара (желательно с возможностью масштабирования).
• Название продукта — чёткое, без лишних слов.
• Цена — выделенная, легко читаемая, с учётом скидок.
• Кнопка действия («В корзину», «Купить») — контрастная, заметная.
• Дополнительные атрибуты: рейтинг, наличие, цвет/размер, доставка.

Необязательные, но полезные элементы:

• Хит продаж / Новинка / Акция — бейджи.
• Количество отзывов.
• Быстрый просмотр (иконка глаза).
• Иконка сравнения или отложенных товаров.

Как определить приоритет контента

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

1. Изображение.
2. Название.
3. Цена.
4. CTA-кнопка.
5. Опции (цвет, размер).
6. Дополнительная информация (рейтинг, доставка).

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

Пошаговый процесс создания карточки в Figma

Создание карточки — не просто рисование рамок, а системная работа. Подходите к задаче как к проектированию повторяемого интерфейса.

Шаг 1: Определите формат и размер

Перед началом решите, где будет использоваться карточка:

• Каталог (сетка 3x, 4x).
• Страница рекомендаций.
• Мобильная версия.

Стандартные размеры:

• Десктоп: 280–320px по ширине, высота до 450px.
• Мобильный: 160–200px ширина, высота адаптивная.

Шаг 2: Создайте основной фрейм

• Откройте новый файл в Figma.
• Создайте фрейм размером 300×400px (например).
• Добавьте закруглённые углы (4–8px), тень (X: 0, Y: 2, Blur: 8, Opacity: 10%).
• Фон — белый или светло-серый (#F9F9F9).

Шаг 3: Добавьте изображение

• Вставьте изображение через Placeholder (например, Unsplash) или импортируйте.
• Ограничьте область — используйте маску (Mask) или фрейм с overflow: hidden.
• Размер изображения: 300×200px, соотношение 3:2.
• Добавьте границу (1px, #E0E0E0) и внутренние отступы (padding).

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

• Название: 16–18px, жирный, #212121.
• Цена: 18–20px, полужирный, #1A1A1A.
• Старая цена (при скидке): 14px, зачёркнутая, #999.
• Описание (опционально): 14px, #555, одна строка.

Используйте стили текста (Text Styles) в Figma — это упростит дальнейшие правки.

Шаг 5: Добавьте кнопку и иконки

• Создайте прямоугольник 100% ширины, высота 44px, радиус 8px.
• Цвет: #FF6B00 (оранжевый), текст «В корзину» — белый, 16px.
• Добавьте иконку корзины слева (через вектор или Lottie).
• При ховере: тень увеличивается, цвет темнеет на 10%.

Шаг 6: Настройте макет и отступы

Используйте сетку 8px:

• Внешний отступ карточки: 16px.
• Внутренние отступы: 12–16px.
• Между блоками: 8–12px.

Использование компонентов и вариантов

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

Как создать компонент карточки

• Выделите всю карточку (или её части).
• Нажмите Ctrl+Alt+K (или через правую панель: Create Component).
• Присвойте имя: Product Card / Default.

Варианты (Variants) для разных состояний

Варианты позволяют объединить несколько состояний одной карточки:

• Акция.
• Новинка.
• Нет в наличии.
• С быстрой доставкой.

Настройка:

1. Создайте несколько карточек с разными бейджами.
2. Превратите каждую в компонент.
3. Выберите все → правой кнопкой → Combine as Variants.
4. Настройте свойства: Type (dropdown: Default, Sale, New) и Availability (In stock, Out of stock).

Теперь в прототипе или design system можно переключать состояния одной кнопкой.

Работа с Auto Layout: гибкость и адаптивность

Auto Layout — один из самых мощных инструментов Figma. Он позволяет создавать динамические карточки, которые автоматически подстраиваются под контент.

Как применить Auto Layout к карточке

• Выделите все элементы внутри карточки.
• Нажмите Shift+A или выберите в панели: Auto Layout.
• Выберите направление: Vertical.
• Задайте отступы: 16px по краям, 8–12px между дочерними элементами.

Теперь при изменении текста карточка сама растягивается по высоте.

Гибкие элементы

• Изображение: задайте фиксированную высоту (200px), ширину — Fill container.
• Текст: ограничьте по количеству строк (Text Overflow: Truncate with …).
• Кнопка: ширину — Fill container, высота — 44px.

Адаптация под разные устройства

Создайте два варианта карточки:

• Десктоп: горизонтальный макет (изображение слева, текст справа).
• Мобильный: вертикальный (изображение сверху).

Используйте Constraints для контроля поведения при масштабировании:

• Изображение: Left-Right или Scale.
• Кнопка: Left-Right с отступами.
• Текст: Left-Right.

Типичные ошибки и как их избежать

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

Ошибка 1: Перегруженность информацией

• Проблема: слишком много текста, иконок, бейджей.
• Решение: оставьте только то, что влияет на решение. Уберите второстепенное.

Ошибка 2: Неадаптивная верстка

• Проблема: карточка ломается при длинном названии.
• Решение: используйте Auto Layout и ограничения по строкам.

Ошибка 3: Несогласованные стили

• Проблема: разные шрифты, отступы, цвета.
• Решение: создайте дизайн-систему с компонентами и стилями.

Ошибка 4: Игнорирование состояний

• Проблема: нет состояния «Нет в наличии» или «Скидка».
• Решение: предусмотрите все варианты заранее.

Ошибка 5: Слабая CTA-кнопка

• Проблема: кнопка не контрастная, текст «Подробнее» вместо «В корзину».
• Решение: используйте прямой призыв, яркий цвет, достаточный размер.

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

Дмитрий делится практикой:

• Тестируйте карточки с помощью 5-second test: покажите на 5 секунд — спросите, что запомнилось.
• Используйте heatmaps (например, в Figma + Maze) для анализа взгляда.
• Оптимизируйте под скролл: первые 3 карточки должны быть идеальны.

Также он рекомендует:

• Добавлять микроанимации при наведении (плавное появление кнопки).
• Использовать hover-состояния для дополнительных действий («Быстрый просмотр»).
• Интегрировать карточки с реальными данными через Figma Plugins (например, Content Reel).

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

Заключение

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

• Структурируйте карточку по приоритету: изображение → название → цена → CTA.
• Используйте компоненты и варианты для масштабирования.
• Применяйте Auto Layout для адаптивности и гибкости.
• Избегайте перегруженности и несогласованных стилей.
• Тестируйте карточки с реальными пользователями и данными.