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

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

Figma — один из самых популярных инструментов для веб- и UI-дизайна, объединяющий проектирование, прототипирование и коллаборацию в одном интерфейсе. Одной из частых задач при работе с макетами является необходимость обрезки изображений под нестандартные формы: круглые аватарки, фигурные баннеры, стилизованные иконки и другие графические элементы. Хотя Figma не предлагает прямого аналога Photoshop’s Pen Tool с функцией «выделения по контуру», он предоставляет мощные альтернативы — векторные маски и булевы операции. Владение этими методами позволяет дизайнерам быстро и точно адаптировать изображения под любые формы, сохраняя редактируемость и качество.

Основы векторных масок в Figma

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

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

Маскирование работает как с растровыми изображениями, так и с векторными объектами. Это делает Figma универсальным инструментом для работы с графикой без необходимости экспорта в специализированные редакторы. Кроме того, маски полностью редактируемы: вы можете изменить форму, переместить её или заменить изображение, и маска останется активной.

Как активировать маску

Чтобы применить маску, выполните следующие действия:

• Выберите изображение и создайте вокруг него фрейм (Ctrl+Alt+G / Cmd+Option+G).
• Добавьте поверх изображения фигуру или векторный путь — это будет контур маски.
• Выделите одновременно изображение и фигуру (удерживая Shift), щелкните правой кнопкой мыши и выберите «Use as Mask» («Использовать как маску»).
• Фигура станет маской, а изображение — содержимым под ней.

Пошаговое вырезание изображения по контуру

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

1. Подготовьте изображение. Загрузите изображение в Figma через перетаскивание или команду File → Place Image. Убедитесь, что оно имеет достаточное разрешение для вашего проекта.
2. Создайте фрейм. Выделите изображение и сгруппируйте его в фрейм (Ctrl+Alt+G). Это необходимо для корректной работы маски.
3. Нарисуйте контур. Используйте инструменты Rectangle, Ellipse или Pen, чтобы нарисовать нужную форму поверх изображения. Для сложных форм применяйте кривые Безье.
4. Примените маску. Выделите изображение и контур (в указанном порядке), щелкните ПКМ → «Use as Mask». Изображение будет обрезано по контуру.
5. Отредактируйте при необходимости. Дважды щелкните по маске, чтобы войти внутрь фрейма и скорректировать положение изображения или форму маски.

Пример: вырезание лица по контуру

Допустим, вам нужно вырезать лицо человека из фотографии. Алгоритм:

• Загрузите фото в Figma и поместите в фрейм.
• Активируйте инструмент Pen (P) и начните рисовать контур по краю лица, кликая по ключевым точкам.
• Замкните путь, щелкнув по первой точке.
• Выделите путь и изображение, примените «Use as Mask».
• Уточните контур, редактируя узлы при помощи Node Tool (A).

Работа с продвинутыми инструментами: Pen, Boolean, Image Mask

Для профессионального дизайна важно не просто вырезать изображение, а делать это точно, быстро и с возможностью последующего редактирования. Figma предлагает три ключевых инструмента: Pen Tool, Boolean Operations и Image Masks.

Pen Tool: точность в каждой линии

Pen Tool — основной инструмент для ручного вырезания. Он позволяет создавать сложные контуры с высокой детализацией. Работать с ним нужно аккуратно:

• Кликайте по краю объекта, чтобы установить точки.
• Для плавных изгибов (например, волосы или одежда) зажмите Shift при перетаскивании ручек Безье.
• Для угловых точек дважды щелкните по узлу — это разорвет касательные.

Булевы операции для составных масок

Если форма состоит из нескольких элементов (например, сердце из двух кругов и треугольника), используйте булевы операции:

• Нарисуйте все компоненты отдельно.
• Выделите их и примените Union (объединение) или Subtract (вычитание).
• Полученную фигуру используйте как маску.

Типичные ошибки и как их избежать

Даже опытные пользователи Figma допускают ошибки при работе с масками. Ниже — самые распространённые проблемы и способы их решения.

• Маска не применяется. Часто это происходит, если объекты не находятся в одном фрейме. Всегда группируйте изображение и маску в фрейм перед применением.
• Изображение исчезло полностью. Проверьте порядок слоёв: маска должна быть выше изображения. Также убедитесь, что маска не слишком мала или не находится вне границ изображения.
• Контур неправильной формы. Используйте Zoom (Z) для увеличения до 400–800%, чтобы точно выставлять узлы. Включите сетку (Ctrl+’ ) для дополнительной точности.
• Нет доступа к редактированию маски. Чтобы изменить маску, дважды щелкните по фрейму с маской — вы перейдете внутрь и сможете редактировать как изображение, так и контур.

Практические примеры использования

Вырезание по контуру применяется во множестве сценариев. Рассмотрим три типовых кейса.

1. Аватарки сотрудников

Внутренний портал компании требует круглые аватарки. Решение:

• Добавьте изображение в фрейм 100×100 px.
• Нарисуйте круг того же размера.
• Примените маску. Все фото будут единообразными.

2. Фигурные баннеры

Лендинг с нестандартным баннером в форме облака. Создание:

• Нарисуйте облако с помощью Pen Tool или импортируйте SVG.
• Поместите фоновое изображение под форму.
• Создайте маску — получится стильный эффект «вырезанного» баннера.

3. Продуктовые карточки с прозрачными фоами

Товары на белом фоне выглядят плоско. Решение — вырезать продукт и разместить на цветном фоне.

• Используйте Pen Tool для точного контура продукта.
• Примените маску, добавьте тень и эффект «плавающего» объекта.
• Результат — визуально привлекательная карточка.

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

Современные сервисы вроде remove.bg или Adobe Express позволяют автоматически удалять фон за несколько секунд. Это экономит время, особенно при работе с большим количеством изображений. Однако для брендированной графики, где важна точная форма, ручное вырезание в Figma остаётся лучшим выбором.

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

Заключение

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

• Всегда работайте в фрейме при создании масок.
• Используйте Pen Tool для сложных контуров и булевы операции для составных форм.
• Не забывайте, что маски редактируемы — их можно менять даже после применения.
• Для массовой обработки комбинируйте маски с компонентами.
• Для сложной ретуши используйте внешние инструменты, а результат импортируйте в Figma.