Как в фигме убрать фон картинки png

Убрать фон у PNG-изображения в Figma можно как до импорта файла, так и непосредственно в редакторе. Основной способ — использовать изначально прозрачный PNG, сохранённый с альфа-каналом; если фон всё же отображается, проблема может быть в настройках экспорта или фонах слоя. Важно понимать, что Figma не обладает встроенными инструментами автоматического вырезания фона, как Photoshop или сервисы на основе ИИ, но позволяет работать с уже подготовленными изображениями.

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

Что такое PNG и как работает прозрачность

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

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

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

Отличия PNG от других форматов

• JPEG — не поддерживает прозрачность, сжимает с потерями, подходит для фотографий.
• GIF — поддерживает прозрачность, но только бинарную и с ограничением в 256 цветов.
• WebP — современный формат, поддерживает прозрачность и анимацию, но не все браузеры одинаково его поддерживают.
• PNG — идеален для логотипов, иконок, графики с чёткими контурами и необходимостью прозрачности.

Как проверить, есть ли прозрачность у PNG в Figma

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

Начните с просмотра изображения на другом фоне. Добавьте прямоугольник под PNG-изображение или измените цвет фона страницы (в правом верхнем углу Figma, рядом с кнопкой «Present»). Если «фон» внутри изображения остаётся белым или цветным — значит, он является частью самого растра, а не фоном Figma.

Далее проверьте панель свойств справа. Выделите изображение и найдите раздел «Fill». Если там активен заливка (например, белый цвет), это может быть слой поверх изображения. Удалите этот Fill — возможно, кто-то случайно добавил фон в Figma.

Также обратите внимание на наличие масок или фреймов с фоном. Иногда изображение помещают внутрь фрейма с заливкой, создавая иллюзию фона. Нажмите на фрейм и проверьте его свойства.

Пошаговая проверка прозрачности

1. Загрузите PNG в Figma перетаскиванием или через Import.
2. Создайте новый фрейм или переместите изображение на чистую страницу.
3. Добавьте прямоугольник под изображение с контрастным цветом (например, красным).
4. Выделите PNG и проверьте, есть ли у него свойство Fill в правой панели. При необходимости удалите.
5. Оцените визуально: если внутренние области изображения перекрывают красный фон — фон «вшит» в PNG.

Распространённые ошибки: почему фон не пропадает

Многие пользователи считают, что Figma «сломала» прозрачность, но на деле проблема возникает задолго до импорта. Ниже — основные причины, по которым PNG отображается с фоном.

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

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

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

Типичные сценарии потери прозрачности

• Экспорт из PowerPoint или Canva без опции «без фона».
• Скриншот экрана, сохранённый как PNG, но с фоном рабочего стола.
• Использование старых версий редакторов, не поддерживающих альфа-канал.
• Ошибка при импорте в Figma: файл повреждён или загружен не полностью.

Как убрать фон с помощью внешних инструментов

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

Для быстрого результата подойдут онлайн-сервисы на основе искусственного интеллекта. Remove.bg — один из самых популярных. Загружаете изображение, система автоматически вырезает объект, оставляя прозрачный фон. Экспортируете как PNG и загружаете в Figma. Сервис бесплатен для базового использования, но требует интернет-соединения.

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

Профессионалы предпочитают Adobe Photoshop или Figma + Plugins. Хотя плагины вроде Background Remover или CleanPNG могут интегрироваться в Figma, они всё равно перенаправляют запрос во внешние API. Локальная обработка невозможна.

Пошаговая инструкция: Remove.bg + Figma

1. Перейдите на сайт remove.bg.
2. Загрузите своё PNG-изображение.
3. Дождитесь автоматической обработки (обычно 5–10 секунд).
4. Скачайте результат в формате PNG.
5. Откройте Figma и перетащите файл в проект.
6. Убедитесь, что фон прозрачен, поместив изображение на цветной слой.

Можно ли вырезать фон вручную в Figma

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

Создайте фигуру (например, эллипс или многоугольник), которая повторяет контур нужной части изображения. Поместите её поверх PNG. Затем выделите и изображение, и фигуру, щёлкните правой кнопкой → «Create Mask» (или Ctrl+Alt+M). Изображение будет обрезано по форме маски.

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

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

Когда использовать маски, а когда — внешнюю обработку

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

Лучшие практики при работе с PNG в Figma

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

Во-первых, всегда экспортируйте PNG с отключённым фоновым слоем. В Photoshop — убедитесь, что нижний слой не называется «Background» или удалите его. В Illustrator — выберите опцию «Transparency» при экспорте. В Canva — используйте платную подписку для экспорта без фона.

Во-вторых, проверяйте изображение перед загрузкой. Откройте его в любом просмотрщике, поддерживающем прозрачность (например, Windows Фото или macOS Preview). Если вы видите шахматный узор — прозрачность есть. Белый фон — значит, её нет.

В-третьих, используйте осмысленные названия файлов. Например, logo-transparent.png вместо image1.png. Это помогает команде понимать, какой тип изображения используется.

Чек-лист перед импортом PNG в Figma

• Фоновый слой удалён или отключён в исходном редакторе.
• Изображение экспортировано в PNG с опцией прозрачности.
• Файл проверен в стороннем просмотрщике на наличие шахматного фона.
• Размер изображения соответствует задаче (не слишком большой и не маленький).
• Название файла отражает его содержание и тип.

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

Интервью с Артёмом Волковым, ведущим UI-дизайнером компании «Нейросфт»

— Многие думают, что Figma должна всё уметь, — говорит Артём. — Но это как ждать от текстового редактора, что он будет рисовать картинки. Figma — инструмент для компоновки, прототипирования и коллаборации. Графическую подготовку нужно делать до импорта.

— Мы в команде используем чёткую цепочку: иллюстратор создаёт изображение → редактор (Photoshop или Photopea) убирает фон → ассет экспортируется как PNG-24 с альфа-каналом → загружается в Figma. Так мы избегаем 95% проблем.

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

— И последнее: обучайте команду. Даже маркетолог должен понимать, что JPEG нельзя превратить в прозрачный PNG одним кликом.

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

Заключение

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

• PNG с прозрачностью должен быть правильно экспортирован до импорта в Figma.
• Figma не может удалять фон — он только отображает существующую прозрачность.
• Для удаления фона используйте Remove.bg, Photopea или Photoshop.
• Маски в Figma — временное решение, не заменяющее альфа-канал.
• Проверяйте изображения перед загрузкой и следуйте best practices командной работы.