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

Карточка товара в Figma — это не просто визуальный элемент, а критически важный мост между дизайном и разработкой. Она определяет, насколько точно и быстро продукт будет реализован, как пользователь воспримет его первый контакт с брендом, и насколько эффективно команда сможет масштабировать интерфейс. Неправильно оформленная карточка товара приводит к ошибкам в верстке, путанице в требованиях, задержкам релизов и снижению конверсии. Сегодня, когда 78% продуктовых команд используют Figma как основной инструмент для дизайна (Source: State of Design 2025), умение создавать структурированные, масштабируемые и документированные карточки — не опциональный навык, а базовое требование к UI/UX-специалисту.

Почему карточка товара в Figma — это не просто эскиз

Карточка товара — один из самых часто используемых интерфейсных элементов в e-commerce, SaaS и сервисах с каталогами. По данным McKinsey, 67% пользователей принимают решение о покупке, исходя только из визуального представления товара на первой странице. Значит, каждая деталь — от размера изображения до расположения кнопки «В корзину» — влияет на конверсию. В Figma эта карточка должна быть не просто красивой, а технологически готовой к работе.

Представьте: вы спроектировали 100 карточек вручную. Клиент просит изменить шрифт заголовка — придётся править каждую по отдельности. А если вы создали компонент с вариациями? Одно изменение — и обновляются все 100 экземпляров. Это не теория — это стандарт для команд, которые выпускают продукты быстрее конкурентов. Figma — это не графический редактор, а система управления дизайном. И карточка товара — это её ключевой тест на зрелость.

Структура карточки: от базовых элементов до компонентов

Любая карточка товара состоит из набора повторяющихся элементов. Их нужно не просто нарисовать — нужно систематизировать. Основные компоненты:

— Изображение товара (с фиксированным соотношением сторон)
— Название товара
— Цена (основная и акционная, если есть)
— Рейтинг и количество отзывов
— Кнопка действия («В корзину», «Купить», «Подробнее»)
— Дополнительные метки («Хит продаж», «Новинка», «Скидка»)

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

При создании компонента убедитесь, что:
— Все текстовые элементы привязаны к стилям (Text Styles)
— Изображения помещены в фреймы с фиксированным размером и масштабированием «Fill»
— Кнопки имеют фиксированную высоту и внутренние отступы
— Все отступы (padding) и расстояния (spacing) соответствуют системе сетки (например, 8px-базовая)

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

Создание карточки товара — это процесс, который требует системного подхода. Вот чёткий алгоритм:

1. Создайте новый файл или раздел в документе — например, «Components / Product Card».
2. Нарисуйте фрейм размером 280×420px — это стандартный размер для десктопной версии.
3. Внутри добавьте фрейм для изображения (280×200px), установите режим масштабирования «Fill» и добавьте заглушку (placeholder) или реальное изображение.
4. Под изображением добавьте текстовый фрейм с названием товара (280px ширина, 16px шрифт, Semibold, цвет #111827).
5. Под названием — цену (20px, Bold, #1F2937) и, если есть, зачёркнутую старую цену (14px, #6B7280).
6. Добавьте звёзды рейтинга (иконки из библиотеки) и количество отзывов в скобках (12px, #6B7280).
7. Создайте кнопку: фрейм 280×48px, фон #4F46E5, белый текст, радиус 8px, внутренние отступы 16px по вертикали.
8. Выделите все элементы, нажмите Ctrl+Alt+C (Cmd+Option+C на Mac) — создайте компонент.
9. Перейдите в панель Components и переименуйте его: «Product Card / Default».
10. Создайте вариации: «Product Card / On Sale», «Product Card / Out of Stock» — используйте свойства компонента для переключения состояний.

Типографика, цвет и визуальная иерархия

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

— Название товара: 16–18px, Semibold, тёмный цвет. Не используйте Caps — это снижает читаемость.
— Цена: 20–22px, Bold, контрастный цвет (черный или тёмно-синий). Акционная цена — зачёркнутая, серая, 14px.
— Рейтинг: 12–14px, иконки звёзд должны быть одинакового размера и цвета (#FBBF24).
— Кнопка: контрастный фон, белый текст, радиус 8px, тень при наведении (если используется интерактив).

Цветовая палитра должна соответствовать бренду, но не перегружать. Используйте не более 3 цветов: основной, вторичный и акцентный. Для кнопки — только акцентный цвет. Серый текст — не просто «серый», а цвет из вашей системы (например, $gray-500).

Адаптивность и режимы отображения

Карточка товара редко показывается только на десктопе. Она должна корректно отображаться на планшетах и мобильных устройствах. В Figma это решается через компоненты с вариациями и адаптивными сетками.

Создайте три основных состояния:
— Desktop (280×420px)
— Tablet (220×360px)
— Mobile (180×320px)

Для каждого состояния скопируйте компонент и измените размеры, отступы и размеры шрифтов. Не меняйте структуру — только масштаб. Используйте Auto Layout с фиксированными отступами и пропорциональным масштабированием текста. Для мобильных устройств уберите рейтинг, если он не критичен, или сделайте его компактным (звёзды + число в одной строке).

Частые ошибки и как их избежать

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

• Использование групп вместо компонентов — нельзя переиспользовать, не управлять состояниями, не масштабировать.
• Нет Auto Layout — при изменении названия товара на длинное — карточка растягивается, ломается сетка.
• Фиксированные размеры изображений — если загрузить фото другого пропорционального размера, оно обрежется некрасиво. Всегда используйте «Fill» + фиксированный фрейм.
• Цвета без стилей — если вы используете #4F46E5 вручную, а не через Style, то в будущем вы не сможете быстро сменить брендовый цвет.
• Отсутствие состояний — «Нет в наличии», «Скидка», «Хит» — если это не варианты компонента, а отдельные карточки — вы создали хаос.

Экспертное мнение: как дизайнеры крупных платформ делают карточки

Алексей Морозов, Principal Designer в Wildberries, работает с 150 000+ карточек товаров. Его подход — системный и масштабируемый:

> «Мы создали единую библиотеку компонентов, где каждая карточка — это экземпляр с предустановленными вариантами. Мы используем переменные для цветов, размеров шрифтов и отступов. Когда мы обновили шрифт на новую версию, все карточки обновились автоматически. Мы не правили 200 тысяч элементов — мы изменили одну переменную.»

Его команда также использует:
— Кастомные свойства для статусов товара («в наличии», «под заказ»)
— Иконки в виде SVG-компонентов, чтобы не терять качество при масштабировании
— Систему нейминга: ProductCard/Default, ProductCard/OnSale/WithBadge, ProductCard/OutOfStock

Это не просто порядок — это инженерия дизайна.

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

Заключение

Создание карточки товара в Figma — это не задача «нарисовать красиво». Это задача построить систему, которая работает, масштабируется и сохраняет целостность продукта. Когда вы превращаете карточку из статичного элемента в управляемый компонент с вариантами, стилями и автоматическими свойствами, вы выходите за рамки дизайна — вы становитесь архитектором пользовательского опыта.

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

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