Фигма как сохранить в png

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

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

Формат PNG (Portable Network Graphics) широко используется в веб- и мобильном дизайне благодаря поддержке прозрачного фона и высокому качеству изображения без потерь. В отличие от JPEG, PNG идеально подходит для логотипов, иконок, кнопок и других графических элементов, где важна чёткость краёв и наличие альфа-канала. Именно поэтому дизайнеры часто выбирают именно этот формат при работе в Figma.

Экспорт в PNG в Figma возможен для любых выделенных слоёв, групп, фреймов или страниц. Система позволяет гибко настраивать параметры экспорта: масштаб (1x, 2x, 3x), обрезку по границам содержимого, а также выбор конкретной области. Это особенно важно при подготовке ресурсов для разных устройств и экранов.

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

Пошагово: как сохранить в Фигме как PNG

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

1. Откройте проект в Figma. Убедитесь, что вы находитесь на нужной странице и видите нужный фрейм или слой.
2. Выделите объект. Кликните по фрейму, группе или отдельному слою, который вы хотите экспортировать. Можно использовать рамку выделения или клик по иконке в левой панели слоёв.
3. Перейдите в правую панель свойств. Найдите раздел Export — он расположен сразу под настройками заливки, обводки и эффектов.
4. Нажмите «+ Add export». Появится новая строка с настройками экспорта. По умолчанию формат — PNG, разрешение 1x.
5. Настройте параметры (при необходимости). Вы можете изменить формат на JPG, SVG или изменить масштаб на 2x или 3x. Для PNG оставьте как есть.
6. Нажмите «Export». Откроется окно сохранения файла. Выберите место на компьютере и подтвердите действие.

Если вы хотите экспортировать несколько версий одного элемента (например, 1x и 2x), добавьте несколько профилей экспорта через кнопку «+ Add export». Figma автоматически предложит скачать все указанные варианты.

Экспорт части фрейма или группы

Иногда нужно сохранить не весь фрейм, а только определённую часть — например, одну иконку из набора. В этом случае используйте инструмент Frame или Selection:

• Создайте временный фрейм (F) вокруг нужного элемента.
• Выделите его и добавьте профиль экспорта.
• Убедитесь, что в настройках стоит опция Contents only — это гарантирует, что экспортируется только содержимое, без лишнего поля.

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

Хотя Figma позволяет экспортировать отдельные слои, иногда требуется сохранить всю страницу. Для этого:

• Кликните по имени страницы в левой панели слоёв.
• Добавьте профиль экспорта в правой панели.
• Учтите: если на странице много контента, может экспортироваться только видимая область. Чтобы избежать этого, объедините всё в один большой фрейм.

Настройки разрешения и фонов при экспорте

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

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

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

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

• Убедитесь, что нет скрытых слоёв с фоном.
• Проверьте, не включена ли опция Background color в настройках страницы (в старых версиях Figma).
• Используйте режим просмотра с шахматным фоном — он помогает визуально оценить прозрачность.

Советы по эффективному экспорту PNG

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

• Используйте компоненты и экземпляры. Если вы регулярно экспортируете одни и те же элементы (логотипы, иконки), сделайте из них компоненты. Это позволит быстро переключаться между вариантами и экспортировать нужный за пару кликов.
• Называйте слои осмысленно. Вместо «Rectangle 12» пишите «Кнопка_основная». Это упрощает поиск и минимизирует ошибки при массовом экспорте.
• Настройте цветовой профиль. Figma работает в sRGB. Убедитесь, что и ваши конечные устройства поддерживают этот профиль, чтобы избежать цветовых искажений.
• Используйте плагины для массового экспорта. Например, Batch Export или Exporter позволяют экспортировать десятки элементов за один раз с автоназначением имён файлов.

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

Экспорт с аннотациями и без

Иногда дизайнеру нужно сохранить скриншот с комментариями или заметками. В таком случае лучше использовать функцию Presentation Mode или сделать скриншот экрана. Прямой экспорт через панель игнорирует комментарии — они не входят в изображение.

Если же цель — «чистый» PNG без лишних элементов, убедитесь, что:

• Нет активных комментариев на холсте.
• Скрыты вспомогательные линии, сетки и фреймы-заглушки.
• Не включены режимы просмотра типа «Outline» или «Layer Borders».

Частые ошибки и как их избежать

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

• Экспортируется не тот элемент. Причина — неправильное выделение. Решение: всегда проверяйте, какой слой активен в левой панели. Используйте двойной клик для точного входа в группу.
• Изображение слишком большое или маленькое. Часто из-за выбора неправильного масштаба (3x вместо 1x). Решение: сверяйтесь с требованиями разработчика или техзадания.
• Прозрачность не работает. Фон получается белым. Причина — наличие скрытого слоя с заливкой. Решение: отключите видимость всех слоёв ниже нужного элемента.
• Обрезка по неправильным границам. Иногда экспортируется лишнее пространство. Решение: используйте опцию Trim transparency (обрезка прозрачности) или создайте фрейм точно по размеру контента.
• Файл не скачивается. Возможна проблема с браузером или блокировщиком всплывающих окон. Решение: разрешите всплывающие окна для figma.com или попробуйте другой браузер.

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

Также эксперт отмечает важность систематизации:

• Создавайте отдельные страницы в Figma для экспорта — например, «Assets for Dev».
• Группируйте элементы по типам: иконки, кнопки, лого.
• Используйте авто-именование: плагины могут генерировать имена файлов по шаблону (button-primary.png, icon-menu@2x.png).

Такой подход экономит часы при подготовке к передаче проекта.

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

Заключение

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

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