Как сделать изображения для карточки товара в Figma

26 сентября 2026 г.

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

До начала макета проверьте актуальные требования конкретной площадки и категории: допустимые размеры изображения, пропорции, формат файла, ограничения по весу и требования к главному фото. Универсального размера для всех площадок нет. Если для учебного проекта используется рамка 900 × 1200 px, это только размер конкретного макета.

Подготовьте фотографии и данные о товаре

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

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

Главное фото полезно сохранить отдельно в исходном виде, особенно если площадка требует изображение без текста или дополнительной графики. Оформление следующих слайдов не должно менять цвет, форму или пропорции предмета.

Создайте рамку нужного размера

В Figma Design нажмите F, чтобы создать Frame (рамку). Его ширину и высоту задайте через поля W и H справа. Размеры берите из текущих требований площадки, а не из старого шаблона другой карточки.

Создайте отдельную рамку для каждого будущего изображения. Первую можно продублировать сочетанием Command + D на Mac или Control + D на Windows. Так все слайды получают одинаковый внешний размер.

Слои фотографии, текста и графики размещайте внутри соответствующего Frame. Если включён Clip Content (обрезать содержимое по границам рамки), всё, что выходит за его пределы, скрывается. После изменения W и H проверьте композицию: содержимое не масштабируется автоматически правильным образом только из-за изменения рамки.

Разместите фотографию без искажения товара

Изображение можно перетащить на рабочую область или импортировать через Shift + Command + K на Mac и Shift + Ctrl + K на Windows. После размещения фотография может использоваться как Image fill (изображение как заливка слоя).

В настройках изображения важны режимы Fill, Fit и Crop. Fill заполняет область, но часть фотографии может быть обрезана. Fit показывает изображение целиком и может оставить свободные поля. Crop позволяет вручную выбрать видимую область.

Если в режиме Fill исчезает край коробки, ручка или другой важный элемент, измените кадрирование. Не растягивайте фотографию по ширине или высоте так, чтобы менялась геометрия предмета.

Соберите три слайда с разными задачами

Слайд 1. Общий вид товара

Разместите фотографию коробки достаточно крупно и оставьте вокруг неё свободное пространство. Если площадка допускает текст на этом изображении, ограничьтесь коротким названием типа товара или известным отличительным признаком. Если главное фото должно быть без текста, сохраните его чистым.

Слайд 2. Размеры

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

Слайд 3. Состав комплекта

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

Как проверить композицию и текст

Один слайд лучше посвящать одной основной задаче. Общий вид показывает товар, следующий объясняет размеры, третий раскрывает комплект. Если поместить на одном изображении размеры, преимущества, инструкцию, комплектацию и несколько рекламных фраз, информация начинает конкурировать сама с собой.

Уменьшите макет примерно до размера, в котором карточка будет восприниматься на телефоне. Проверьте, читаются ли ключевые подписи и различим ли сам предмет. Крупный текст не исправит слабую исходную фотографию, а второстепенные фразы лучше убрать.

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

Как экспортировать готовые изображения

Выделите весь Frame нужного слайда. В правой панели найдите раздел Export (экспорт), нажмите +, выберите формат и масштаб, при необходимости откройте Preview (предпросмотр), затем выполните Export. Экспортировать нужно всю рамку, а не случайно выделенную фотографию или текстовый слой.

PNG подходит, когда нужен формат без потерь и, при необходимости, прозрачность. JPG использует сжатие и не поддерживает прозрачность, поэтому после экспорта проверьте мелкий текст и границы графики. Масштаб 1x сохраняет исходный пиксельный размер рамки, 2x удваивает его. Увеличение масштаба не улучшает слабую исходную фотографию.

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

Что проверить после экспорта

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

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

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