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

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

Зачем убирать фон в Figma

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

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

Метод 1: Ручное вырезание с помощью инструмента «Pen»

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

Сначала импортируйте изображение в Figma. Затем выберите инструмент Pen (P) на панели слева. Начните обводить контур объекта, кликая по ключевым точкам: углы, изгибы, границы. Не пытайтесь обводить слишком плотно — лучше использовать меньше точек, но с точным расположением. Для плавных кривых удерживайте мышь при клике, чтобы задать направляющие.

Когда контур замкнут, щёлкните по начальной точке, чтобы закрыть путь. Теперь выделите и изображение, и созданный вектор. Нажмите правой кнопкой и выберите «Use as Mask» (Использовать как маску). Фон исчезнет, останется только объект. Если нужно — отредактируйте маску, перетаскивая точки.

Метод 2: Использование масок и клиппинг-групп

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

Создайте фигуру, которая приблизительно соответствует форме объекта (например, овал для головы или прямоугольник с закруглёнными углами для телефона). Поместите её поверх изображения. Выделите оба слоя — изображение и фигуру — и нажмите Ctrl+Alt+M (Cmd+Option+M на Mac). Это создаст клиппинг-группу, которая обрежет изображение по форме фигуры.

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

Метод 3: Плагины для автоматического удаления фона

Для тех, кто хочет сэкономить время, Figma предлагает мощные плагины, которые используют алгоритмы машинного обучения для автоматического выделения объектов. Наиболее популярный — Remove.bg. Он интегрируется напрямую в интерфейс Figma и работает за пару кликов.

Установите плагин через меню «Plugins» → «Browse plugins» → найдите «Remove.bg». После установки выберите изображение, запустите плагин — он автоматически распознаёт объект, удаляет фон и заменяет его прозрачностью. Результат появляется в виде нового слоя поверх оригинала. Вы можете удалить исходное изображение, оставив только обработанное.

Есть и другие варианты: Unscreen (для видео), Background Eraser, AI Image Cutout. Все они работают по схожему принципу, но Remove.bg — самый стабильный и точный для статичных изображений.

Метод 4: Интеграция с ИИ-инструментами

Если вы работаете с высокой точностью — например, в проектах для e-commerce или брендинга — стоит использовать внешние ИИ-инструменты, такие как Adobe Firefly, Canva’s AI Background Remover или Microsoft Designer. Эти сервисы часто дают лучший результат, чем плагины Figma, особенно для сложных текстур.

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

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

Частые ошибки и как их избежать

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

• Экспорт в JPG вместо PNG — фон становится белым. Всегда выбирайте PNG-24 с прозрачностью.
• Игнорирование краёв — если фон удаляется неаккуратно, остаются «грязные» края. Используйте инструмент «Select» с увеличением 200% и корректируйте края вручную.
• Использование маски без проверки — маска может быть неаккуратно наложена. Всегда проверяйте, что объект не «выпирает» за границы маски.
• Неудачный выбор плагина — некоторые плагины не поддерживают прозрачность или добавляют артефакты. Тестируйте на нескольких изображениях перед массовым использованием.
• Слишком много слоёв — после удаления фона остаются лишние слои. Удаляйте оригинальные изображения, оставляя только обработанные.

Чтобы избежать этих ошибок, создайте чек-лист перед экспортом: 1) формат PNG, 2) прозрачность видна в предпросмотре, 3) края чистые, 4) нет дублирующих слоёв, 5) имя файла содержит «_transparent».

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

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

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

Заключение

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

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

• Используйте PNG с прозрачностью — никогда не экспортируйте фон в JPG.
• Для простых объектов — ручное вырезание через Pen; для сложных — плагины + ручная коррекция.
• Всегда проверяйте края в масштабе 200–300%.
• Сохраняйте исходные изображения в отдельной группе для будущих правок.
• Интеграция с ИИ-инструментами повышает качество, но не заменяет экспертную проверку.