Экспорт из Figma кажется простой операцией — выделил элемент, нажал кнопку, получил файл. Но при выборе неправильного формата итоговая картинка может потерять прозрачность, увеличиться в весе в несколько раз без причины или просто не подойти под задачу, для которой её готовили.
Как устроен экспорт в Figma
Базовый процесс одинаков для любого формата: выделяется нужный элемент или фрейм, в панели справа выбирается параметр экспорта, указывается масштаб (1x — оригинальный размер, 2x — увеличение вдвое для retina-экранов, 0.5x — уменьшение) и формат файла. Перед скачиванием доступен предпросмотр результата.
Разница между форматами — не в процессе экспорта, а в том, что происходит с изображением после.
JPG — для фотографий и сложных изображений
Формат по умолчанию для большинства визуального контента: фотографии, сложные макеты с градиентами и множеством цветов. Не поддерживает прозрачность — фон всегда будет залит каким-то цветом, даже если в макете он выглядел прозрачным.
PNG — когда нужна прозрачность
Если изображение должно накладываться на разные фоны без своего собственного — иконка, логотип, элемент интерфейса без рамки — PNG сохраняет прозрачность там, где в макете её включили. Перед экспортом стоит проверить предпросмотр: прозрачные зоны там обычно показываются клетчатым узором, что позволяет убедиться, что настройка применилась правильно.
SVG — для векторной графики
В отличие от JPG и PNG, SVG не растровый, а векторный формат — он описывает изображение математическими координатами, а не сеткой пикселей. Это значит, что иконка или простая графика в SVG останется чёткой на экране любого размера и разрешения, не «размывается» при масштабировании. Подходит для простых форм — иконок, логотипов, схематичных иллюстраций, но не для фотореалистичных изображений.
PDF — для многостраничных документов
Когда нужно собрать несколько экранов или страниц макета в один файл — для презентации клиенту, коммерческого предложения или печатного материала — подходит экспорт в PDF.
Массовый экспорт нескольких элементов сразу
Если нужно выгрузить много объектов одним действием — иконки, набор изображений для каталога — удобно заранее организовать структуру через название слоёв с указанием папки (например, «иконки/корзина» сохранится в подпапку «иконки» под именем «корзина»). После этого можно выделить все нужные элементы и выгрузить их одним нажатием — горячая клавиша экспорта ускоряет процесс при частой работе с большими объёмами графики.
Куда экспортированные файлы попадают дальше
Экспорт из дизайн-инструмента — промежуточный шаг, а не финал: дальше изображения нужно вставить в реальный сайт, в правильном размере и формате под веб (часто это WebP для уменьшения веса страницы).
В конструкторе сайтов Taptop экспортированные из Figma изображения загружаются напрямую в визуальный редактор и автоматически оптимизируются под загрузку в браузере — не нужно отдельно конвертировать формат под веб вручную, если макет уже подготовлен и экспортирован корректно. Кстати, если в самом макете до экспорта путаница с тем, что и как должно вести себя при изменении контента — это обычно вопрос лейаута, а не форматов файлов.
В каком формате вы чаще всего экспортируете макеты из Figma? Напишите в комментариях 👇
Частые вопросы
Вопрос: Почему PNG-файл получается намного тяжелее JPG того же изображения?
Ответ: PNG использует сжатие без потерь и хранит больше информации (включая альфа-канал прозрачности), поэтому вес файла обычно выше, особенно для сложных изображений без прозрачных зон.
Вопрос: Можно ли экспортировать векторную иконку в SVG, если она была нарисована не векторными инструментами?
Ответ: Нет, если объект изначально растровый (например, вставленная фотография), SVG не даст преимущества — векторное масштабирование работает только для объектов, построенных векторными инструментами Figma.
Вопрос: Какой масштаб экспорта выбрать, чтобы картинка не размылась на сайте?
Ответ: Для обычных экранов достаточно 1x, а для retina-дисплеев лучше экспортировать в 2x — иначе изображение может выглядеть нечётким на дорогих мониторах и смартфонах.
Такие практические вопросы по Figma и вёрстке регулярно разбираем в нашем тёплом комьюнити дизайнеров — заходите: Taptop Design Community