Как из фигмы скачать картинку

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

Зачем экспортировать из Figma

Figma — это инструмент для создания интерфейсов, а не для финальной выгрузки ресурсов. Хотя внутри него можно просматривать дизайн, работать с компонентами и делиться прототипами, реальные файлы нужны за пределами платформы: для разработчиков, маркетологов, клиентов или CMS. Например, баннер для Instagram, иконки для приложения, логотип для печати — всё это требует готового изображения в стандартном формате. Без экспорта вы не сможете использовать дизайн в реальных продуктах.

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

Как экспортировать изображение: базовый алгоритм

Процесс экспорта в Figma прост, но требует внимания к деталям. Вот пошаговая инструкция:

1. Откройте ваш проект в Figma и перейдите на нужный фрейм или слой.
2. Щёлкните по элементу, который нужно экспортировать — это может быть иконка, кнопка, целый экран или даже группа слоёв.
3. В правой панели найдите раздел Export. Он появляется только при выделении одного или нескольких объектов.
4. Нажмите кнопку + рядом с «Export» — это добавит новый формат экспорта.
5. Выберите формат: PNG, JPG, SVG или PDF.
6. Укажите масштаб: 1x, 2x, 3x. Для веба — 2x, для печати — 3x.
7. Нажмите Export — файл скачается на ваш компьютер.

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

Форматы экспорта: PNG, JPG, SVG, PDF — в чём разница

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

Для веб-дизайна чаще всего используют PNG 2x и SVG. PNG подходит, когда есть градиенты, тени, полупрозрачные элементы. SVG — идеален для иконок и логотипов, потому что масштабируется без потерь и имеет минимальный вес. JPG стоит использовать только тогда, когда вы экспортируете фото или сложный фон, где качество можно немного снизить ради уменьшения размера.

Масштаб и разрешение: как не потерять качество

Масштаб — одна из самых недооцениваемых настроек в Figma. Когда вы выбираете 1x, 2x или 3x, вы определяете количество пикселей на один «дизайнерский» пиксель. Например, если вы создали иконку 24×24 пикселей, то при экспорте с масштабом 2x вы получите файл 48×48 пикселей. Это необходимо для экранов Retina, где каждый «дизайнерский» пиксель занимает два физических.

Не используйте 1x для современных устройств — изображения будут выглядеть размыто. 2x — стандарт для веба и мобильных приложений. 3x — для iOS и некоторых Android-устройств с высокой плотностью пикселей.

Если вы не уверены, какой масштаб выбрать — посмотрите, как разработчики используют ваш дизайн. В большинстве случаев они запрашивают 2x. Если вы работаете над печатным проектом — используйте 3x или экспортируйте в PDF с разрешением 300 DPI.

Представьте, что вы скачали логотип в 1x и вставили его в сайт — на iPhone он будет выглядеть как размытое пятно. Это не ошибка дизайнера — это ошибка экспорта.

Пакетный экспорт: как скачать сразу несколько файлов

Если вы работаете над системой иконок, компонентами кнопок или набором баннеров — экспортировать каждый файл по отдельности утомительно. Figma позволяет экспортировать несколько объектов одновременно.

Выделите несколько слоёв, фреймов или групп (удерживайте Shift или Ctrl/Cmd). В правой панели вы увидите кнопку «Export» — нажмите её. Figma автоматически создаст отдельный файл для каждого выделенного элемента. Вы можете назначить разные форматы и масштабы для разных объектов — просто добавьте несколько экспортных настроек.

Также полезно использовать плагины вроде Batch Export или Export All — они позволяют экспортировать все элементы по папкам, с автоматическим именованием и даже в ZIP-архиве.

Частые ошибки и как их исправить

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

• Файл слишком маленький — вы экспортировали в 1x, а нужно 2x. Решение: всегда проверяйте масштаб перед скачиванием.
• Прозрачность пропала — вы выбрали JPG вместо PNG. Решение: для иконок и логотипов — только PNG или SVG.
• Края обрезаны — вы экспортировали слой, а не фрейм. Решение: всегда выделяйте фрейм, а не отдельный слой. Фрейм определяет границы экспорта.
• Файл весит 5 МБ — вы экспортировали экран целиком в PNG 3x. Решение: экспортируйте только нужный элемент, а не весь экран. Используйте SVG, где возможно.
• Имя файла — “Frame 1.png” — Figma автоматически называет файлы по названию слоя. Решение: переименуйте фрейм в Figma перед экспортом — имя файла будет соответствовать.

Если вы экспортируете SVG и он выглядит искажённо — проверьте, не используются ли в дизайне растровые эффекты (тени, градиенты с фильтрами). SVG идеально работает только с векторными элементами.

Экспертное мнение: как дизайнеры используют экспорт в работе

Дизайнеры с опытом знают: экспорт — это не последний этап, а часть рабочего процесса. Эксперт по дизайну систем Марина Кузнецова, которая работает с крупными fintech-стартапами, рассказывает:

Она также использует автоматизацию: плагин Figma Auto Export, который при каждом изменении в библиотеке компонентов автоматически обновляет экспортируемые файлы и загружает их в Google Drive. Это особенно полезно, когда команда разработки работает в режиме CI/CD — они получают свежие ресурсы без участия дизайнера.

Часто задаваемые вопросы

Заключение

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

Не экономьте время на экспорте — оно сэкономит вам часы в будущем. Используйте SVG для векторных элементов, PNG 2x для всех остальных, и всегда проверяйте масштаб перед скачиванием. Создавайте отдельные фреймы для экспорта — это избавит вас от случайного включения лишних слоёв и упростит коммуникацию с разработчиками.

• Всегда экспортируйте в PNG 2x или SVG — это стандарт для веба и мобильных приложений.
• Используйте фреймы, а не отдельные слои, чтобы контролировать границы экспорта.
• Не забывайте переименовывать фреймы — имена файлов будут соответствовать.
• Для пакетного экспорта используйте плагины — они экономят часы в месяц.
• Проверяйте цветовой профиль и прозрачность — это частая причина жалоб от разработчиков.