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

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

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

Настройки экспорта в Figma: основы и термины

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

Добавление слота экспорта начинается с нажатия кнопки «+». После этого появляется возможность выбрать формат: PNG, JPEG, SVG или PDF. Для графики с прозрачностью, иконок и логотипов предпочтителен PNG. Он поддерживает альфа-канал и не сжимает данные без потерь при сохранении.

Каждый слот экспорта можно настроить по нескольким параметрам:

• Format — выбор между PNG, JPEG, SVG, PDF;
• Scale — масштаб: 1x (стандартное разрешение), 2x (для Retina), 3x (для высоких DPI);
• Contents only — включает обрезку холста по границам объекта, убирая лишнее пространство;
• Include in export — переключатель, позволяющий временно отключить экспорт слота.

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

Где находятся настройки экспорта?

После выделения слоя прокрутите панель свойств вниз до секции «Export». Она доступна для всех типов слоёв, кроме текстовых стилей и заливок. Если вы не видите эту опцию, убедитесь, что:

• Выделен именно слой, а не весь документ;
• Не используется режим Prototype или Inspect;
• У вас есть права на редактирование файла.

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

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

1. Выделите нужный объект — кликните по фрейму, группе или слою, который хотите экспортировать. Это может быть кнопка, иконка, карточка продукта или логотип.
2. Перейдите в панель «Design» — справа в интерфейсе Figma. Убедитесь, что вы в режиме редактирования, а не прототипирования.
3. Найдите раздел «Export» — прокрутите вниз до блока с надписью «Export» и нажмите «+», чтобы добавить новый слот.
4. Выберите формат PNG — в выпадающем меню Format установите «PNG».
5. Настройте масштаб — выберите 1x, 2x или 3x в зависимости от целевого устройства. Для веба чаще всего хватает 1x и 2x.
6. Включите «Contents only» — если нужно убрать лишний холст вокруг объекта.
7. Нажмите «Export» — после настройки слота внизу появится кнопка «Export [название]». Нажмите её и сохраните файл на компьютер.

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

Как экспортировать прозрачный PNG?

Прозрачность в PNG работает автоматически, если:

• Фон слоя или фрейма отсутствует (нет заливки);
• Не включён фон страницы (в настройках страницы Background должен быть выключен);
• Формат экспорта — PNG (JPEG не поддерживает прозрачность).

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

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

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

Один из полезных приёмов — использование именованных слотов экспорта. Вы можете переименовать слот, указав суффикс, например: `icon@2x.png`. Figma сохранит файл с таким именем. Это особенно удобно при экспорте нескольких версий одного элемента.

Другой мощный инструмент — экспорт с наложением эффектов. Тени, размытия, внутренние свечения и градиенты экспортируются корректно, если они не выходят за границы слоя. Однако при включённой опции «Contents only» часть тени может быть обрезана. Чтобы этого избежать:

• Увеличьте отступы вокруг объекта перед экспортом;
• Или временно отключите «Contents only» и обрежьте изображение в графическом редакторе.

Массовый экспорт нескольких элементов

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

• Объедините элементы в одну группу и экспортируйте её целиком;
• Используйте плагины, такие как Batch Export или Exporter;
• Создайте компонент с вариантами и экспортируйте каждый вариант отдельно.

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

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

Ошибка 1: Изображение размытое или пиксельное
Причина — неверный масштаб или попытка экспорта растрового изображения в увеличенном масштабе. Решение: убедитесь, что исходный объект векторный. Если это растровый слой, его нельзя увеличить без потери качества.

Ошибка 2: Прозрачность не сохраняется
Проверьте, не установлен ли белый фон у фрейма или родительского слоя. Также убедитесь, что выбран формат PNG, а не JPEG.

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

Почему не появляется кнопка Export?

Если после настройки слота не появляется кнопка «Export», проверьте:

• Не заблокирован ли слой (значок замка);
• Не является ли объект частью компонента, где экспорт отключён;
• Есть ли у вас права на редактирование файла (в командах Figma).

Автоматизация и интеграции: экономия времени

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

Популярные сценарии:

• Генерация ассетов для мобильного приложения (разные размеры под iOS и Android);
• Интеграция с системами управления контентом (CMS);
• Автоматическая загрузка логотипов на сайт при обновлении макета.

Плагины типа Figma to Code или React Sketch.app могут генерировать не только код, но и экспортировать PNG/SVG в указанную папку. Это особенно полезно для дизайн-систем.

Советы по организации workflow

• Называйте слои понятно: button-primary@2x, logo-transparent;
• Используйте компоненты для повторяющихся элементов;
• Храните экспортные слоты в отдельной странице проекта;
• Создайте чек-лист перед релизом: какие ассеты нужно экспортировать.

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

Максим отмечает, что в его студии каждый новый сотрудник проходит onboarding с обязательным модулем по экспорту: «Мы используем конвенцию имён: [тип]-[состояние]-[размер]. Например, icon-close-active-2x. Это помогает разработчикам быстро ориентироваться в папке с ассетами».

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

Заключение

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

• Всегда используйте «Contents only» для точной обрезки объектов.
• Выбирайте масштаб (1x, 2x, 3x) в зависимости от целевого устройства.
• Проверяйте наличие фона — он может «сломать» прозрачность PNG.
• Для массового экспорта применяйте плагины или Figma API.
• Стандартизируйте имена и процессы — это ускоряет командную работу.