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

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

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

Figma — облачный сервис, поэтому все ваши файлы хранятся онлайн. Это означает, что «сохранить» в привычном понимании (как в Photoshop или Illustrator) нельзя — вместо этого используется функция экспорта. Экспорт позволяет преобразовать выбранные слои, фреймы или группы в готовые файлы для использования вне Figma. Формат PNG — один из самых востребованных, особенно когда важна прозрачность фона или требуется чёткая передача цветов.

Экспорт работает по принципу выбора объекта + настройка параметров + скачивание. В отличие от PDF или SVG, PNG — это растровое изображение, то есть оно состоит из пикселей. Это значит, что при увеличении возможна потеря чёткости. Однако при корректных настройках масштаба (например, 1x, 2x, 3x) можно получить изображения, идеально подходящие для экранов разных разрешений.

Важно понимать, что Figma не ограничивает вас одним форматом. Вы можете одновременно экспортировать один и тот же объект в PNG, JPEG, SVG и даже WebP. Но именно PNG остаётся стандартом для логотипов, иконок, кнопок и других UI-элементов с прозрачностью.

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

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

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

Если вы экспортируете несколько масштабов, Figma создаст отдельные файлы с суффиксами @1x, @2x и т.д. Это удобно для адаптивной вёрстки.

Как экспортировать весь фрейм целиком?

Иногда дизайнеры забывают, что экспортируется только выделенный объект. Если вы хотите сохранить макет целиком, убедитесь, что выделен именно фрейм (например, «Mobile View» или «Desktop Layout»), а не внутренние элементы. Лучше всего использовать именованные фреймы — так меньше шансов ошибиться.

Можно ли экспортировать несколько объектов за раз?

Да, но с ограничениями. Вы можете выделить несколько слоёв (удерживая Shift), и Figma предложит экспортировать их как единый PNG. Однако они будут объединены в один растр, и изменить их положение уже будет нельзя. Для группового экспорта лучше использовать отдельные фреймы.

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

Качество итогового изображения зависит от правильно выбранных параметров. Давайте разберём каждый из них.

Масштаб (Scale) — один из самых важных параметров. Он определяет, во сколько раз увеличится разрешение изображения. Например, если ваш фрейм 100×100 пикселей:

• 1x → 100×100 px
• 2x → 200×200 px
• 3x → 300×300 px

Для современных устройств с высоким DPI (Retina, AMOLED) рекомендуется использовать 2x или 3x. Это обеспечивает чёткость на экранах смартфонов и планшетов.

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

Имя файла можно настроить вручную. Это полезно при работе в команде — например, «button-primary@2x.png» сразу понятно по назначению. Figma поддерживает переменные, такие как [name], [scale], [format], которые можно использовать в шаблонах имён.

Типичные ошибки и как их избежать

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

• Чёрный фон вместо прозрачного. Причина: в дизайне есть скрытый чёрный прямоугольник или эффект тени, который рендерится как заполнение. Решение: проверьте слои, отключите эффекты или убедитесь, что фон действительно прозрачен.
• Обрезанные края. Объекты выходят за границы фрейма, и при экспорте они обрезаются. Решение: расширьте фрейм или используйте авто-ресайз (Auto Layout).
• Низкое качество на Retina-экранах. Экспортирован только 1x вариант. Решение: всегда добавляйте 2x или 3x при экспорте графических элементов.
• Файл слишком большой. PNG без сжатия может весить много. Решение: после экспорта используйте инструменты оптимизации, например TinyPNG или Squoosh.
• Экспортируется не тот слой. Часто происходит при вложенности. Решение: используйте панель слоёв (Layers Panel), чтобы точно выбрать нужный элемент.

Как проверить прозрачность до экспорта?

Перед экспортом временно установите фон холста в шахматный узор (через «File» → «Canvas Settings» → «Background» → «Checkerboard»). Если под объектом видны клетки — фон прозрачный. Если нет — ищите скрытый слой.

Продвинутые методы: экспорт нескольких объектов и автоматизация

Для профессионалов и команд существуют более эффективные подходы к экспорту.

Экспорт по сетке (Batch Export). Если у вас есть несколько иконок или кнопок, расположенных в одном фрейме, вы можете использовать плагины, например «Content Reel» или «Batch Export». Они позволяют экспортировать все дочерние фреймы за один клик, с автоматическим именованием.

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

API и автоматизация. Figma предоставляет API, через который можно программно экспортировать изображения. Это полезно для CI/CD-процессов, когда макеты автоматически конвертируются в ассеты для разработчиков. Например, можно настроить GitHub Action, которая при обновлении файла в Figma скачивает PNG-версии ключевых экранов.

Плагины для экспорта:

• Exporter — позволяет задать правила экспорта для разных типов объектов.
• Image Exporter — упрощает массовое скачивание PNG и JPEG.
• Figma to Code — генерирует не только PNG, но и CSS/React-код.

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

По его словам, компании, где используются стандартизированные процессы экспорта, быстрее выводят продукты на рынок. Особенно это заметно в проектах с кросс-платформенной разработкой (iOS, Android, Web).

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

Заключение

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

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