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

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

Анализ и подготовка: что должна включать карточка товара

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

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

Основные компоненты карточки:

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

Определение целевой платформы

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

Создание сетки и каркаса карточки в Figma

Figma позволяет работать с фреймами, сетками и направляющими — это основа точного позиционирования. Начните с создания нового фрейма под карточку. Стандартные размеры: 280×400 пикселей для десктопа, 160×240 — для мобильного. Эти значения могут варьироваться в зависимости от макета страницы.

Настройте внутренние отступы (padding) — обычно 16–20 пикселей со всех сторон. Добавьте грид-сетку (Layout Grid) с шагом 4 или 8 пикселей для согласованности. Это поможет выравнивать текст, иконки и другие элементы по единой системе.

Создание фрейма и заливка

Создайте прямоугольник с закруглёнными углами (4–8 px радиус). Цвет фона — белый или светло-серый (#FFFFFF или #F8F9FA). Добавьте тень (Effect → Drop Shadow): X: 0, Y: 2, Blur: 8, Color: rgba(0,0,0,0.1). Это добавит объём и отделит карточку от фона.

Если карточка используется в сетке (grid), задайте расстояние между карточками — 16 или 24 px. В Figma это можно сделать через Auto Layout в родительском фрейме.

Структура контента: как правильно организовать элементы

Логическая структура карточки определяет её эффективность. Пользователь должен за 2–3 секунды понять, что это за товар и стоит ли кликать. Следуйте принципу визуальной иерархии: сверху — самое важное.

Разделите карточку на три зоны:

1. Верхняя — изображение
2. Центральная — текстовая информация
3. Нижняя — действия и бейджи

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

Добавьте фигуру под изображение (например, 240×240 px). Убедитесь, что она масштабируется пропорционально. Используйте плейсхолдеры (через Plugins → Unsplash или Placeholder) для быстрого заполнения. Добавьте обводку при ховере, если нужно показать интерактивность.

Текстовые блоки

Название товара — крупный шрифт (16–18 px), полужирный. Цена — 14–16 px, контрастный цвет. Старая цена — зачёркнута, серым цветом (#999999). Рейтинг — иконки звёзд (можно использовать SVG из библиотеки) и текст «4.8 (127)».

Располагайте элементы с вертикальным интервалом 8–12 px. Выравнивайте по левому краю — это улучшает сканирование.

Работа с авто-макетами для адаптивной верстки

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

Выделите все элементы карточки, нажмите Shift+A или выберите «Add Auto Layout». Настройте направление (Vertical), отступы (Padding) и расстояние между элементами (Space between). Теперь при изменении текста карточка будет автоматически подстраиваться.

Горизонтальные группы

Для группировки элементов (например, рейтинг + отзывы) создайте отдельный авто-макет с направлением Horizontal. Это обеспечит правильное выравнивание иконок и текста. Используйте Align Items → Center для вертикального центрирования.

Адаптация под разные языки

Если проект мультиязычный, проверьте, как карточка ведёт себя с длинными названиями. Auto Layout автоматически увеличит высоту, если текст не помещается. Ограничьте максимальную ширину названия и включите перенос строк (Text → Truncation → Wrap).

Компоненты и варианты: масштабирование и повторное использование

Когда базовая карточка готова, превратите её в компонент (Component). Это позволит использовать один шаблон во всём проекте. При изменении оригинала все экземпляры обновятся автоматически.

Выделите карточку, нажмите Ctrl+Alt+K (или Cmd+Option+K на Mac). Теперь можно перетаскивать её в другие фреймы. Но настоящая сила — в вариантах (Variants).

Создание вариантов

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

• Обычная
• Со скидкой
• Недоступна (серый фон, кнопка «Нет в наличии»)
• В избранном
• Мобильная версия

Сгруппируйте их в одном компоненте с разными свойствами (например, состояние: default, sale, out-of-stock). Это даёт команде единый источник истины и ускоряет прототипирование.

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

Если работаете в команде, вынесите компоненты в отдельную библиотеку (Team Library). Разработчики смогут подключить её и точно следовать дизайн-системе. Также можно добавить описание, состояния и примеры использования.

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

Хороший дизайн карточки — это не только красиво, но и функционально. Цвет, шрифт, контраст и пространство работают на восприятие. Используйте контраст для выделения цены и кнопок. Акцентный цвет (например, красный или оранжевый) должен быть частью дизайн-системы.

Выберите легко читаемые шрифты: Inter, Roboto, SF Pro. Избегайте декоративных начертаний. Размеры должны соответствовать нормам WCAG: минимум 14 px для основного текста, контраст не менее 4.5:1.

Цветовые состояния

Карточка может менять вид в зависимости от состояния:

• Наведение — тень усиливается, появляется эффект поднятия
• Активное состояние — рамка или цвет фона меняется
• Заблокировано — серый фильтр, opacity 60%

Используйте Prototype для демонстрации этих переходов.

Тестирование и прототип: проверка взаимодействий

Перейдите в режим Prototype, чтобы смоделировать поведение карточки. Например:

• При наведении — смена изображения, появление кнопок
• Клик по карточке — переход на страницу товара
• Клик по «В корзину» — анимация добавления

Свяжите фреймы стрелками, выберите триггер (On Hover, On Click) и действие (Navigate To). Это поможет команде понять логику и протестировать пользовательский путь.

Проверка на разных устройствах

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

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

«Сегодня карточка товара — это не просто блок, а микроинтерфейс. Успешные проекты используют динамические карточки: с анимацией, микроинтеракциями, персонализацией. В Figma это реализуется через Variants, Smart Animate и Variables (в новых версиях). Например, можно создать карточку, которая показывает разные предложения в зависимости от поведения пользователя. Главное — не перегружать. Лучше меньше, но точнее.»

— Екатерина Смирнова, главный дизайнер e-commerce платформы, 12 лет опыта

Она также отмечает, что Figma продолжает развивать функции для системного дизайна: теперь можно использовать Variables для управления состояниями (например, isOnSale = true), что делает прототипы ещё ближе к реальному продукту.

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

Заключение

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

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