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

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

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

PNG (Portable Network Graphics) — это растровый формат, который поддерживает прозрачность, высокое качество и сжатие без потерь. Именно поэтому он стал стандартом для экспорта UI-элементов: иконок, логотипов, кнопок, аватаров и других графических компонентов, которые должны корректно отображаться на любых фонах. В отличие от JPG, PNG не сжимает изображения с потерей детализации, а в отличие от SVG, подходит для сложных растровых текстур, теней и градиентов.

Большинство мобильных и веб-приложений требуют изображения в PNG-формате для статичных элементов. Например, iOS и Android используют PNG для иконок приложений, а веб-разработчики применяют его для фоновых элементов с полупрозрачными краями. По данным Statista, более 78% дизайнерских проектов в 2025 году включали в себя экспорты в PNG как обязательный этап подготовки к разработке.

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

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

1. Откройте файл в Figma и перейдите на нужный слой или компонент, который нужно экспортировать.
2. Выделите объект щелчком мыши. Можно выделить несколько элементов, удерживая Shift — Figma автоматически создаст единый блок экспорта.
3. В правой панели найдите раздел Export. Он появляется только при выделении хотя бы одного объекта.
4. Нажмите кнопку + рядом с «Export» — откроется меню выбора формата.
5. Выберите PNG из списка доступных форматов.
6. Укажите масштаб: 1x (для веба), 2x (для Retina-экранов) или 3x (для высокопиксельных устройств). Рекомендуется выбирать 2x как стандарт для мобильных приложений.
7. Нажмите кнопку Export — файл скачается в папку загрузок вашего браузера.

Для удобства можно использовать горячие клавиши: после выделения объекта нажмите Cmd + E (Mac) или Ctrl + E (Windows) — Figma сразу откроет окно экспорта.

Как экспортировать весь фрейм или страницу

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

Расширенные настройки экспорта: масштаб, формат, имя файла

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

В панели экспорта после выбора PNG вы увидите дополнительные опции:

— Масштаб (Scale): 1x, 2x, 3x — выбирайте в зависимости от целевой платформы. Например, для iOS-приложений рекомендуется 3x, для веба — 2x.
— Имя файла: по умолчанию Figma использует имя слоя. Чтобы изменить его, кликните по полю и введите нужное название — например, `button-primary@2x.png`.
— Формат: кроме PNG, можно выбрать JPG, SVG, PDF. Убедитесь, что выбран именно PNG.
— Скрыть/показать слои: если в фрейме есть лишние элементы, которые не нужно экспортировать — временно скройте их (иконка глаза в панели Layers).

Также Figma позволяет экспортировать в несколько масштабов одновременно — просто добавьте ещё один пункт экспорта, выбрав другой масштаб. Например, можно сохранить `icon@1x.png`, `icon@2x.png` и `icon@3x.png` одним кликом.

Частые ошибки и как их исправить

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

• Экспорт не работает — проверьте, выделен ли объект. Figma не показывает панель Export, если ничего не выбрано.
• Файл сохраняется в JPG вместо PNG — убедитесь, что в списке форматов выбран именно PNG, а не JPG. Иногда Figma «запоминает» последний выбранный формат.
• Изображение слишком маленькое — выберите масштаб 2x или 3x. Экспорт в 1x может не подойти для высокопиксельных экранов.
• Фон белый, хотя должен быть прозрачным — проверьте, не установлен ли цвет фона у самого фрейма или контейнера. Удалите его или установите в «None».
• Экспорт не сохраняет тени и градиенты — убедитесь, что эффекты применены к самому объекту, а не к его обёртке. Иногда тени находятся на отдельном слое, который не экспортируется.

Пакетный экспорт: сохранение нескольких элементов сразу

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

1. Зажмите Shift и выделите все нужные элементы (можно выделять и из разных фреймов).
2. В правой панели появится раздел Export — он покажет все выделенные объекты.
3. Выберите формат PNG и масштаб (например, 2x).
4. Нажмите «Export». Figma автоматически создаст отдельные файлы с именами, соответствующими именам слоёв.

Для ещё большей эффективности используйте плагины, такие как Batch Export или Export All. Они позволяют экспортировать все слои в одной папке с кастомными шаблонами имён, автоматически сортируя по типам (иконки, кнопки, баннеры).

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

Figma позволяет задать шаблон имени файла через переменные. Например, если у вас есть слои с именами `icon-home`, `icon-search`, `icon-user`, и вы хотите получить `icon-home@2x.png`, просто убедитесь, что в настройках экспорта не стоит ручное переименование. Figma автоматически использует имя слоя как имя файла.

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

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

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

• Убедитесь, что у выделяемого фрейма или группы нет цвета фона. В панели Properties проверьте, что значение Fill установлено в None.
• Если вы экспортируете компонент — проверьте, нет ли в его базовом состоянии фона. Иногда он добавляется при создании компонента.
• Не используйте белый прямоугольник «под» элементом — он будет экспортирован как фон. Вместо этого оставьте пустое пространство.
• После экспорта откройте PNG в любом редакторе (например, Preview на Mac или Photoshop) и проверьте, есть ли сетка фона — она указывает на прозрачность.

Экспертное мнение: советы профессионалов

Екатерина также рекомендует использовать «наборы» в Figma: создавайте отдельные фреймы для каждой группы экспорта (например, «Иконки для iOS», «Кнопки для веба») и сохраняйте их как шаблоны. Это позволяет быстро повторять экспорт без повторных настроек.

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

Часто задаваемые вопросы

Заключение

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

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

• Всегда используйте масштаб 2x или 3x для мобильных интерфейсов.
• Для прозрачного фона убедитесь, что Fill установлен в None.
• Используйте пакетный экспорт для массовой подготовки элементов.
• Проверяйте результат в реальном окружении — браузере или на устройстве.
• Настройте единый шаблон именования файлов для командной работы.