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

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

Как убрать фон через внешние редакторы: пошаговая инструкция

Figma не поддерживает автоматическое удаление фона, поэтому самый надёжный способ — предварительная обработка изображения в специализированном онлайн-сервисе. Популярные платформы, такие как Remove.bg, Adobe Express, Fotor и Photopea, позволяют быстро и точно удалять фон с помощью искусственного интеллекта. Эти инструменты особенно эффективны для фотографий с чёткими контурами объектов.

Для начала загрузите изображение на сайт Remove.bg. Сервис автоматически распознаёт основной объект и убирает фон за несколько секунд. После обработки скачайте результат в формате PNG — именно этот формат сохраняет прозрачность. Убедитесь, что в настройках экспорта выбрана опция «прозрачный фон».

Откройте Figma и перетащите обработанное изображение в рабочую область. Вы увидите, что фон отсутствует, а объект свободно «парит» на любом цвете или слое. Это работает благодаря альфа-каналу PNG, который Figma корректно интерпретирует.

Если изображение содержит сложные детали — например, волосы, сетку или полупрозрачные элементы — стоит использовать более продвинутые редакторы, такие как Photopea (онлайн-аналог Photoshop). Там можно вручную настроить маску, используя лассо, кисть или выделение по цвету.

1. Выберите подходящий сервис для удаления фона (Remove.bg — для простых случаев, Photopea — для сложных).
2. Загрузите изображение и дождитесь автоматической обработки или выполните ручное выделение.
3. Экспортируйте результат в PNG с прозрачным фоном.
4. Перенесите файл в Figma — фон будет отсутствовать.

Пример: работа с Remove.bg

Представьте, что вам нужно вставить портрет человека в дизайн презентации. Исходное фото сделано на белом фоне, но вы хотите, чтобы человек был интегрирован в темную композицию. Загружаете изображение на Remove.bg, ждёте 5–10 секунд, нажимаете «Download» — и получаете PNG с прозрачностью. Импортируете в Figma — готово.

Когда использовать ручное выделение

Автоматические инструменты не всегда справляются с детализированными объектами. Например, если на фото изображён человек с развевающимися волосами на светлом фоне, ИИ может «съесть» часть прядей. В таких случаях лучше использовать Photopea: открываете изображение, выбираете инструмент «Магическое выделение» (Select Subject), уточняете границы кистью и инвертируете выделение, чтобы удалить фон.

Использование масок в Figma вместо удаления фона

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

Для создания маски в Figma нужно:

• Разместить изображение на холсте;
• Нарисовать векторный контур (прямоугольник, эллипс или произвольную форму) поверх нужной области;
• Выделить одновременно изображение и фигуру (удерживая Shift);
• Нажать правой кнопкой мыши и выбрать «Use as Mask» (или Ctrl+Alt+M).

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

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

Сложные маски: работа с векторными контурами

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

Чтобы нарисовать векторный контур:

1. Выберите инструмент Pen (P);
2. Поставьте точки по краю объекта, стараясь максимально точно следовать форме;
3. Замкните путь (соедините первую и последнюю точки);
4. Создайте маску, как описано выше.

Почему важно использовать правильный формат изображения

Формат файла играет ключевую роль при работе с прозрачностью. Не все форматы поддерживают альфа-канал — возможность отображать полупрозрачные и полностью прозрачные участки. Вот почему выбор между PNG, JPEG и SVG имеет принципиальное значение.

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

Экспорт из Figma: настройки, которые нельзя игнорировать

При экспорте замаскированного или подготовленного изображения убедитесь, что в настройках указан формат PNG. В окне экспорта кликните на значок «+» рядом с фреймом или слоем, выберите «PNG» и активируйте опцию «Transparent background», если она доступна. Хотя в большинстве случаев Figma делает это автоматически, лучше перепроверить.

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

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

Самая распространённая ошибка — ожидание, что Figma сможет автоматически убрать фон, как это делают другие графические редакторы. На 2026 год Figma не имеет встроенного AI для вырезания фона. Все подобные функции реализуются через плагины, но даже они работают по принципу внешнего API-вызова.

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

Третья ошибка — неправильный порядок слоёв при создании маски. Если изображение находится выше фигуры, опция «Use as Mask» неактивна. Перетащите фигуру выше в панели слоёв.

1. Ошибка: фон остаётся белым после импорта. Решение: обработайте изображение в Remove.bg и сохраните как PNG.
2. Ошибка: маска не применяется. Решение: проверьте порядок слоёв и убедитесь, что выбраны оба объекта.
3. Ошибка: при экспорте прозрачность исчезает. Решение: выберите PNG, а не JPEG.

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

По словам эксперта, наиболее эффективный workflow выглядит так:

• Подготовка изображений — в Remove.bg, Photopea или Photoshop;
• Импорт в Figma — только после обработки;
• Использование масок — только для быстрой компоновки или временных решений.

Такой подход повышает производительность и снижает количество ошибок в финальных макетах.

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

Заключение

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

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