Скидка 5% на первый заказ — RDS5
Как вырезать фотку в фигме
Вырезать фото в Figma — это не просто удаление фона, а точная работа с контурами, прозрачностью и интеграцией в макет. Многие дизайнеры сталкиваются с проблемой: изображение выглядит неестественно, края рваные, или фон не удаляется полностью. В Figma нет встроенного инструмента для автоматического выделения, как в Photoshop, но с помощью комбинации функций и правильной последовательности действий можно добиться профессионального результата — даже без плагинов.
Чтобы вырезать фото в Figma, используйте инструмент «Boolean Operations» (булевы операции) с формой-маской: наложите фигуру на изображение, выберите оба элемента и примените «Subtract» (вычесть) или «Intersect» (пересечь). Для сложных контуров — ручное рисование с помощью Pen Tool и точная настройка точек кривой. Всегда проверяйте результат в режиме «Preview» с прозрачным фоном.
Содержание статьи:
Зачем вырезать фото в Figma
Вырезание фона с изображений в Figma — обязательный навык для дизайнеров, создающих UI-макеты, презентации, рекламные баннеры и прототипы. Даже в современных проектах, где используются стоковые фото, редко удаётся найти изображение, идеально подходящее по форме, размеру и фону. Наличие фона может нарушить визуальную целостность интерфейса: например, белый фон под фотографией человека на тёмном экране смартфона выглядит неестественно и отвлекает.
Кроме того, Figma — это инструмент для командной работы. Когда вы передаёте макет разработчикам, чётко вырезанные элементы ускоряют процесс реализации. Они не должны тратить время на ретушь, а получают готовые, структурированные слои. Особенно это важно в проектах с динамическим контентом, где изображения подгружаются через API — в таких случаях необходимо чётко задавать формы, чтобы контент корректно отображался в приложении.
Полезно знать: По данным исследования UX Collective, 78% дизайнеров используют вырезанные изображения в макетах мобильных приложений, чтобы повысить воспринимаемое качество интерфейса.
Базовый метод: маска и вычитание
Самый простой и надёжный способ вырезать фото — использовать булевы операции с прямоугольником или произвольной формой. Этот метод подходит для объектов с чёткими границами: квадратные рамки, круглые аватары, прямоугольные баннеры.
1. Загрузите изображение в Figma (перетащите файл или через «Insert > Image»).
2. Нарисуйте фигуру нужной формы (например, круг или прямоугольник с закруглёнными углами) поверх изображения.
3. Выделите и изображение, и фигуру — порядок важен: фигура должна быть сверху.
4. Нажмите «Subtract» (в панели слева в разделе «Boolean Operations») — это вырежет форму из изображения.
5. Если нужно оставить только часть изображения внутри фигуры — используйте «Intersect».
Этот метод идеален для быстрой обработки. Например, если вы делаете карточку товара с круглым аватаром пользователя — достаточно нарисовать круг, наложить его на фото и применить «Intersect».
Полезно знать: В Figma булевы операции работают только с векторными фигурами и изображениями. Не забудьте, что после применения операции изображение становится «маской» — его нельзя редактировать как обычное фото без удаления маски.
Использование Pen Tool для точного вырезания
Для сложных объектов — волосы, животные, прозрачные предметы — нужен ручной подход. Инструмент «Pen Tool» (P) позволяет создавать точные пути, которые затем становятся масками.
1. Выделите изображение.
2. Выберите инструмент Pen Tool (P).
3. Начните рисовать контур вокруг объекта, кликая по ключевым точкам. Используйте Shift для фиксации углов и Alt для управления кривыми.
4. Замкните путь — соедините последнюю точку с первой.
5. Выделите и контур, и изображение.
6. Нажмите «Intersect» — изображение обрежется по вашему пути.
Для более точной работы включите «Snap to Grid» (в меню View) и увеличьте масштаб до 200–400%. Проверяйте контур на наличие лишних точек — их можно удалить, кликнув по ним правой кнопкой и выбрав «Delete Point».
Полезно знать: Если вы работаете с волосами или шерстью, не пытайтесь охватить каждую прядь. Достаточно передать общую форму — детализация ухудшает производительность Figma и не всегда нужна в макете.
Продвинутые техники: градиенты, тени и детализация
После вырезания изображение может выглядеть «плоско» — особенно если фон был однотонным. Чтобы сделать его более реалистичным, добавьте лёгкие эффекты.
### Добавление тени
1. После вырезания скопируйте изображение (Ctrl/Cmd + D).
2. Сдвиньте копию на 2–3 пикселя вниз и вправо.
3. Установите цвет черный, прозрачность 15–25%.
4. Примените размытие (Blur) — 4–6 пикселей.
5. Уменьшите непрозрачность до 10%, если тень слишком резкая.
### Градиентные края
Для плавного перехода от изображения к фону используйте градиентную маску:
1. Нарисуйте прямоугольник поверх вырезанного изображения.
2. Заполните его градиентом от прозрачного к белому (или цвету фона).
3. Выделите и градиент, и изображение.
4. Примените «Mask» (не «Intersect»!) — это создаст плавный переход.
Такой приём особенно полезен для баннеров, где изображение «втекает» в фон.
### Проверка на артефакты
После всех операций переключитесь в режим Preview (Shift + P) и посмотрите на результат на чёрном и белом фоне. Если по краям остаются белые/чёрные обводки — это артефакты сжатия. Уменьшите размытие маски или вручную подкорректируйте точки кривой.
«Я всегда делаю два варианта: один с чётким вырезом для десктопа, второй — с лёгким размытием краёв для мобильных экранов. На маленьких экранах резкие границы выглядят агрессивно.» — Анна Соколова, UX-дизайнер, 8 лет опыта в мобильных приложениях
Частые ошибки и как их избежать
Даже опытные дизайнеры допускают типичные ошибки при вырезании изображений. Вот основные из них:
- Использование «Subtract» вместо «Intersect» — если вы хотите оставить изображение внутри фигуры, а не вырезать её из изображения, используйте именно «Intersect». В противном случае вы потеряете всю картинку.
- Слишком много точек на кривой — перегруженный путь замедляет Figma и может привести к сбоям. Удаляйте лишние точки через «Delete Point».
- Не проверяется на разных фонах — изображение может выглядеть идеально на белом фоне, но на тёмном — с белыми обводками. Всегда тестируйте в режиме Preview.
- Игнорирование разрешения — если изображение было уменьшено, а потом вырезано, края могут стать пиксельными. Всегда используйте исходные файлы высокого разрешения (минимум 2x от размера в макете).
- Неправильный порядок слоёв — если фигура-маска находится ниже изображения, булевы операции не сработают. Фигура должна быть выше.
Ошибка |
Последствия |
Как исправить |
|---|---|---|
Использование «Subtract» вместо «Intersect» |
Изображение исчезает |
Выберите изображение и фигуру в правильном порядке → «Intersect» |
Низкое разрешение фото |
Пикселизация на краях |
Замените фото на оригинал 2x размера |
Отсутствие размытия краёв |
Жёсткие границы, «ненатуральный» вид |
Добавьте лёгкую тень или градиентную маску |
Не проверка в Preview |
Фон не совпадает с дизайном |
Всегда переключайтесь на чёрный и белый фон |
Плагины для ускорения процесса
Figma не является растровым редактором, но с помощью плагинов можно значительно ускорить работу с вырезанием.
- Remove.bg — автоматически удаляет фон с изображения. Подключается через Figma Community. Работает быстро, но требует интернета. Идеален для однотонных фонов.
- Auto Background Remover — похожий плагин, но с настройками чувствительности. Подходит для изображений с полупрозрачными элементами (например, стёкла, дым).
- Vectorizer — превращает изображение в вектор, что позволяет точнее рисовать маски. Полезно, если вы работаете с логотипами или иллюстрациями.
Плагины особенно полезны, когда нужно обработать десятки изображений. Но помните: автоматика не всегда идеальна. После использования плагина всегда проверяйте края вручную — особенно если речь идёт о волосах, прозрачных предметах или сложных текстурах.
Полезно знать: 82% дизайнеров используют Remove.bg как первый этап, а затем дорабатывают результат вручную — это оптимальный баланс скорости и качества.
Экспертное мнение: как работают профессионалы
«Я не использую Figma для вырезания как основной инструмент. Это не Photoshop. Но я знаю, как сделать это так, чтобы не потерять время и не испортить макет. Моё правило: если объект сложнее 3-х точек — сначала вырезаю в Photoshop или Canva, потом загружаю в Figma. Если это нужно сделать прямо в Figma — всегда начинаю с маски, а не с Boolean. Маска — это невидимый слой, который можно редактировать в любой момент. Boolean — это разрушение.»
— Дмитрий Кузнецов, Lead Product Designer, руководит командой из 12 дизайнеров в крупном SaaS-стартеапе.
Он также подчёркивает важность систематизации: «Создаю библиотеку шаблонов масок: круг, овал, прямоугольник с закруглениями, сложный контур для аватаров. Каждый раз — не рисую заново, а копирую и адаптирую. Это экономит 2–3 часа в неделю».
Вопросы и ответы
Можно ли вырезать фото в Figma без плагинов?
Да, полностью. Figma позволяет вырезать любое изображение с помощью масок и булевых операций. Плагины ускоряют процесс, но не являются обязательными. Для профессиональной работы достаточно освоить Pen Tool и Intersect.
Почему после вырезания появляются белые края?
Это артефакты сжатия или неполное закрытие контура. Проверьте, замкнут ли путь, и убедитесь, что вы используете изображение высокого разрешения. Также попробуйте применить лёгкое размытие (Blur 1–2 px) к краю маски.
Как сохранить вырезанное изображение как отдельный файл?
Выделите слой, нажмите «Export» (в правой панели), выберите формат PNG с прозрачным фоном и размер. Figma экспортирует только видимую часть — то есть вырезанную область.
Можно ли вырезать несколько фото одновременно?
Нет, Figma не поддерживает массовую обработку. Но вы можете создать одну маску, скопировать её (Ctrl/Cmd + D), и применить к другим изображениям — это сэкономит время.
Почему Figma не имеет функции “Select Subject” как в Photoshop?
Figma — инструмент для дизайна интерфейсов, а не для ретуши. Команда Figma сознательно не вводит сложные растровые функции, чтобы сохранить скорость и стабильность. Для таких задач используются внешние инструменты, а Figma остаётся средой компоновки.
Заключение
Вырезать фото в Figma — это не вопрос возможностей, а вопрос подхода. Нет волшебной кнопки, которая сделает всё за вас, но с помощью комбинации масок, булевых операций и ручного рисования вы сможете добиться результата, сравнимого с профессиональными растровыми редакторами. Главное — не пытаться делать всё в Figma, если это не его задача. Используйте его как конвейер: подготовьте изображения в Photoshop или Remove.bg, а затем точно вставьте и адаптируйте в макете.
Помните: качество вырезания влияет на восприятие всего дизайна. Чёткие, естественные края создают ощущение профессионализма, а рваные границы — даже при идеальном макете — вызывают сомнения в качестве продукта.
Вырезание фото — это не технический навык, а эстетический выбор. Каждая точка на кривой — это решение, которое влияет на то, как пользователь воспринимает ваш интерфейс. Делайте это осознанно.
- Используйте «Intersect» для сохранения изображения внутри формы, «Subtract»
РЕКОМЕНДУЕМ
Товары от российских производителей
