Как сделать карточку товара в figma

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

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

Структура карточки товара: из чего состоит эффективный шаблон

Перед тем как открыть Figma, важно понять, какие элементы должна содержать карточка товара. Базовая структура включает изображение, название, цену, рейтинг, кнопку действия и маркеры (скидка, хит продаж, наличие). Однако в зависимости от ниши (одежда, электроника, продукты) состав может меняться. Например, для одежды важны размеры и цвета, а для техники — характеристики и совместимость.

Основные компоненты:

• Изображение товара — центральный визуальный акцент, должен быть качественным и занимать до 50% площади карточки.
• Название — чёткое, без лишних деталей, легко читаемое даже в сетке из 4–6 колонок.
• Цена — основная и старая (если есть скидка), выделена жирным или цветом.
• Рейтинг — звёзды или количество отзывов, добавляют доверия.
• Кнопка «В корзину» или «Подробнее» — призыв к действию, должен быть заметным.
• Маркеры — значки или ярлыки («Акция», «Новинка», «Под заказ»).

Дополнительные элементы зависят от бизнес-логики. Например, в агрегаторах туров могут быть даты, длительность поездки, уровень комфорта. В онлайн-кинотеатре — жанр, возрастной рейтинг, продолжительность фильма.

Как определить минимальный и полный набор данных

Не все элементы должны быть видны всегда. Используйте принцип прогрессивного раскрытия: базовая версия — для сетки, развёрнутая — при наведении или в карусели. Это помогает избежать перегруженности.

Настройка рабочего пространства в Figma

Перед началом работы подготовьте файл: создайте страницу (page), установите сетку, настройте текстовые и цветовые стили. Это залог согласованности и быстрой итерации. Используйте один файл для всей дизайн-системы, чтобы карточки интегрировались с другими компонентами.

Начните с создания фрейма под стандартные размеры карточки. Чаще всего это 280×400 пикселей для десктопа и 160×240 — для мобильных. Установите сетку 8px, что соответствует современным практикам разработки. Это упростит выравнивание и экспортирование.

Создайте стили:

• Цвета: основной, акцентный, фоновый, текстовый, ошибки, успех.
• Текст: заголовок (H3), название товара, цена, старая цена, подпись.
• Тени: карточка должна иметь лёгкий box-shadow для объёмности.

Подготовка библиотек и импорт ресурсов

Если работаете в команде, используйте библиотеки (Libraries) для общих компонентов. Подключите иконки (например, от Feather Icons или Material Symbols), шрифты (Inter, SF Pro, Roboto) и заранее подготовленные стили. Это гарантирует, что ваша карточка будет соответствовать корпоративному стилю.

Создание карточки с помощью Auto Layout

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

Начните с создания фрейма и включения Auto Layout (Ctrl+Shift+A). Направление — вертикальное. Добавьте внутрь:

1. Изображение (вложенный фрейм 280×280 px, с object-fit cover).
2. Блок контента: ещё один Auto Layout с направлением vertical.
3. Внутри — название, цена, рейтинг, кнопка.

Настройте отступы: 16px по краям, 12px между элементами. Используйте padding, а не свободное пространство. Это делает поведение предсказуемым. Для цены задайте horizontal layout, чтобы старая и новая цена были рядом.

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

Создайте отдельные фреймы для mobile, tablet и desktop. Свяжите их через Variants позже. Используйте Constraints: для изображения — scale to fit, для кнопки — bottom-left. Это обеспечит корректное поведение при изменении размеров.

Для мобильной версии уменьшите шрифты, скройте второстепенные элементы (например, количество отзывов), увеличьте кнопку. Автоматические макеты позволяют всё это делать без дублирования слоёв.

Превращение карточки в компонент с вариантами

После того как базовая карточка готова, превратите её в компонент (Component). Выделите фрейм и нажмите «Create Component». Это позволит использовать её в других файлах и страницах. Но настоящая мощь — в вариантах (Variants).

Создайте несколько состояний:

• Доступен / Нет в наличии
• Со скидкой / Без скидки
• Новинка / Хит продаж
• С рейтингом / Без рейтинга

Для этого продублируйте компонент, внесите изменения (например, добавьте ярлык «−30%»), затем выберите все версии и нажмите «Create Variant». Настройте свойства: например, property «Status» со значениями «Available», «OutOfStock».

Теперь в любом месте проекта вы можете выбрать карточку и переключать её состояние через панель свойств. Это особенно полезно при создании прототипов и демонстрации клиенту.

Использование плагинов для ускорения работы

Figma предлагает множество плагинов, которые упрощают работу с карточками:

• Content Reel — быстрая вставка изображений, названий, цен.
• Automate+ — массовое создание компонентов.
• Iconify — доступ к тысячам иконок.
• Variables (встроенные) — управление данными, например, ценами или статусами.

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

Интеграция в дизайн-систему и масштабирование

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

Создайте страницу «Components» в вашем Figma-файле. Разместите там:

• Карточку товара (все варианты)
• Отдельные элементы: кнопка «В корзину», рейтинг, маркер
• Примеры использования: сетка 2×2, карусель, список

Это поможет новым дизайнерам быстро освоиться и снизит количество споров с разработчиками. Кроме того, используйте режим «Dev Mode» для аннотирования отступов, цветов и шрифтов.

Подготовка к передаче в разработку

Когда карточка готова, убедитесь, что:

• Все тексты используют стили, а не встроенные шрифты.
• Изображения имеют метку «Image» и понятное имя (product-image).
• Кнопки помечены как интерактивные (можно добавить hover-состояние).
• Указаны breakpoints для адаптивности.

Экспортируйте макет в виде ссылки с правами просмотра. Добавьте комментарии к спорным моментам: например, как ведёт себя карточка при наведении курсора.

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

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

• Отсутствие Auto Layout. Ручное позиционирование приводит к рассогласованию при правках. Всегда используйте автоматические макеты.
• Жёстко заданные размеры. Название товара может быть длиннее, чем ожидалось. Убедитесь, что текстовые блоки могут расти.
• Игнорирование состояний. Забыть про «нет в наличии» — частая ошибка. Пользователь должен сразу видеть статус.
• Перегруженность информацией. Чем больше элементов, тем сложнее принять решение. Применяйте принцип минимального необходимого.
• Несогласованность с дизайн-системой. Кнопка «В корзину» должна быть такой же, как и на других страницах.

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

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

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

Заключение

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

• Всегда начинайте с анализа структуры и контекста использования карточки.
• Используйте Auto Layout для адаптивности и удобства правок.
• Превращайте карточку в компонент с вариантами для масштабирования.
• Интегрируйте в дизайн-систему и следите за единообразием.
• Тестируйте карточку на пользователях и учитывайте обратную связь.