Как сделать карточку товара в Figma за 10 минут — пошаговый макет для новичков

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

Что такое карточка товара и зачем она нужна

Карточка товара — это маленький модуль, который показывает:

• изображение товара,
• название,
• цену,
• кнопку (чаще всего «Купить» или «В корзину»).

Эта карточка встречается везде — от маркетплейсов до лендингов. А ещё её часто просят сделать на собеседованиях или в тестовых заданиях.

Что мы будем делать

Вот как будет выглядеть финальный макет:

• Картинка товара (обложка)
• Название (в 2 строки максимум)
• Цена
• Кнопка «Купить» с лёгкой тенью и скруглением

Макет будет адаптивным, простым и легко кастомизируемым.

Подготовка: создаём фрейм

1. Открой Figma и нажми F — выбери размер Frame 400×500 px (удобный для карточки на десктоп).
2. Назови фрейм Product Card.
3. Залей фрейм светло-серым (#F7F7F7) — это придаст объём и выделит карточку на фоне.

Шаг 1. Добавляем изображение товара

1. Нарисуй прямоугольник 400×300 px.
2. Скругли углы на 8 px (в панели справа).
3. Залей картинку: нажми на прямоугольник → справа в Fill выбери Image → вставь фото товара.

Совет: если нет подходящего изображения — используй Unsplash плагин (Cmd+/ → Unsplash).

Шаг 2. Название товара

1. Под картинкой добавь текстовый блок.
2. Шрифт: Inter Bold, размер: 18 px, межстрочный интервал: 120%.
3. Пример: «Умная колонка MiniSound 3.0»

Не давай тексту растягиваться более чем на 2 строки — это нарушит визуальный ритм.

Шаг 3. Цена

1. Добавь текст ниже названия.
2. Стиль: Inter SemiBold, 16 px, цвет: тёмно-серый (#333).
3. Пример: «5 990 ₽»

Совет: можно сделать цену ярче (например, синим), если хочешь акцент.

Шаг 4. Кнопка «Купить»

1. Создай прямоугольник 120×36 px.
2. Цвет фона: насыщенный (например, #3366FF), текст — белый.
3. Скругление: 6 px, добавь лёгкую тень (эффекты → drop shadow).
4. Внутри помести текст «Купить», шрифт Inter Medium, 14 px.

Не забудь выровнять кнопку по центру карточки.

Готово. Но можно ещё лучше:

• Оберни всё в Auto Layout — тогда карточку будет легче масштабировать.
• Добавь hover-состояние для кнопки (например, сделать цвет темнее).
• Сделай вариант карточки для мобилок — с шириной 320 px.

Почему это важно

Карточка товара — это как «визитка» интерфейса. Она должна быть:

• читаемой,
• визуально сбалансированной,
• легко настраиваемой под CMS или платформу (Tilda, Shopify и др.).

Даже такой простой макет показывает твою логику, аккуратность и понимание интерфейсов.