Как удалить фон в Figma: полное руководство от новичка до про
Figma удаляет фон изображения автоматически через плагины вроде Remove.bg или Icons8 Background Remover, доступные на всех тарифах. Для точной работы с логотипами или сложными объектами подойдут маски и Pen Tool, а на Enterprise-тарифах доступна встроенная ИИ-функция. Эти методы готовят ассеты для веба без Photoshop.
Figma фокусируется на векторе и прототипах, но инструменты справляются с задачами веб-дизайна: вырезка объектов, прозрачный фон для PNG, экспорт WebP и SVG без фона
Figma фокусируется на векторе и прототипах, но инструменты справляются с задачами веб-дизайна: вырезка объектов, прозрачный фон для PNG, экспорт WebP и SVG без фона
Оглавление
• Способ 1. Автоматизация: Топ плагины для удаления фона
• Способ 2. Встроенный ИИ-инструмент Figma
• Способ 3. Ручные методы: Маски и Pen Tool
• Способ 4. Доводка результата: Идеальные края
• Способ 5. Подготовка логотипов и графики
• Правильный экспорт: Как сохранить прозрачность
• Сравнительная таблица всех методов
• FAQ: Решение проблем и частые ошибки
• Способ 1. Автоматизация: Топ плагины для удаления фона
• Способ 2. Встроенный ИИ-инструмент Figma
• Способ 3. Ручные методы: Маски и Pen Tool
• Способ 4. Доводка результата: Идеальные края
• Способ 5. Подготовка логотипов и графики
• Правильный экспорт: Как сохранить прозрачность
• Сравнительная таблица всех методов
• FAQ: Решение проблем и частые ошибки
Способ 1. Автоматизация: Топ плагины для удаления фона (Самый быстрый вариант)
Плагины обрабатывают удаление фона за секунды на Free и Pro тарифах. Они лидируют по скорости для простых объектов, где контраст с фоном четкий. Плагины используют нейронные сети, обученные на миллионах изображений, для анализа пикселей и отделения объекта от фона.
Remove.bg (Remove Background)
Установите плагин через Resources > Plugins > "Remove Background". Выделите
изображение, правый клик > Plugins > Remove Background, вставьте API-ключ с remove.bg (бесплатно до 0.25 Мп в месяц). Обработка занимает несколько секунд, результат — слой с прозрачным фоном.
Шаги установки:
1. Откройте Figma, перейдите в Resources (левая панель)
2. Найдите Remove Background в Community Plugins
3. Установите плагин
4. Зарегистрируйтесь на remove.bg, скопируйте API-ключ
5. В Figma: выделите изображение > правый клик > Plugins > Remove Background > вставьте ключ (единоразово)
Remove.bg показывает точность 95% на однородных фонах и 90% на сложных краях (волосы, ветки). Лимит бесплатного тарифа — несколько обработок в день, платные планы начинаются от 5 долларов в месяц.
Erase.bg
Плагин Erase.bg выделяет волосы и сложные края лучше аналогов за счет
специализированного ИИ. Установите аналогично, выделите фото > Plugins > Erase.bg.
Регистрация дает кредиты, качество растушевки края на 20% выше базовых инструментов.
Icons8 Background Remover
Этот плагин полностью бесплатный без лимитов и регистрации. Выделите изображения (даже пачку) > Plugins > Icons8 Background Remover > Remove background. Обработка батчем экономит часы на карточках товаров и каталогах.
Преимущества для обработки: - Удаляет фон с нескольких изображений одновременно - Не требует регистрации и API-ключей - Результат готов за 2-3 клика.
Сравнение плагинов: Таблица
Remove.bg (Remove Background)
Установите плагин через Resources > Plugins > "Remove Background". Выделите
изображение, правый клик > Plugins > Remove Background, вставьте API-ключ с remove.bg (бесплатно до 0.25 Мп в месяц). Обработка занимает несколько секунд, результат — слой с прозрачным фоном.
Шаги установки:
1. Откройте Figma, перейдите в Resources (левая панель)
2. Найдите Remove Background в Community Plugins
3. Установите плагин
4. Зарегистрируйтесь на remove.bg, скопируйте API-ключ
5. В Figma: выделите изображение > правый клик > Plugins > Remove Background > вставьте ключ (единоразово)
Remove.bg показывает точность 95% на однородных фонах и 90% на сложных краях (волосы, ветки). Лимит бесплатного тарифа — несколько обработок в день, платные планы начинаются от 5 долларов в месяц.
Erase.bg
Плагин Erase.bg выделяет волосы и сложные края лучше аналогов за счет
специализированного ИИ. Установите аналогично, выделите фото > Plugins > Erase.bg.
Регистрация дает кредиты, качество растушевки края на 20% выше базовых инструментов.
Icons8 Background Remover
Этот плагин полностью бесплатный без лимитов и регистрации. Выделите изображения (даже пачку) > Plugins > Icons8 Background Remover > Remove background. Обработка батчем экономит часы на карточках товаров и каталогах.
Преимущества для обработки: - Удаляет фон с нескольких изображений одновременно - Не требует регистрации и API-ключей - Результат готов за 2-3 клика.
Сравнение плагинов: Таблица
Способ 2. Встроенный ИИ-инструмент Figma
Встроенный ИИ для remove background доступен на Enterprise и Education тарифах через Admin settings. Выделите изображение > правый клик > ... > Remove Background. Функция анализирует пиксели, создает Smart selection без загрузки на внешние серверы.
Ограничения встроенной функции:
- Доступна только на Enterprise и Education
- Требует интернета
- Не работает на Free и Pro тарифах
- Точность 90% для простых объектов, ручные методы надежнее для брендинга
Проверьте права организации в Settings > Permissions > AI features — если функция недоступна, используйте плагины.
Ограничения встроенной функции:
- Доступна только на Enterprise и Education
- Требует интернета
- Не работает на Free и Pro тарифах
- Точность 90% для простых объектов, ручные методы надежнее для брендинга
Проверьте права организации в Settings > Permissions > AI features — если функция недоступна, используйте плагины.
Способ 3. Ручные методы: Маски и Pen Tool
Маски скрывают фон без удаления пикселей, сохраняя редактируемость. Это неразрушающее редактирование идеально для тестов и итераций.
Обтравочная маска (Mask with Shape)
1. Разместите Rectangle или Ellipse поверх объекта
2. Выделите оба слоя (изображение + фигура)
3. Object > Mask (или Ctrl+Alt+M на Windows, Cmd+Option+M на Mac)
Маска скроет всё, что выходит за границы фигуры. Отредактируйте фигуру — маска обновится автоматически.
Разница между Mask и Boolean Operations
Обтравочная маска (Mask with Shape)
1. Разместите Rectangle или Ellipse поверх объекта
2. Выделите оба слоя (изображение + фигура)
3. Object > Mask (или Ctrl+Alt+M на Windows, Cmd+Option+M на Mac)
Маска скроет всё, что выходит за границы фигуры. Отредактируйте фигуру — маска обновится автоматически.
Разница между Mask и Boolean Operations
Профессиональная вырезка: Инструмент Pen Tool (Векторные сети)
Pen Tool (клавиша P) обводит контур вручную:
1. Кликайте для создания узлов по контуру объекта
2. Удерживайте Alt и тащите для кривых Безье
3. Замкните контур (клик на первый узел)
4. Выделите вектор + фото > Mask
Идеально для логотипов, где нужна точность до пикселя. Края без ореола и артефактов.
Профессиональный совет: Используйте Vector networks (Shift+A) для сложных форм — это ускорит работу на 30% по сравнению с классическим Pen Tool.
Pen Tool (клавиша P) обводит контур вручную:
1. Кликайте для создания узлов по контуру объекта
2. Удерживайте Alt и тащите для кривых Безье
3. Замкните контур (клик на первый узел)
4. Выделите вектор + фото > Mask
Идеально для логотипов, где нужна точность до пикселя. Края без ореола и артефактов.
Профессиональный совет: Используйте Vector networks (Shift+A) для сложных форм — это ускорит работу на 30% по сравнению с классическим Pen Tool.
Способ 3. Ручные методы: Маски и Pen Tool
Маски скрывают фон без удаления пикселей, сохраняя редактируемость. Это
неразрушающее редактирование идеально для тестов и итераций.
Обтравочная маска (Mask with Shape)
1. Разместите Rectangle или Ellipse поверх объекта
2. Выделите оба слоя (изображение + фигура)
3. Object > Mask (или Ctrl+Alt+M на Windows, Cmd+Option+M на Mac)
Маска скроет всё, что выходит за границы фигуры. Отредактируйте фигуру — маска обновится автоматически.
Разница между Mask и Boolean Operations
неразрушающее редактирование идеально для тестов и итераций.
Обтравочная маска (Mask with Shape)
1. Разместите Rectangle или Ellipse поверх объекта
2. Выделите оба слоя (изображение + фигура)
3. Object > Mask (или Ctrl+Alt+M на Windows, Cmd+Option+M на Mac)
Маска скроет всё, что выходит за границы фигуры. Отредактируйте фигуру — маска обновится автоматически.
Разница между Mask и Boolean Operations
Профессиональная вырезка: Инструмент Pen Tool (Векторные сети)
Pen Tool (клавиша P) обводит контур вручную: 1. Кликайте для создания узлов по контуру объекта 2. Удерживайте Alt и тащите для кривых Безье 3. Замкните контур (клик на первый узел) 4. Выделите вектор + фото > Mask
Идеально для логотипов, где нужна точность до пикселя. Края без ореола и артефактов.
Профессиональный совет: Используйте Vector networks (Shift+A) для сложных форм — это ускорит работу на 30% по сравнению с классическим Pen Tool.
Pen Tool (клавиша P) обводит контур вручную: 1. Кликайте для создания узлов по контуру объекта 2. Удерживайте Alt и тащите для кривых Безье 3. Замкните контур (клик на первый узел) 4. Выделите вектор + фото > Mask
Идеально для логотипов, где нужна точность до пикселя. Края без ореола и артефактов.
Профессиональный совет: Используйте Vector networks (Shift+A) для сложных форм — это ускорит работу на 30% по сравнению с классическим Pen Tool.
Способ 4. Доводка результата: Идеальные края
После удаления фона часто остаются артефакты: ореол, тень, размытие. Вот как их убрать.
Убираем ореол и артефакты
Метод 1: Inner Shadow
1. Выделите слой с вырезанным объектом
2. Design > Effects > Shadow
3. Установите Inner Shadow, расстояние 1px, opacity 20%
Метод 2: Обводка цвета объекта
1. Design > Stroke (обводка)
2. Выберите цвет объекта, толщина 0.5–1px
3. Позиция: Inside
Смягчение краев (Feather)
Feather через Layer Blur на маске:
1. Выделите маску (слой > маска)
2. Design > Blur > Layer Blur
3. Значение 2–5px для мягких краев
Drop Shadow для глубины:
1. Design > Effects > Shadow
2. Угол 135°, расстояние 4px, blur 8px, opacity 15%
Ручная корректировка
Используйте Eraser Tool (E) на маске для точечного удаления артефактов. Clone Stamp (Alt+щелчок) копирует чистые зоны — полезно для удаления теней.
Убираем ореол и артефакты
Метод 1: Inner Shadow
1. Выделите слой с вырезанным объектом
2. Design > Effects > Shadow
3. Установите Inner Shadow, расстояние 1px, opacity 20%
Метод 2: Обводка цвета объекта
1. Design > Stroke (обводка)
2. Выберите цвет объекта, толщина 0.5–1px
3. Позиция: Inside
Смягчение краев (Feather)
Feather через Layer Blur на маске:
1. Выделите маску (слой > маска)
2. Design > Blur > Layer Blur
3. Значение 2–5px для мягких краев
Drop Shadow для глубины:
1. Design > Effects > Shadow
2. Угол 135°, расстояние 4px, blur 8px, opacity 15%
Ручная корректировка
Используйте Eraser Tool (E) на маске для точечного удаления артефактов. Clone Stamp (Alt+щелчок) копирует чистые зоны — полезно для удаления теней.
Способ 5. Подготовка логотипов и графики
Логотипы требуют особого подхода: часто нужно работать с белым или черным фоном, сохраняя контрастность.
Белый логотип на цветном фоне
Примените Multiply режим наложения:
1. Выделите слой логотипа
2. Design > Blending > Multiply
Multiply делает белый цвет прозрачным, сохраняя черные линии. Идеально для логотипов на цветных фонах.
Темный логотип на светлом фоне
Используйте Screen режим:
1. Design > Blending > Screen
Screen инвертирует эффект Multiply — черный становится прозрачным.
Белый логотип на цветном фоне
Примените Multiply режим наложения:
1. Выделите слой логотипа
2. Design > Blending > Multiply
Multiply делает белый цвет прозрачным, сохраняя черные линии. Идеально для логотипов на цветных фонах.
Темный логотип на светлом фоне
Используйте Screen режим:
1. Design > Blending > Screen
Screen инвертирует эффект Multiply — черный становится прозрачным.
Правильный экспорт: Как сохранить прозрачность
Выбор формата
Чек-лист настроек Export
1. Включите "Include in Export" на слое (правый клик > Export settings)
2. Масштаб: @1x, @2x для Retina
3. Фрейм без Fill:
4. Выделите фрейм
5. Design > Fill > удалите заливку или установите Opacity 0%
6. Проверьте слои: скройте все лишние (глазик)
Частая ошибка: Черный квадрат в экспорте — это заливка фрейма. Снимите её перед экспортом.
Пошаговый экспорт PNG с прозрачностью
1. Выделите объект или фрейм
2. File > Export > PNG
3. Убедитесь, что фрейм без заливки
4. Нажмите Export
Результат — PNG с альфа-каналом, готовый для веба.
1. Включите "Include in Export" на слое (правый клик > Export settings)
2. Масштаб: @1x, @2x для Retina
3. Фрейм без Fill:
4. Выделите фрейм
5. Design > Fill > удалите заливку или установите Opacity 0%
6. Проверьте слои: скройте все лишние (глазик)
Частая ошибка: Черный квадрат в экспорте — это заливка фрейма. Снимите её перед экспортом.
Пошаговый экспорт PNG с прозрачностью
1. Выделите объект или фрейм
2. File > Export > PNG
3. Убедитесь, что фрейм без заливки
4. Нажмите Export
Результат — PNG с альфа-каналом, готовый для веба.
Сравнительная таблица всех методов
FAQ: Решение проблем и частые ошибки
Почему плагин просит API-ключ?
Лимиты бесплатной версии исчерпаны. Зарегистрируйтесь на remove.bg, скопируйте API-ключ из личного кабинета, вставьте в плагин (единоразово). Платные планы начинаются от 5 долларов в месяц.
Кнопка Mask неактивна, что делать?
Выделите два слоя одновременно: изображение и фигуру (Rectangle, Ellipse или вектор). Если выделен только один слой, Mask будет неактивна.
Как удалить белый фон у JPG, если не работает плагин?
JPG не поддерживает прозрачность.
Варианты:
1. Конвертируйте в PNG перед загрузкой в Figma
2. Используйте маску (Rectangle > Mask)
3. Примените Multiply режим наложения
Встроенный ИИ Figma недоступен?
Проверьте:
1. Тариф организации (Enterprise или Education)
2. Settings > Permissions > AI features — включена ли функция
3. Обновите Figma до последней версии
Плагин удалил фон, но остался ореол?
Примените Inner Shadow (opacity 20%, расстояние 1px) или обводку цвета объекта (0.5px, Inside).
Как экспортировать WebP с прозрачностью?
1. Выделите объект
2. File > Export > WebP
3. Убедитесь, что фрейм без заливки
4. WebP сохранит альфа-канал автоматически
Почему качество вырезки низкое на бесплатном тарифе?
Плагины на бесплатных планах обрабатывают изображения с меньшим разрешением. Для высокого качества:
1. Используйте платный тариф Remove.bg
2. Вырезайте вручную через Pen Tool
3. Используйте Icons8 (бесплатный без ограничений качества)
Как удалить фон у логотипа с градиентом?
Градиент усложняет автоматическое удаление.
Используйте:
1. Pen Tool для точной вырезки
2. Маску с фигурой
3. Плагин Erase.bg (лучше работает с градиентами)
Экспорт PNG, но фон черный вместо прозрачного?
Проверьте:
1. Фрейм без заливки (Design > Fill > удалите)
2. Слой с объектом имеет прозрачность (Opacity не 0%)
3. Экспортируйте именно слой, а не фрейм
Лимиты бесплатной версии исчерпаны. Зарегистрируйтесь на remove.bg, скопируйте API-ключ из личного кабинета, вставьте в плагин (единоразово). Платные планы начинаются от 5 долларов в месяц.
Кнопка Mask неактивна, что делать?
Выделите два слоя одновременно: изображение и фигуру (Rectangle, Ellipse или вектор). Если выделен только один слой, Mask будет неактивна.
Как удалить белый фон у JPG, если не работает плагин?
JPG не поддерживает прозрачность.
Варианты:
1. Конвертируйте в PNG перед загрузкой в Figma
2. Используйте маску (Rectangle > Mask)
3. Примените Multiply режим наложения
Встроенный ИИ Figma недоступен?
Проверьте:
1. Тариф организации (Enterprise или Education)
2. Settings > Permissions > AI features — включена ли функция
3. Обновите Figma до последней версии
Плагин удалил фон, но остался ореол?
Примените Inner Shadow (opacity 20%, расстояние 1px) или обводку цвета объекта (0.5px, Inside).
Как экспортировать WebP с прозрачностью?
1. Выделите объект
2. File > Export > WebP
3. Убедитесь, что фрейм без заливки
4. WebP сохранит альфа-канал автоматически
Почему качество вырезки низкое на бесплатном тарифе?
Плагины на бесплатных планах обрабатывают изображения с меньшим разрешением. Для высокого качества:
1. Используйте платный тариф Remove.bg
2. Вырезайте вручную через Pen Tool
3. Используйте Icons8 (бесплатный без ограничений качества)
Как удалить фон у логотипа с градиентом?
Градиент усложняет автоматическое удаление.
Используйте:
1. Pen Tool для точной вырезки
2. Маску с фигурой
3. Плагин Erase.bg (лучше работает с градиентами)
Экспорт PNG, но фон черный вместо прозрачного?
Проверьте:
1. Фрейм без заливки (Design > Fill > удалите)
2. Слой с объектом имеет прозрачность (Opacity не 0%)
3. Экспортируйте именно слой, а не фрейм