Как вырезать объект из картинки в Figma: рабочие методы

Как вырезать объект из изображения в Figma: 3 способа

5500 просмотров

Поделиться в социальных сетях

Вырезать объект из изображения в Figma теперь можно без обязательной установки плагинов. В 2026 году у Figma есть встроенные AI-инструменты Remove background и Isolate, а классическая маска Use as mask по-прежнему остаётся самым универсальным бесплатным способом, когда нужен ручной контроль.

Короткий ответ

Нужно убрать весь фон в один клик? Используйте Remove background.

Нужно отделить конкретный объект из сложной сцены? Select area → Isolate.

Нужна бесплатная и полностью управляемая обрезка по контуру? Создайте векторную форму и примените Use as mask.

как вырезать объект из изображения в Figma
Три актуальных подхода: встроенное удаление фона, изоляция объекта и ручная маска.

Материал обновлён 17 сентября 2026 года.

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Главный вывод

Если у вас доступен Figma AI, начинайте со встроенных Remove background или Isolate: это быстрее и не требует искать сторонний плагин. Маску используйте, когда нужен точный контур, не хочется тратить AI-кредиты или важно сохранить полностью неразрушающий процесс.

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Как вырезать объект в Figma: какой способ выбрать

Под словом «вырезать» обычно скрываются три разные задачи. Их важно не смешивать:

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

Для первой задачи подходит Remove background, для второй — Isolate, для третьей — маска. Если вы только знакомитесь с редактором, сначала полезно прочитать обзор «Что такое Figma и зачем она нужна дизайнерам».

Сравнение способов: Remove background, Isolate, маска и плагины

Способ Когда использовать План / условия Результат
Remove background Быстро убрать весь фон Figma AI, платные планы, AI-кредиты Изображение без фона
Isolate object Выделить отдельный предмет или область Figma AI, редактирование изображения Новый image layer
Use as mask Точный ручной контур, фигуры, аватары Доступно на любом плане при edit-доступе Mask object, исходник не удаляется
Image Cutter Разрезать картинку по заранее нарисованным формам Сторонний плагин Отдельные растровые фрагменты
Плагин удаления фона Резервный вариант, если встроенный AI недоступен Зависит от конкретного плагина Обычно PNG / image layer без фона

1. Remove background — как удалить фон в Figma автоматически

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

  1. Выделите изображение на холсте.
  2. На вторичной панели инструментов нажмите Remove background.
  3. Дождитесь обработки и проверьте края объекта на контрастном фоне.

Важно про доступность

Figma относит AI-редактирование изображений к функциям платных планов и требует права редактирования файла. AI-действия расходуют кредиты; по текущей таблице Figma удаление фона стоит 1–5 AI-кредитов за изображение. Если кнопки нет, сначала проверьте план, edit-доступ и настройки AI в команде.

Remove background удобен для предметных фото, людей, простых объектов и визуалов для интерфейсов. Но AI может ошибаться на волосах, полупрозрачных деталях, тенях, стекле или фоне, который по цвету близок к объекту.

2. Isolate object — как вырезать отдельный объект из фото

Если на изображении несколько объектов и удалять весь фон не нужно, полезнее команда Isolate. Она работает через Select area и создаёт новый слой только из выбранной области.

  1. Выберите картинку.
  2. На вторичной панели нажмите Select area.
  3. Лассо обведите нужный предмет или область.
  4. Нажмите Isolate.
  5. Figma создаст из выделенного объекта новый image layer.

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

3. Use as mask — как вырезать объект вручную по контуру

Маска — базовый и неразрушающий способ. Figma скрывает лишние области, но не удаляет пиксели исходного изображения. Маски доступны на любом плане при наличии edit-доступа.

Шаг 1. Обведите объект инструментом Pen

Выберите Pen и аккуратно создайте замкнутую векторную форму по контуру объекта. Для ровных участков ставьте меньше точек; для кривых работайте с направляющими Безье.

создание контура объекта в Figma инструментом Pen
Создайте замкнутый векторный контур вокруг нужного объекта.

Шаг 2. Подготовьте форму-маску

Для обычной Alpha mask достаточно, чтобы фигура была непрозрачной в нужной области. Цвет самой заливки не важен — важна её непрозрачность.

подготовка формы для маски в Figma
У формы должна быть видимая непрозрачная область, которая определит, что останется видно.

Шаг 3. Поставьте маску под изображением

В Layers разместите форму ниже изображения по z-оси. Это принципиально: в Figma маска действует на соседние слои над ней до следующей маски или границы родительской группы / фрейма.

слои для команды Use as mask в Figma
Фигура-маска должна находиться ниже изображения, которое она маскирует.

Шаг 4. Примените Use as mask

Выделите форму и изображение, затем выберите Use as mask в правой панели или используйте горячую клавишу: Ctrl + Alt + M в Windows и Control + Command + M на Mac.

результат Use as mask в Figma
После применения Figma создаёт mask object: скрытые части изображения остаются доступными для дальнейшего редактирования.

Полезно знать

В актуальной Figma есть три типа масок: Alpha, Vector и Luminance. Для обычной обрезки по непрозрачной форме чаще всего достаточно Alpha; Vector полезен, когда важен именно контур, а Luminance управляет видимостью по яркости.

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Практический совет

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

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Плагины: когда Image Cutter и Remove Background всё ещё полезны

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

Image Cutter — разрезать изображение на части

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

Ссылка из исходной версии статьи: Image Cutter в Figma Community. Если плагин не отображается или интерфейс изменился, ориентируйтесь на текущую карточку в Community.

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

Сторонний Remove Background — запасной вариант

Если встроенная команда Remove background недоступна по плану или AI-настройкам команды, можно использовать сторонний плагин. Но перед установкой проверьте автора, условия обработки изображений и требования к аккаунту: плагины могут отправлять файлы во внешние сервисы.

Ссылка из старой версии: Remove Background в Figma Community. Для рабочих файлов с чувствительным содержимым безопаснее сначала уточнить политику конкретного плагина.

плагин Remove Background в Figma
Скриншот стороннего Remove Background из прежней версии материала; сегодня встроенный Figma AI обычно короче по сценарию.

Как аккуратно вырезать волосы, стекло, тени и сложные края

Ни один автоматический способ не гарантирует идеальные края на каждом фото. После Remove background или Isolate всегда проверяйте результат минимум на двух подложках: светлой и тёмной.

  • Волосы и мех: увеличьте изображение и ищите светлые ореолы или съеденные пряди.
  • Стекло и полупрозрачность: маска или полноценный растровый редактор часто дают больше контроля, чем автоматическое удаление фона.
  • Мягкая тень: решите, нужна ли она в итоговой композиции. Иногда AI удаляет тень вместе с фоном, и предмет начинает «висеть».
  • Контрастный ореол: если объект снят на очень светлом или цветном фоне, край может сохранить оттенок окружения.

Для сложной предметной ретуши, волос, полупрозрачных объектов и коммерческих hero-изображений иногда разумнее подготовить исходник в Photoshop. На эту тему есть отдельная инструкция «9 способов удалить фон на изображении в Photoshop».

Частые ошибки и как их исправить

Проблема Почему так происходит Что сделать
Use as mask не работает Маска выше изображения или слои не являются нужными siblings Поставьте форму ниже изображения и проверьте структуру Layers
AI срезал часть объекта Низкий контраст, сложный край, перекрытия Попробуйте Isolate по меньшей области или ручную маску
Нет Remove background План, edit-доступ или AI отключён для команды Проверьте права и AI-настройки; используйте маску как универсальный вариант
Объект выглядит с белым ореолом Фон «запёкся» в краевых пикселях Проверяйте на тёмной подложке; для сложных случаев доработайте изображение в растровом редакторе
Image Cutter не режет как ожидается Неверно выбраны формы или изображение Сначала упростите тест до одного изображения и одной формы
Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Рабочий принцип

Выбирайте инструмент под задачу, а не по привычке. Для фонового «одного клика» — Remove background, для одного предмета в сцене — Isolate, для точной формы и бесплатного сценария — маска. Плагин нужен только тогда, когда он делает конкретную операцию лучше или быстрее встроенных средств.

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

FAQ: частые вопросы про вырезание объектов и удаление фона в Figma

Можно ли удалить фон в Figma без плагина?

Да. В актуальной Figma есть встроенная AI-команда Remove background. Она удаляет фон у выбранного изображения без установки стороннего плагина. Функция относится к AI-редактированию изображений и доступна на платных планах при наличии edit-доступа.

Как вырезать отдельный объект, а не весь фон?

Используйте Select area: обведите объект лассо и нажмите Isolate. Figma превратит выбранную область в новый image layer.

Как вырезать объект в Figma вручную по контуру?

Обведите объект Pen Tool, замкните контур, поставьте векторную форму ниже изображения, выделите оба слоя и примените Use as mask.

Маска в Figma удаляет исходное изображение?

Нет. Маска — неразрушающая операция: скрытые области остаются в файле и снова появляются, если снять маску.

Какая горячая клавиша включает Use as mask?

В Windows — Ctrl + Alt + M. На Mac — Control + Command + M.

Почему в Figma нет кнопки Remove background?

Чаще всего причина в плане, правах на редактирование файла или настройках AI для команды. Проверьте, доступно ли AI-редактирование изображений в вашем аккаунте. Если нет — Use as mask остаётся доступным вариантом на любом плане.

Можно ли вырезать объект в Figma бесплатно?

Да. Маски доступны на любом плане: можно вручную создать контур и применить Use as mask без AI-кредитов. Сторонние плагины также могут иметь бесплатные режимы, но их условия зависят от разработчика.

Что лучше: маска или Remove background?

Remove background быстрее для фото с понятным главным объектом. Маска лучше, когда нужен заданный контур, хочется сохранить полный контроль или встроенный AI недоступен. Для сложного предмета в насыщенной сцене попробуйте Isolate.

Как прокачать работу в Figma дальше

Вырезание объектов — лишь одна из повседневных операций. В реальных UX/UI- и веб-проектах гораздо важнее научиться работать со слоями, компонентами, Auto Layout, прототипами и системной типографикой.

Для следующего шага можно открыть две инструкции: про интерактивные прототипы в Figma и про подключение шрифтов в Figma.

Хотите освоить Figma как рабочий инструмент дизайнера?

На программе Yudaev School «Дизайнер с нуля до PRO» Figma изучается вместе с интерфейсами, визуальным дизайном, Photoshop, motion и другими инструментами, которые используются в реальных проектах.

Посмотреть программу курса

Авторитетные источники

  1. Figma Help Center — Make or edit an image with AI: встроенные Remove background, Select area, Isolate и условия доступа.
  2. Figma Help Center — Masks: устройство масок, порядок слоёв, типы масок и горячие клавиши.
  3. Figma Help Center — How AI credits work: текущая система AI-кредитов и стоимость Remove background.
  4. GitHub — Image Cutter: репозиторий плагина для разрезания изображений на части.

Автор:

Павел Алтунин

UX/UI дизайнер, веб-дизайнер

Поделиться в социальных сетях

Вернуться в начало страницы

Популярные статьи

Все

3D-дизайн

UX/UI

Веб-дизайн

Графический дизайн

Дизайн интерьера

Искусство

Любым дизайнерам

Моушн-дизайн

Нейросети

Образование

UX/UI

Веб-дизайн

Дизайн мобильного приложения в Figma: от пользовательского сценария до UI-макета

UX/UI

Графический дизайн

Лучшие плагины Figma для UX/UI и графического дизайна

Веб-дизайн

Графический дизайн

Нейросети

Предметная съёмка с нейросетью: как сделать фото товара без студии

Дизайн интерьера

Дизайн интерьера по фото с помощью нейросети: инструменты и промпты

Веб-дизайн

Графический дизайн

Как сделать обложку-превью для YouTube: размеры и правила дизайна

Веб-дизайн

Графический дизайн

Шрифтовые пары: лучшие сочетания с кириллицей для сайтов и презентаций

UX/UI

Веб-дизайн

User Flow: как спроектировать сценарий пользователя и нарисовать схему

UX/UI

Веб-дизайн

CJM: как построить карту пути клиента и применять её в UX-дизайне

Любым дизайнерам

Дизайн-система в Figma: как собрать компоненты, стили и документацию

Веб-дизайн

Любым дизайнерам

Auto Layout в Figma: полный гайд по адаптивным компонентам

3D-дизайн

Рендер в Blender: Cycles или Eevee, свет, камера и настройки качества

Графический дизайн

Любым дизайнерам

Мудборд для дизайнера: как собрать визуальную концепцию проекта

Графический дизайн

Любым дизайнерам

Фирменный стиль: что это, из чего состоит айдентика и как её разработать

Любым дизайнерам

Нейросети

Bing Image Creator: обзор, возможности и инструкция по использованию в 2026 году

Любым дизайнерам

Нейросети

Нейросети для управления проектами: чем пользоваться дизайнеру и на что обратить внимание

Любым дизайнерам

Нейросети

10 нейросетей для создания логотипов и гербов в 2026 году

3D-дизайн

Моушн-дизайн

Бесплатные конструкторы, в которых можно создать персонажа

Любым дизайнерам

Образование

Образование после школы: куда пойти учиться

Любым дизайнерам

Образование

Кем работать, если ничего не умеешь, нет образования или опыта

3D-дизайн

Моушн-дизайн

Лучшие программы для 3D-моделирования в 2026 году

Любым дизайнерам

Образование

Тест Векслера: задачи и правила проведения

Любым дизайнерам

Образование

Изменился порядок приёма в вузы в 2026 году

Искусство

Любым дизайнерам

В чём секрет гениальности «Чёрного квадрата» Малевича

3D-дизайн

UX/UI

Моушн-дизайн

12 популярных программ для создания анимации

Моушн-дизайн

DaVinci Resolve: обзор программы, цена и возможные аналоги

UX/UI

UX/UI

Веб-дизайн

Дизайн мобильного приложения в Figma: от пользовательского сценария до UI-макета

UX/UI

Графический дизайн

Лучшие плагины Figma для UX/UI и графического дизайна

UX/UI

Веб-дизайн

User Flow: как спроектировать сценарий пользователя и нарисовать схему

UX/UI

Веб-дизайн

CJM: как построить карту пути клиента и применять её в UX-дизайне

UX/UI

Веб-дизайн

Вайрфрейм сайта: что это, какие бывают и как сделать в Figma

UX/UI

Веб-дизайн

Интерактивный прототип в Figma: переходы, оверлеи и анимация

UX/UI

Веб-дизайн

Структура продающего лендинга: какие блоки нужны и в каком порядке

UX/UI

Веб-дизайн

Композиция в дизайне: 12 принципов с примерами и разбором ошибок

UX/UI

Любым дизайнерам

Психология цвета: как он влияет на нас

UX/UI

Веб-дизайн

Нейросети

5 нейросетей для создания сайтов в 2026 году: от лендинга до веб-приложения

UX/UI

Веб-дизайн

Чем отличается веб-дизайнер от UX/UI-дизайнера: задачи, навыки и что выбрать

UX/UI

Веб-дизайн

Графический дизайн

Как вырезать объект из изображения в Figma: 3 способа

UX/UI

Веб-дизайн

Графический дизайн

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

UX/UI

Веб-дизайн

Графический дизайн

Как создать GIF из видео и фото: 11 онлайн-сервисов и программ

UX/UI

Веб-дизайн

Графический дизайн

Фриланс в 2026 году: как начать, сколько можно зарабатывать и где искать клиентов

UX/UI

Веб-дизайн

Графический дизайн

9 аналогов Canva: чем заменить редактор в 2026 году