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

Сохранить элемент в Figma без фона — это стандартная задача для дизайнеров, разработчиков и маркетологов. Основное условие — убедиться, что фон прозрачный, а сам объект экспортируется в подходящем формате, например PNG или SVG. Главное правило: перед экспортом проверьте, отключён ли заливка у фигуры или группы.

Почему важно сохранять изображения без фона

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

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

Для UI/UX-проектов сохранение элементов без фона позволяет командам разработчиков легко интегрировать макеты в код. Это экономит время на доработку графики и снижает количество правок. Кроме того, прозрачные PNG и SVG масштабируются без потерь качества.

Пошаговая инструкция: как экспортировать без фона

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

1. Выделите нужный объект или группу объектов с помощью инструмента Selection (V).
2. Перейдите в правую панель свойств (Inspector) и найдите раздел «Fill» (Заливка).
3. Убедитесь, что заливка отключена. Если значок заливки активен — кликните по нему и выберите прозрачность (иконка с крестом или решёткой).
4. Прокрутите панель вниз до блока «Export» и нажмите кнопку «+ Add Export».
5. Выберите формат: PNG или SVG. Для растровых изображений — PNG, для векторных — SVG.
6. При необходимости задайте масштаб (1x, 2x, 3x). Например, 2x — для Retina-экранов.
7. Нажмите «Export» и сохраните файл на компьютер.

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

Как проверить прозрачность перед экспортом

Перед сохранением полезно визуально проверить, действительно ли фон прозрачен. Для этого:

• Временно измените цвет холста: добавьте прямоугольник за объектом и закрасьте его ярким цветом (например, красным).
• Если под вашим объектом виден этот цвет — прозрачность работает.
• Если объект «плавает» на белом — ищите активную заливку.

Также можно использовать режим просмотра «Outline» (в меню View → Show Outline) — он помогает быстро выявить скрытые слои с заливкой.

Форматы файлов: PNG, SVG, JPEG — что выбрать

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

PNG — лучший выбор, если вам нужен высококачественный растровый файл с прозрачностью. Он поддерживает альфа-канал, но размер файла может быть больше, чем у JPEG.

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

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

Когда использовать 2x и 3x?

При экспорте PNG важно указывать масштаб. Устройства с высоким разрешением (Retina, 4K) требуют более плотных пикселей.

• 1x — базовое разрешение, подходит для обычных экранов.
• 2x — в два раза больше пикселей, стандарт для современных смартфонов и мониторов.
• 3x — для устройств с очень высоким DPI, например, некоторых планшетов и телефонов.

Если вы не уверены — экспортируйте сразу несколько версий: 1x и 2x. Это обеспечит совместимость с большинством устройств.

Распространённые ошибки и как их избежать

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

Ошибка 1: Белый фон вокруг объекта

Причина — активная заливка у фигуры, группы или фрейма. Решение: отключите Fill во всех вложенных слоях. Проверьте не только верхний уровень, но и внутренние группы.

Ошибка 2: Экспорт в JPEG с ожиданием прозрачности

JPEG физически не поддерживает прозрачность. Если вам нужен прозрачный фон — выбирайте PNG или SVG.

Ошибка 3: Объект обрезан или имеет лишние поля

Figma по умолчанию экспортирует только выделенную область. Если вокруг объекта много пустого пространства — уменьшите размер фрейма или используйте опцию «Trim Transparency» (в настройках экспорта PNG).

Ошибка 4: Прозрачность теряется при импорте в другие программы

Некоторые редакторы (например, старые версии Photoshop) могут неправильно отображать PNG с альфа-каналом. Всегда проверяйте файл в нескольких программах: просмотрщике, браузере, Figma Viewer.

Ошибка 5: Группа экспортируется с фоном, хотя визуально его нет

Иногда внутри группы есть скрытый слой с заливкой. Используйте панель слоёв (Layers panel), чтобы раскрыть все вложенности и проверить каждый элемент.

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

Мы поговорили с Михаилом Трофимовым, ведущим UI-дизайнером в компании EdTech-стартапа, который ежедневно работает с сотнями иконок и компонентов.

«В нашем проекте мы используем Figma как единое источник истины. Все иконки хранятся в библиотеке компонентов, и каждая экспортируется с прозрачным фоном. Мы стандартизировали процесс: любой новый элемент проходит через чек-лист — проверка заливки, формат (SVG + PNG 2x), именование файла. Это сократило количество правок со стороны разработчиков на 70%.»

Он также отметил важность автоматизации:

«Мы используем плагины вроде “Icon Maker” и “Batch Export”, которые автоматически удаляют фон и экспортируют всё в нужных форматах. Это особенно полезно при массовом экспорте.»

Его главный совет: «Не доверяйте глазам. Всегда проверяйте прозрачность в стороннем просмотрщике — например, в macOS Preview или Windows Photo Viewer.»

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

Заключение

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

• Прозрачность работает только при отключённой заливке (Fill).
• Для прозрачных изображений используйте PNG или SVG.
• Никогда не экспортируйте прозрачные объекты в JPEG.
• Проверяйте экспорт в сторонних программах перед использованием.
• Автоматизируйте процесс с помощью плагинов при массовом экспорте.