Как экспортировать фигму в пнг

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

Основы экспорта: как выгрузить Figma в PNG

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

Для начала убедитесь, что вы работаете с правильным объектом: это может быть отдельный фрейм, группа слоёв, компонент или даже весь страницу. Выделите нужный элемент с помощью курсора. В правой панели свойств найдите раздел «Design» → «Export». По умолчанию он пуст, если экспорт не настроен. Нажмите «+ Add Export».

Появится настройка: выберите формат — PNG, укажите масштаб (1x, 2x, 3x). Масштаб 1x подходит для экранов с низким DPI, 2x — стандарт для Retina-дисплеев, 3x — для максимальной чёткости. После настройки нажмите «Export», выберите место на компьютере и сохраните файл.

Вы также можете использовать сочетание клавиш: после выделения объекта нажмите Ctrl+Shift+E (Cmd+Shift+E на Mac), чтобы быстро вызвать окно экспорта. Это ускорит рабочий процесс, особенно если вы часто выгружаете макеты.

Экспорт одного фрейма

Проще всего экспортировать отдельный фрейм. Достаточно кликнуть по нему, добавить настройку экспорта и выбрать PNG. Figma автоматически обрежет изображение по границам фрейма. Удобно использовать именованные фреймы — например, «Header-Mobile», «Card-Product» — чтобы потом легко ориентироваться в файлах.

Экспорт отдельных слоёв

Иногда нужно выгрузить только один слой — например, логотип или иконку. Выделите слой в панели «Layers», перейдите в «Export» и настройте PNG. Обратите внимание: если слой частично перекрывается другими, он всё равно экспортируется целиком. Чтобы избежать артефактов, временно скройте верхние слои.

Экспорт всей страницы

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

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

Качество экспортируемого PNG зависит от нескольких параметров. Понимание этих настроек помогает избежать потерь качества и проблем с использованием изображений.

Первый параметр — масштаб (Scale). Он определяет разрешение выходного файла:
— 1x — базовое разрешение (подходит для web);
— 2x — удвоенное разрешение (для Retina-экранов);
— 3x — тройное (для печати или крупных дисплеев).

Выбор масштаба зависит от назначения. Например, для мобильного приложения лучше использовать 2x, так как большинство смартфонов поддерживают высокое DPI.

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

Третий — обрезка (crop). Figma автоматически обрезает изображение по границам выделенного объекта. Но если внутри фрейма есть элементы за пределами границ, они будут обрезаны. Чтобы этого избежать, расширьте фрейм или экспортируйте родительский контейнер.

DPI и разрешение: мифы и реальность

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

Например, 100×100 пикселей на экране 72 DPI займут больше места, чем на Retina-дисплее 326 DPI. Поэтому при подготовке к печати лучше использовать векторные форматы (SVG, PDF), а PNG — только для экранов.

Как задать фон при экспорте

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

Альтернатива — использовать плагины, которые позволяют задавать фон при экспорте, не изменяя макет. Например, «Export++» или «Batch Export».

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

Когда проект состоит из десятков карточек, иконок или экранов, ручной экспорт становится утомительным. К счастью, Figma поддерживает массовый экспорт — как встроенный, так и через плагины.

Встроенный способ: выделите несколько фреймов (удерживая Shift), перейдите в панель «Export» и добавьте настройку PNG. Figma предложит выгрузить все выбранные элементы отдельными файлами. Это удобно, но не поддерживает автоматическое именование по слоям или группировку.

Для более сложных сценариев используйте Auto Layout Frames. Если все карточки оформлены как компоненты или фреймы с одинаковой структурой, их можно выделить и экспортировать сразу. Убедитесь, что каждый фрейм имеет уникальное имя — это поможет идентифицировать файлы.

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

Если вы используете компоненты с вариантами (например, кнопки разных состояний), можно экспортировать каждый вариант отдельно. Выделите экземпляр, измените состояние через панель свойств, экспортируйте. Повторите для всех состояний.

Для автоматизации этого процесса подойдут плагины. Например, «Component Exporter» позволяет выгрузить все варианты компонента одним кликом, сохраняя имена и иерархию.

Правила именования для массового экспорта

Чтобы файлы было легко найти, используйте единую систему именования:
— `button-primary-hover.png`
— `card-product-small.png`
— `icon-menu-24px.png`

Figma автоматически использует имя фрейма как название файла. Поэтому заранее продумайте структуру и имена. Это особенно важно при работе в команде.

Плагины и сторонние инструменты для автоматизации

Figma имеет мощную экосистему плагинов, значительно упрощающих экспорт. Они позволяют выгружать сотни элементов, генерировать документацию, менять форматы и даже интегрироваться с Google Drive или Notion.

Самые популярные плагины:

• Batch Export — массовый экспорт с фильтрацией по имени, типу и расположению.
• Export++ — расширенные настройки: фон, обрезка, префиксы, папки.
• Zeplin Export — подготовка к передаче в Zeplin, с автоматическим PNG-экспортом.
• Content Reel — не для экспорта напрямую, но помогает собирать ассеты для последующей выгрузки.

Установите плагин через меню «Plugins» → «Find more plugins». После установки запустите его, выберите нужные фреймы и задайте параметры. Большинство плагинов позволяют указать:
— формат (PNG, JPG, SVG);
— масштаб;
— фон;
— префикс или суффикс к имени;
— папку для группировки.

Экспорт через Figma API

Для тех, кто работает с большими системами, Figma предоставляет REST API. Через него можно программно получать PNG по ID файла и узла. Это полезно для CI/CD, автоматической генерации документации или интеграции с внутренними системами.

Пример запроса:

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

Ответ содержит URL на PNG, который можно скачать. Требуется personal access token. Подходит для DevOps и автоматизации, но требует навыков программирования.

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

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

• Обрезка важных элементов — происходит, если фрейм слишком мал. Решение: всегда проверяйте границы, используйте Auto Layout.
• Потеря прозрачности — если фон стал серым в шахматную клетку, но в итоге белым — значит, где-то добавлен слой. Проверьте нижние слои.
• Низкое качество на Retina — забыли поставить 2x. Всегда экспортируйте интерфейсы в 2x для мобильных проектов.
• Неправильные имена файлов — фреймы с именами «Frame 1», «Copy 2». Используйте осмысленные названия.
• Экспорт скрытых слоёв — если слой скрыт, он не экспортируется. Но если он часть группы, убедитесь, что группа не экспортируется целиком.

Размытые изображения: причины и решение

Размытость возникает, если:
— Экспортирован векторный объект в 1x, а отображается в 2x-окружении.
— Фрейм не выровнен по пиксельной сетке (pixel grid).
— Использованы эффекты (теня, размытие), которые сглаживаются при растеризации.

Чтобы избежать этого:
— Включите опцию «Vector pixel fitting» в настройках Figma.
— Выравнивайте объекты по целым пикселям.
— Экспортируйте в 2x или 3x.

Проблемы с прозрачностью

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

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

Она также отмечает важность системы: «В моей команде мы используем соглашение: все экспортные фреймы помечаются префиксом “EXPORT_”. Это помогает отделить рабочие слои от тех, что идут в производство.»

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

Заключение

Экспорт из Figma в PNG — простая, но детализированная операция, от которой зависит качество передачи дизайна. Зная основные настройки, вы можете контролировать разрешение, фон, прозрачность и именование файлов. Использование фреймов, компонентов и правил именования делает процесс системным и воспроизводимым.

Автоматизация через плагины и API позволяет экономить часы работы, особенно в крупных проектах. Но не забывайте: PNG — это инструмент, а не решение. Он идеален для статичных изображений, но не заменяет векторные форматы или живые прототипы.

• Всегда экспортируйте с правильным масштабом (1x, 2x, 3x).
• Используйте осмысленные имена фреймов для автоматического именования файлов.
• Проверяйте границы и наличие скрытых слоёв перед экспортом.
• Для массовой выгрузки применяйте плагины или API.
• Оптимизируйте PNG внешними инструментами при необходимости.