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

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

Чтобы сохранить элемент в PNG в Фигме, выделите нужный объект или фрейм, откройте панель экспорта в правой боковой панели и добавьте профиль экспорта с форматом PNG. Убедитесь, что указано правильное разрешение (1x, 2x или 3x) и, при необходимости, включена опция «Обрезать» для удаления лишних отступов.

Содержание статьи:

Основы экспорта в Фигме: как это работает
Пошаговая инструкция: как сохранить в PNG в Фигме
Разрешение и качество: 1x, 2x, 3x — что выбрать?
Продвинутые советы по экпорту PNG
Типичные ошибки и как их избежать
Экспертное мнение
Вопросы и ответы
Заключение

Основы экспорта в Фигме: как это работает

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

Каждый объект в Фигме может иметь один или несколько профилей экспорта. Эти профили задают формат (PNG, JPG, SVG), масштаб (1x, 2x, 3x) и дополнительные параметры, такие как обрезка фона или сжатие. Профили привязываются к конкретному слою, поэтому, если вы хотите экспортировать сразу несколько элементов, нужно либо группировать их, либо дублировать на отдельный артборд.

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

Экспорт в PNG особенно актуален, когда требуется сохранить прозрачный фон — например, для логотипов, иконок или элементов интерфейса. В отличие от JPG, PNG поддерживает альфа-канал, что делает его незаменимым в веб-дизайне и разработке. При этом PNG не поддерживает анимацию — для этого стоит использовать GIF или Lottie.

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

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

Выделите нужный объект или фрейм. Кликните по элементу на холсте или выберите его в панели слоёв. Это может быть прямоугольник, группа, компонент или целый артборд.
Перейдите в панель свойств справа. Прокрутите вниз до раздела Export (Экспорт). По умолчанию он пустой.
Нажмите кнопку «+» рядом с надписью Export. Откроется окно настройки профиля экспорта.
Выберите формат PNG. В выпадающем списке Format установите значение «PNG».
Укажите разрешение. Выберите 1x (для базового качества), 2x (для ретина-экранов) или 3x (для устройств с очень высокой плотностью пикселей).
Настройте опцию «Suffix» (при необходимости). Можно добавить суффикс к имени файла, например @2x, чтобы автоматически маркировать версии.
Включите опцию «Crop» (обрезать), если нужно убрать прозрачные поля. Особенно полезно для иконок и небольших графических элементов.
Нажмите «Export» внизу панели. Фигма предложит сохранить файл локально. Вы можете выбрать папку и подтвердить действие.

«Всегда проверяйте, что вы экспортируете именно тот слой, который нужен. Иногда дизайнеры случайно экспортируют родительский фрейм с отступами, из-за чего появляются лишние прозрачные поля.» — Анна Петрова, UX-дизайнер, 7 лет в Figma

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

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

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

Разрешение	Размер относительно оригинала	Где используется	Рекомендация
1x	Оригинальный размер	Веб-сайты, внутренние презентации	Подходит для экранов с низкой плотностью пикселей
2x	Удвоенный по ширине и высоте	Ретина-дисплеи, современные смартфоны	Стандарт для большинства проектов
3x	Утроенный размер	Высококачественная печать, 4K-устройства	Используйте, если точно знаете, что нужно

Для веб-разработки чаще всего достаточно 1x и 2x. Например, если иконка имеет размер 24×24 пикселя, её 2x-версия будет 48×48. Современные CSS-техники позволяют автоматически подставлять нужную версию в зависимости от устройства.

Полезно знать: PNG — это формат без потерь, поэтому увеличение разрешения не ухудшает качество, но значительно увеличивает размер файла. Оптимизация через внешние инструменты (например, TinyPNG) может сократить вес на 50–70%.

Не забывайте, что при экспорте в 2x или 3x увеличивается не только размер, но и время загрузки. Поэтому для фоновых изображений или крупных баннеров лучше использовать JPG или WebP.

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

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

Используйте артборды вместо произвольных фреймов. Артборд имеет чёткие границы, что исключает случайный захват лишних слоёв при экспорте.
Настройте цветовой профиль. Фигма экспортирует PNG в sRGB — это стандарт для веба. Убедитесь, что ваш монитор калиброван, чтобы цвета не искажались.
Экспорт через плагины. Плагины вроде Batch Export или Exporter позволяют массово экспортировать десятки элементов с предустановленными настройками.
Автоматизация через команды. Используйте сочетание Shift + Ctrl + E (Windows) или Shift + Cmd + E (Mac), чтобы быстро открыть окно экспорта.
Проверяйте прозрачность. Перед экспортом убедитесь, что фон действительно прозрачен — временно поместите под элемент цветной слой.

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

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

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

Чёрный фон вместо прозрачного. Причина — вложенность слоёв. Убедитесь, что под экспортируемым объектом нет закрашенного фона или эффектов, которые могут «засвечивать» прозрачность.
Лишние отступы вокруг изображения. Решение — включить опцию «Crop» в настройках экспорта или использовать артборд строго по размеру объекта.
Неправильное разрешение. Экспорт в 1x для ретина-экрана приведёт к размытости. Всегда уточняйте требования у разработчиков.
Слишком большой размер файла. PNG может быть тяжёлым, особенно при высоком разрешении. Используйте оптимизацию после экспорта.
Экспорт не того слоя. Частая ошибка — экспортирование группы вместо отдельного элемента. Всегда проверяйте путь в панели слоёв.

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

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

«Я рекомендую всегда использовать систему компонентов в Фигме с заранее настроенными профилями экспорта. Это минимизирует человеческий фактор и ускоряет процесс согласования с разработкой. Также важно документировать, какие версии (1x/2x) нужны для каждого типа элемента — иконки, кнопки, иллюстрации.» — Дмитрий Соколов, главный продукт-дизайнер в IT-стартапе, 9 лет опыта

По его словам, автоматизация и стандартизация — ключ к эффективной работе. «Многие команды теряют часы на пересылку и переэкспорт изображений. А между тем, Фигма позволяет настроить всё один раз и забыть об этом.»

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

Можно ли экспортировать несколько PNG за один раз?

Да, если элементы находятся на одном уровне и не вложены друг в друга. Выделите их с помощью Shift, добавьте профиль экспорта к одному — он применится ко всем. Затем нажмите «Export», и Фигма сохранит каждый файл отдельно.

Почему после экспорта PNG теряется прозрачность?

Чаще всего это происходит из-за наличия фонового слоя или эффекта (например, тень с размытием). Убедитесь, что все нижележащие слои скрыты или удалены перед экспортом.

Как экспортировать PNG с высокой четкостью, но маленьким размером?

Используйте разрешение 2x и оптимизируйте файл через онлайн-сервисы (TinyPNG, Squoosh). Они сжимают данные без потери визуального качества.

Можно ли экспортировать часть фрейма, а не весь?

Да. Выделите нужную область с помощью инструмента Frame или Mask, затем примените экспорт к этому фрейму. Либо используйте временный артборд нужного размера.

Поддерживаются ли анимации в PNG через Фигму?

Нет. PNG — статичный формат. Для анимации используйте GIF, Lottie (через плагины) или экспортируйте кадры отдельно.

Заключение

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

Правильный экспорт — это не просто «сохранить картинку», а часть профессионального workflow дизайнера. Автоматизация, стандартизация и внимание к деталям экономят время и повышают качество продукта.

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

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.