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

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

Почему именно PNG? Преимущества формата для дизайнеров

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

По данным исследования Adobe Creative Cloud 2025, 87% дизайнеров используют PNG как основной формат экспорта для UI-элементов. Причина проста: PNG обеспечивает предсказуемый результат. Если вы экспортируете логотип с полупрозрачными тенями или текст с обводкой — только PNG сохранит все детали без артефактов. JPEG, например, автоматически заменит прозрачность белым фоном, что может полностью испортить дизайн при встраивании в интерфейс.

Кроме того, PNG поддерживает 24-битный цвет и 8-битный альфа-канал, что позволяет передавать до 256 уровней прозрачности. Это особенно важно для тонких переходов, теней, свечений и полупрозрачных элементов. Для сравнения: GIF поддерживает только 1-битную прозрачность (полностью прозрачный или непрозрачный), а SVG — не всегда подходит для сложных растровых изображений.

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

Экспорт в PNG в Figma — одна из самых простых операций, но только если вы знаете, как правильно её выполнить. Ниже — точный алгоритм, который подойдёт даже новичкам.

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

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

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

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

Масштаб 2x — это стандарт для современных интерфейсов. Например, если вы экспортируете иконку 24×24 пикселей, то 2x даст 48×48 пикселей — идеально для Retina-дисплеев. 3x используется для флагманских смартфонов, где плотность пикселей достигает 500+ PPI.

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

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

Чтобы гарантировать прозрачный фон:

1. Убедитесь, что у выделенного фрейма или объекта нет заливки. Если вы используете фрейм — проверьте, что в свойствах фрейма (в правой панели) поле «Fill» пусто или установлено на «None».
2. Если вы экспортируете группу — убедитесь, что внутри группы нет прямоугольника с белым фоном. Даже невидимый слой может «заполнить» фон.
3. Используйте режим «Transparent» в предварительном просмотре: при наведении на кнопку экспорта вы увидите прозрачную сетку — это означает, что фон будет прозрачным.
4. После экспорта откройте файл в любом просмотрщике (например, в браузере или Photoshop) — если появляется серая шахматная сетка — значит, прозрачность сохранена.

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

Экспорт нескольких изображений одновременно

Если вы работаете над пакетом иконок, кнопок или компонентов — экспортировать их по одному неэффективно. Figma позволяет экспортировать сразу несколько элементов.

Способ 1: Выделите несколько объектов (Ctrl/Cmd + клик по каждому), затем в панели Export вы увидите список всех выбранных элементов. Нажмите «+» — Figma предложит экспортировать каждый из них отдельно с разными именами.

Способ 2: Используйте фреймы. Создайте отдельный фрейм для каждой иконки или кнопки. Затем в левой панели (Layers) выделите несколько фреймов (Ctrl/Cmd + клик), и в панели Export вы увидите все они как отдельные экспортируемые элементы. Нажмите «Экспортировать» — Figma сохранит каждый в отдельный файл с именем фрейма.

Способ 3: Используйте плагины, такие как «Batch Export» или «Export All». Они позволяют экспортировать все фреймы в папке за один клик, с автоматическим命名 по шаблону и в нужных масштабах.

Экспорт нескольких файлов особенно полезен при работе с системами дизайна — когда нужно сгенерировать набор иконок в 1x, 2x и 3x. Figma автоматически добавляет суффиксы: icon_1x.png, icon_2x.png, icon_3x.png.

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

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

• Фон не прозрачный — забыли убрать заливку фрейма или добавили белый прямоугольник под элемент. Решение: всегда проверяйте свойства Fill — он должен быть «None».
• Неправильный масштаб — экспортировали 1x, а разработчику нужен 2x. Решение: экспортируйте всегда 2x — это стандарт для современных интерфейсов.
• Экспорт выделенной области, а не фрейма — если вы выделяете не фрейм, а группу, Figma может экспортировать не ту область, которую вы ожидаете. Решение: используйте фреймы как контейнеры для всех элементов, которые нужно экспортировать.
• Имя файла с пробелами или спецсимволами — это может сломать сборку в коде. Решение: используйте нижние подчёркивания: button_primary.png.
• Не проверяете результат — открыли PNG в браузере, а он выглядит не так, как в Figma. Решение: всегда открывайте файл в отдельном окне, а не в Figma — в браузере он отображается точно так, как будет в реальном приложении.

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

Экспертное мнение: советы профессионального дизайнера

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

— Имена файлов: component_name_size.png → button_primary_2x.png
— Папки: /assets/icons/, /assets/buttons/
— Все PNG экспортируются в 2x, а 1x генерируются автоматически через скрипты

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

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

Заключение

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

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

• Всегда используйте фреймы для экспортируемых элементов.
• Экспортируйте в 2x — это стандарт для современных интерфейсов.
• Убедитесь, что фон не имеет заливки — иначе прозрачность не сохранится.
• Используйте понятные имена файлов: button_primary_2x.png.
• Проверяйте результат в браузере — Figma не всегда точно показывает прозрачность.