Как в фигме сохранить файл в png

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

Основы экспорта в Figma: что нужно знать

Figma — это облачный редактор, поэтому все ваши файлы хранятся онлайн. Это означает, что вы не можете просто «сохранить как» напрямую на компьютер, как в традиционных программах. Вместо этого используется функция экспорта, которая позволяет загружать выбранные элементы в виде изображений, SVG, PDF и других форматов. PNG — один из самых востребованных, особенно когда нужна прозрачность или высокое качество без сжатия.

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

При экспорте PNG важно учитывать три фактора: размер, масштаб и фон. Например, если вы готовите изображение для мобильного приложения, вам могут понадобиться версии 1x, 2x и 3x. Если используется прозрачный фон, убедитесь, что в настройках экспорта он действительно отключён. Также стоит помнить, что Figma не экспортирует скрытые слои или те, что находятся за пределами видимости фрейма.

Пошаговая инструкция: как сохранить в PNG

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

1. Откройте ваш файл в Figma и найдите элемент, который хотите экспортировать. Это может быть фрейм, группа или отдельный слой.
2. Выделите нужный объект с помощью инструмента «Select» (V) или кликнув по нему на холсте.
3. В правой боковой панели перейдите в раздел «Design» (если он не активен, нажмите на значок карандаша).
4. Прокрутите вниз до блока «Export» и нажмите кнопку «+» рядом с надписью «Add Export».
5. Выберите формат — установите «PNG».
6. Укажите масштаб: 1x, 2x или 3x. По умолчанию стоит 1x.
7. При необходимости измените имя файла в поле «Name» — оно будет использовано при скачивании.
8. Нажмите кнопку «Export [название]» внизу блока. Figma предложит сохранить файл на ваш компьютер.

Если вы работаете с мультислойными объектами, убедитесь, что они объединены в группу или фрейм. В противном случае экспортироваться будет только верхний слой. Также можно экспортировать сразу несколько версий — например, 1x и 2x PNG — добавив две строки экспорта с разными настройками.

Настройки экпорта: масштаб, качество, фон

Правильные настройки экспорта — залог качественного результата. Давайте разберём ключевые параметры, доступные при экспорте в PNG.

Масштаб (Scale)

Figma предлагает три варианта масштаба: 1x, 2x и 3x. Они соответствуют плотности пикселей на экранах устройств:

• 1x — стандартное разрешение, подходит для веба и офисных задач;
• 2x — Retina-экраны (iPhone, MacBook), где пиксели в два раза мельче;
• 3x — устройства с очень высокой плотностью пикселей (например, флагманские смартфоны Android).

Рекомендуется всегда экспортировать как минимум 1x и 2x версии, особенно если макет предназначен для разработки.

Качество и сжатие

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

Фон

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

Распространённые ошибки и как их исправить

Даже опытные пользователи иногда сталкиваются с проблемами при экспорте. Вот самые частые ошибки и способы их решения.

Экспортируется не тот элемент

Иногда вместо нужного фрейма экспортируется весь страница или другой слой. Причина — неправильное выделение. Убедитесь, что вы кликнули именно по нужному объекту в иерархии слоёв (панель слева).

Нет прозрачности

Если PNG получается с белым фоном, проверьте, нет ли под всеми слоями белого прямоугольника. Также убедитесь, что сам фрейм не имеет заливки. Отключите её в панели свойств.

Маленькое разрешение

Если изображение выглядит размыто, возможно, вы экспортировали в 1x, а нужно было в 2x. Измените масштаб в настройках экспорта и повторите попытку.

Не экспортируются шрифты

Figma корректно экспортирует текст, но если шрифт не установлен на компьютере получателя, он может отображаться некорректно. Для гарантии используйте веб-безопасные шрифты или конвертируйте текст в контуры (Outline Stroke), хотя это сделает его неизменяемым.

Профессиональные советы по экспорту

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

• Перед массовым экспортом организуйте слои: называйте фреймы понятно (например, «Button / Primary», «Icon / Home»). Это упростит поиск и выделение.
• Используйте плагины, такие как Batch Export или Exporter, чтобы экспортировать десятки элементов за раз.
• Настройте систему имён: например, «[тип]_[название]_[состояние]». Пример: png_icon_home_active.png.
• Если вы передаёте файл разработчику, создайте отдельную страницу «For Developers» с уже настроенными экспортами.
• Для анимированных прототипов PNG не подойдёт — используйте GIF или Lottie через специальные плагины.

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

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

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

Заключение

Сохранение файла в PNG в Figma — простой, но важный процесс, от которого зависит качество передачи дизайна в производство. Зная, как правильно настроить экспорт, вы сможете избежать типичных ошибок, сэкономить время и обеспечить высокое качество ассетов. Главное — внимательно работать с масштабом, фоном и именованием файлов.

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