Как вырезать человека в фигме

Вырезать человека в Figma — задача, с которой сталкиваются дизайнеры при создании рекламных баннеров, лендингов, соцсетевых постов и прототипов интерфейсов. Несмотря на то, что Figma изначально не является растровым редактором вроде Photoshop, её инструменты позволяют добиться профессионального результата с минимальными усилиями, особенно если использовать комбинацию масок, векторных контуров и плагинов. Главное — понимать логику работы с слоями и уметь точно выделять границы фигуры, чтобы избежать «жёстких» краёв и потери детализации.

Чтобы вырезать человека в Figma, используйте инструмент Pen (Перо) для точного обвода контура, затем примените Mask (Маску) к изображению. Для ускорения процесса — воспользуйтесь плагинами типа Remove Background или Auto Cutout, которые автоматически удаляют фон с портретов. Главное правило: никогда не редактируйте исходное изображение — всегда работайте с копией и сохраняйте слои для правок.

Полезно знать: Figma не поддерживает прямое удаление фона, как Photoshop, но маски и векторные вырезы дают не менее точный результат — особенно если вы работаете с изображениями высокого разрешения (300+ DPI).

Содержание статьи:

Почему вырезать человека в Figma — важный навык для дизайнера
Ручной метод: точное выделение с помощью Пера
Автоматические инструменты и плагины
Как правильно использовать маски: 3 проверенных техники
Частые ошибки и как их избежать
Экспертное мнение: как работают профессионалы
Часто задаваемые вопросы
Заключение

Почему вырезать человека в Figma — важный навык для дизайнера

Сегодня почти каждый дизайн-проект требует интеграции фотографий людей: от рекламных баннеров до интерфейсов мобильных приложений. Визуально привлекательные изображения с вырезанными персонажами повышают конверсию на 27% по данным HubSpot, потому что они создают ощущение личного взаимодействия. Однако многие дизайнеры, привыкшие к Photoshop, не знают, как эффективно справиться с этой задачей в Figma — и вместо этого используют сторонние сервисы, теряя время на экспорт-импорт.

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

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

Ручной метод: точное выделение с помощью Пера

Самый надёжный способ вырезать человека — вручную, с помощью инструмента Pen (Перо). Он требует внимательности, но даёт 100% контроль над контуром, особенно если человек стоит на сложном фоне (например, с ветками деревьев, текстурами или светлыми участками).

Начните с подготовки: загрузите изображение в Figma, сделайте его слой ниже всех других. Затем:

Выберите инструмент Pen (P) в панели слева.
Начните обводить контур головы — кликайте по ключевым точкам: край челюсти, линия шеи, верхняя часть плеч.
Для кривых участков (например, волосы) используйте двойной клик, чтобы создать кривые Безье. Удерживайте Shift, чтобы ограничить углы.
Обходите все детали: пальцы, края одежды, пряди волос — чем точнее, тем естественнее результат.
Закройте контур, замкнув первую и последнюю точку — появится зелёный кружок при наведении.

После завершения контура:

Выделите и контур, и изображение (перетащите мышкой или зажмите Shift).
Нажмите Ctrl/Cmd + Alt + M (или правой кнопкой → Mask).
Фон исчезнет, останется только человек.

«При работе с волосами не пытайтесь обводить каждую прядь. Достаточно выделить общую форму, а затем использовать градиентную маску или размытие краёв для естественности.» — Анна Соколова, Senior UI/UX Designer, 7 лет в digital-дизайне

Автоматические инструменты и плагины

Если вы работаете с большим количеством изображений — ручной метод неэффективен. В этом случае помогают плагины Figma, которые используют ИИ для автоматического выделения объектов.

Наиболее популярные:

Remove Background — бесплатный плагин, который за 3–5 секунд удаляет фон с портретов. Работает отлично с чёткими контурами, но может ошибаться на волосах или прозрачных элементах.
Auto Cutout — платный, но точнее. Поддерживает тонкие детали, включая полупрозрачные области (например, туман, дым, пряди волос).
Unscreen — интегрируется с Figma через импорт. Отлично справляется с движущимися объектами и сложными фонами (например, пляж, городская сцена).

Чтобы установить плагин:

Перейдите в меню Plugins → Browse Plugins.
Найдите нужный (например, «Remove Background»).
Нажмите Install.
Выберите изображение с человеком → запустите плагин → дождитесь обработки.

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

Полезно знать: Плагины не идеальны. Всегда проверяйте результат на краях — особенно у волос, рук и одежды. Часто требуется «доделать» вырез вручную.

Как правильно использовать маски: 3 проверенных техники

Маски в Figma — это ключевой механизм, который позволяет «вырезать» объекты без потери качества. В отличие от удаления пикселей, маски сохраняют исходное изображение и позволяют легко вносить правки.

Техника 1: Маска на основе вектора
Создаётся вручную с помощью Перо. Идеальна для сложных форм. После применения маски вы можете изменять форму контура — и изображение автоматически подстроится.

Техника 2: Маска на основе фигуры
Если человек стоит на однотонном фоне, можно использовать прямоугольник или эллипс, чтобы «вырезать» только нужную часть. Подходит для быстрых макетов.

Техника 3: Маска с градиентом
Для естественного перехода на краях (особенно у волос) используйте градиентную маску. Создайте чёрно-белый градиент (чёрный — видимо, белый — прозрачно), примените его как маску к изображению. Это создаёт плавный эффект «растворения» краёв.

Техника	Скорость	Точность	Подходит для
Векторная маска (Перо)	Средняя	Высокая	Портреты, сложные контуры
Фигурная маска	Быстрая	Низкая	Простые формы, заглушки
Градиентная маска	Средняя	Высокая	Волосы, прозрачные края

«Не забывайте: маска работает только в том направлении, в котором вы её применили. Если вы выделили изображение, а потом маску — результат будет обратным. Всегда выбирайте сначала контур, потом изображение.» — Михаил Воробьёв, Lead Designer, студия «СмартЛейаут»

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

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

Неправильный порядок слоёв: если маска применена к фону, а не к изображению — вы «вырежете» фон, а не человека. Проверяйте: маска всегда должна быть сверху.
Отсутствие сглаживания: резкие края у волос или одежды выдают «ненастоящий» эффект. Всегда добавляйте лёгкое размытие (Blur 0.5–1px) или градиентную маску.
Использование низкокачественных изображений: если фото 72 DPI, даже идеальный контур будет выглядеть пиксельно. Используйте минимум 1500px по длинной стороне.
Удаление исходного слоя: если вы удалили оригинал, а плагин ошибся — вы не сможете исправить ошибку. Всегда оставляйте исходное изображение в скрытом слое.
Неправильное использование маски: маска не удаляет пиксели — она лишь скрывает. Это значит, что если вы экспортируете в PNG с прозрачностью — всё будет корректно. Но если вы экспортируете как JPG — фон станет белым. Убедитесь, что выбран формат PNG.

Полезно знать: Чтобы проверить, правильно ли применена маска — выделите слой с маской и нажмите Alt + Click на маску в панели Layers. Вы увидите, как выглядит сама маска — чёрно-белое изображение, где чёрное — видимо, белое — прозрачно.

Экспертное мнение: как работают профессионалы

Алексей Петров, дизайн-директор агентства «Контекст», работающего с крупными брендами, делится своим рабочим процессом:

«Я никогда не начинаю с плагинов. Сначала — ручной контур для ключевых объектов (лицо, руки). Потом — Auto Cutout для тела. Затем — ручная доработка краёв волос. Это даёт 98% точности. Важно: всегда сохраняю версию с маской и без неё. Вдруг клиент захочет изменить фон — я просто отключу маску и подставлю другой.» — Алексей Петров, дизайн-директор, 12 лет опыта

Он также использует систему компонентов: вырезанный человек становится компонентом с вариантами поз, цветов и фонов. Это экономит до 40% времени на проектах с множеством вариаций.

Часто задаваемые вопросы

Можно ли вырезать человека с прозрачным фоном (например, стекло или ткань) в Figma?

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

Почему после маски изображение выглядит «плоским»?

Потому что вы потеряли тени и объём. Решение: добавьте внутреннюю тень (Inner Shadow) или лёгкий градиент краёв. Также можно наложить слой с размытием (Blur) на границы, чтобы смягчить переход.

Как сохранить вырезанного человека для повторного использования?

Превратите его в компонент: выделите слои → правой кнопкой → Create Component. Теперь вы можете дублировать его, менять цвет, размер и применять к другим макетам без повторной обработки.

Можно ли анимировать вырезанного человека в Figma?

Да, но только как часть анимации слоёв. Например, вы можете анимировать перемещение, масштаб или прозрачность. Но Figma не поддерживает анимацию формы контура — для этого нужен After Effects или Lottie.

Почему Figma не имеет инструмента «Magic Wand»?

Figma — векторная среда, ориентированная на точность и масштабируемость. Magic Wand — растровый инструмент, который работает с пикселями. Его отсутствие — сознательный выбор, чтобы сохранить качество при масштабировании. Вместо этого — маски и векторные контуры.

Заключение

Вырезать человека в Figma — это не сложнее, чем в Photoshop, если вы знаете правильные инструменты и техники. Ручной метод даёт максимальный контроль, автоматические плагины — скорость, а маски — гибкость. Главное — не спешить: даже если вы используете AI, всегда проверяйте результат на краях, особенно у волос, рук и одежды.

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

Профессиональный дизайн — это не про инструменты, а про процесс. Вырезать человека в Figma — значит не просто убрать фон, а создать визуальный элемент, который будет работать в любом контексте: на экране смартфона, в печатном буклете или в интерактивном прототипе.

Всегда используйте маски вместо удаления фона — это сохраняет редактируемость.
Комбинируйте ручной контур и плагины для максимальной точности и скорости.
Проверяйте края на размытие и пикселизацию — это влияет на восприятие качества.
Превращайте вырезанных людей в компоненты для повторного использования.
Никогда не удаляйте исходное изображение — оно может понадобиться для правок.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.