Как сохранить пнг из фигмы

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

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

Почему PNG — лучший выбор для экспорта из Figma

Формат PNG (Portable Network Graphics) был разработан как свободная альтернатива GIF и стал стандартом для хранения растровых изображений с прозрачностью. В отличие от JPEG, он использует без потерь сжатие, что особенно важно при работе с интерфейсами, где критичны чёткие границы и текстуры. При экспорте из Figma PNG обеспечивает максимальную точность передачи цветов и градиентов.
Для веб-разработки и мобильных приложений PNG незаменим при создании элементов с прозрачным фоном — например, аватарок, иконок или логотипов. Он поддерживает альфа-канал, что позволяет сохранять полупрозрачные области, в то время как JPEG всегда имеет сплошной фон. Это делает PNG предпочтительным выбором, когда важна визуальная целостность компонента.
Также PNG хорошо работает с flat-дизайном, минимализмом и другими современными стилями, где доминируют твёрдые цвета и чёткие формы. Формат отлично масштабируется при использовании разных плотностей пикселей (1x, 2x, 3x), что критично для адаптивных макетов. В Figma можно экспортировать один и тот же элемент сразу в нескольких разрешениях — удобно для подготовки ресурсов под разные устройства.

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

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

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

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

Экспорт части фрейма

Иногда нужно сохранить не весь фрейм, а только определённую область. Для этого:

• Создайте прямоугольное выделение (Lasso или Frame Tool) вокруг нужного участка.
• Преобразуйте его в фрейм (Ctrl+Alt+G / Cmd+Option+G).
• Добавьте экспортный профиль, как описано выше.
• Убедитесь, что включена опция «Include in export» — она доступна в контекстном меню при клике на фрейм.

Настройки экспорта: разрешение, прозрачность и цветовые профили

Качество и совместимость PNG во многом зависят от правильно выбранных настроек. Figma предоставляет гибкие параметры, позволяющие адаптировать изображение под конкретные требования.

Разрешение: 1x, 2x, 3x — что выбрать?

Разрешение определяет плотность пикселей в экспортируемом изображении:

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

Выбор зависит от целевой платформы. Для веб-сайтов чаще достаточно 1x и 2x, а для мобильных приложений рекомендуется экспортировать как минимум в 2x.

Прозрачность и альфа-канал

PNG поддерживает прозрачность по умолчанию. Однако важно убедиться, что:

• Фоновый слой отключён или удалён.
• Не используются эффекты с непрозрачным фоном (например, заливка белым цветом).
• В настройках экспорта не включены опции, которые могут «заливать» прозрачность.

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

Цветовые профили и точность цвета

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

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

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

Пустое или обрезанное изображение

Одна из самых частых жалоб: после экспорта PNG оказывается пустым или содержит только часть элемента. Причины:

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

Решение: убедитесь, что фрейм точно охватывает нужный объект, или используйте авто-фрейм (Auto Layout). Также проверьте, не включена ли опция «Crop to content».

Белый фон вместо прозрачного

Если PNG теряет прозрачность, проверьте:

• Наличие скрытых слоёв с заливкой (часто называются «bg», «background», «fill»).
• Эффекты тени или размытия, которые могут создавать фоновую область.
• Правильность выбора формата — убедитесь, что выбран именно PNG, а не JPG.

Неправильные размеры или соотношение сторон

Иногда изображение экспортируется с неожиданными габаритами. Это происходит, если:

• Фрейм имеет внутренние отступы (padding).
• Используются Auto Layout с динамическими размерами.
• Объект масштабирован, но не «заморожен» в текущем состоянии.

Совет: перед экспортом преобразуйте объект в растровое изображение (через плагин или скриншот), если требуется точный контроль над пикселями.

Продвинутые советы по экспорту PNG

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

Массовый экспорт через плагины

Figma поддерживает множество плагинов для автоматизации. Например:

• Batch Export — позволяет экспортировать десятки элементов за один клик.
• Zeplin for Figma — интеграция с системами передачи ассетов.
• Automate+ — массовое переименование, экспорт и организация слоёв.

Эти инструменты особенно полезны при подготовке дизайн-систем или компонентных библиотек.

Использование компонентов и вариаций

Если вы работаете с компонентами, настройте экспортные профили на уровне главного компонента. Тогда все экземпляры будут наследовать настройки, что снижает риск ошибок. Также можно создавать вариации (variants) с разными состояниями (активное/неактивное) и экспортировать их пакетно.

Автоматизация через API

Figma предоставляет мощное API, позволяющее программно экспортировать PNG. Это полезно для CI/CD-пайплайнов, автоматической генерации документации или интеграции с системами управления цифровыми активами (DAM).
Пример запроса:

GET https://api.figma.com/v1/images/{file_key}?ids=0:1&format=png&scale=2

Возвращает URL для скачивания PNG с масштабом 2x.

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

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

• Стандартизируйте имена файлов: используйте понятную нотацию (например, btn-primary-active@2x.png).
• Храните экспортируемые ассеты в отдельной странице проекта — это упрощает управление.
• Согласуйте с разработчиками требования к форматам и разрешениям заранее.
• Не экспортируйте всё подряд — только те элементы, которые действительно нужны.

Также важно учитывать производительность: слишком много PNG-файлов увеличивает нагрузку на сайт. В таких случаях лучше использовать SVG для векторной графики.

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

Заключение

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

• Всегда проверяйте прозрачность и наличие скрытых фоновых слоёв.
• Используйте 2x и 3x для мобильных интерфейсов.
• Применяйте плагины для массового экспорта и автоматизации.
• Согласовывайте форматы и имена файлов с разработчиками.
• Тестируйте экспортированные PNG перед финальной передачей.