Как сделать пнг в фигме

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

Почему PNG — лучший выбор для веб-дизайна

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

Согласно исследованию W3Techs (2025), более 87% веб-сайтов используют PNG для изображений, требующих прозрачности. Это особенно актуально для мобильных приложений, где UI-элементы должны корректно отображаться на разных фонах — от тёмных тем до анимированных фонов. PNG также поддерживает 24-битный цвет и 8-битный канал альфа-прозрачности, что позволяет передавать полупрозрачные тени, градиенты и мягкие края без артефактов.

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

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

1. Выделите объект, который нужно экспортировать — это может быть иконка, кнопка, логотип или группа элементов.
2. В правой панели (Properties) найдите раздел Export. Если его нет — убедитесь, что вы выделили именно векторный объект или группу, а не текстовый слой без обводки.
3. Нажмите кнопку + рядом с «Exports» или кликните по существующему экспорту, чтобы отредактировать его.
4. В выпадающем меню выберите формат PNG.
5. Укажите масштаб: 1x (для веба), 2x (для Retina-дисплеев) или 3x (для высокопиксельных экранов iPhone и Android-флагманов).
6. Убедитесь, что опция Transparent background активна (галочка стоит).
7. Нажмите Export — файл скачается автоматически в формате имя_объекта.png.

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

Масштаб — это не просто коэффициент увеличения. Он определяет, сколько пикселей будет приходиться на один точечный элемент вашего дизайна. Figma работает в единицах «дизайнерских пикселей» — 1px в Figma = 1px на экране с плотностью 1x. Но на реальных устройствах (iPhone, MacBook, Android-смартфоны) плотность может быть 2x или 3x.

Если вы экспортируете иконку 24×24 пикселей в 2x — получите PNG размером 48×48 пикселей. Это обеспечит чёткость на всех экранах. Не стоит использовать 3x без необходимости — файлы становятся слишком тяжёлыми, а визуальное улучшение незаметно на большинстве устройств.

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

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

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

1. Убедитесь, что в панели Export выбран формат PNG.
2. Найдите чекбокс Transparent background — он должен быть отмечен.
3. Если вы экспортируете группу, которая включает фоновый прямоугольник — удалите его или отключите видимость перед экспортом.
4. Проверьте результат: откройте PNG в браузере или графическом редакторе — фон должен быть прозрачным (проверяется по шахматной сетке).

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

Частые ошибки при экспорте PNG и как их избежать

Даже опытные дизайнеры допускают ошибки, которые портят конечный результат. Вот пять самых распространённых:

• Экспорт в 1x вместо 2x — изображение выглядит размытым на Retina-экранах. Решение: всегда используйте 2x как базовый стандарт.
• Непрозрачный фон — PNG с белым фоном не вписывается в тёмные темы. Решение: проверяйте чекбокс «Transparent background» перед каждым экспортом.
• Экспорт всей страницы вместо объекта — выделили не иконку, а весь экран. Решение: всегда выделяйте только нужный элемент, а не Frame или Page.
• Использование JPG вместо PNG — JPG сжимает изображение, теряя детали и создавая артефакты на границах. Решение: для логотипов и иконок — только PNG или SVG.
• Неправильное имя файла — Figma даёт имя по названию слоя, но оно может быть «Group 12» или «Rectangle». Решение: переименуйте слой в Figma до экспорта — например, «logo_primary».

PNG vs JPG vs SVG: когда что использовать

Выбор формата зависит от типа изображения и контекста использования. Ниже — чёткое сравнение:

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

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

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

Алгоритм пакетного экспорта:

1. Удерживайте клавишу Ctrl (Windows) или Cmd (Mac) и кликайте по каждому объекту, который нужно экспортировать.
2. Выделите все нужные элементы — они должны быть в одной группе или на одном слое.
3. В панели Properties нажмите + рядом с Export.
4. Выберите формат PNG и масштаб (например, 2x).
5. Нажмите Export All — Figma создаст ZIP-архив с файлами, названными по именам слоёв.

Также можно использовать плагины, такие как Batch Export или Export All, чтобы экспортировать в разные форматы и папки одновременно — например, PNG, JPG и SVG в разные директории.

Заключение

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

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

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