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

Вырезать по фигуре в Figma можно с помощью функции «Обтравочная маска» (Clipping Mask) или операции «Вычесть» в булевых операциях. Основной и наиболее гибкий способ — использовать маскирование: поместите изображение или слой внутрь фигуры, затем примените опцию «Create Mask». Это позволяет точно обрезать контент по контуру любой формы.

Figma — один из самых популярных инструментов для векторного дизайна и прототипирования интерфейсов. Его гибкость и облачная природа позволяют командам работать совместно в реальном времени. Одной из частых задач при создании макетов является необходимость обрезать изображение, текст или другой элемент по заданному контуру. Такая операция может понадобиться при оформлении аватарок, баннеров, креативных кнопок или сложных композиций. Несмотря на кажущуюся простоту, у новичков часто возникают вопросы: как правильно вырезать по фигуре, не потеряв качество и возможность дальнейшего редактирования? Ответ — в правильном использовании встроенных функций Figma, таких как обтравочные маски и булевы операции.

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

Маскирование в Figma: основной способ вырезать по фигуре

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

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

1. Добавьте на холст фигуру (например, круг или прямоугольник с закруглёнными углами).
2. Импортируйте изображение или добавьте текст выше этой фигуры.
3. Выделите оба элемента (фигуру и контент), щёлкнув по ним с зажатой клавишей Shift.
4. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac), либо выберите в верхней панели инструментов значок «Create Mask».

После этого контент будет виден только внутри границ фигуры. Вы можете свободно перемещать, масштабировать или редактировать как саму маску, так и содержимое внутри неё.

Преимущества маскирования

• Не разрушает исходный слой — можно легко изменить положение изображения или форму маски.
• Поддерживает анимацию и прототипирование: маскированные объекты корректно работают в интерактивных прототипах.
• Совместимо с эффектами, такими как тень, обводка и размытие.

Как редактировать маску после применения

После создания маски вы можете дважды щёлкнуть по ней, чтобы войти внутрь. В этом режиме вы видите только содержимое маски и можете перемещать его, изменять размер или заменять изображение. Чтобы выйти, нажмите Esc или кликните за пределами маски.

Также можно изменить форму маски: например, превратить круг в овал, отредактировав её узлы. Главное — не менять порядок слоёв: маска всегда должна быть сверху.

Булевы операции: когда нужна точная форма

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

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

Пошаговый алгоритм вычитания по фигуре

1. Создайте две фигуры: одну, которую хотите оставить (например, фон), и другую — ту, по которой будет происходить вырезание (например, буква или иконка).
2. Разместите вырезаемую фигуру поверх первой.
3. Выделите обе фигуры.
4. В верхней панели выберите операцию «Вычесть» (Subtract).

Результат — первая фигура с «дыркой» в форме второй. Это особенно полезно при создании логотипов, декоративных элементов или иконок с прозрачностью.

Когда использовать булевы операции

• Создание сложных векторных форм (например, букв с вырезами).
• Проектирование иконок, где важна чёткая геометрия.
• Генерация SVG-путей для разработчиков.

Распространённые ошибки и как их избежать

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

Ошибка: команда маскирования неактивна

Если кнопка «Create Mask» серая, значит, условия для маскирования не выполнены. Проверьте:

• Выделены ли минимум два слоя.
• Находится ли фигура-маска выше других слоёв.
• Не является ли один из слоёв уже маской или экземпляром компонента.

Решение: перестройте иерархию — перетащите фигуру вверх в панели слоёв.

Ошибка: изображение исчезло после маскирования

Это происходит, если изображение слишком маленькое или находится вне границ маски. На самом деле оно никуда не делось — просто невидимо.

Как исправить:

1. Дважды щёлкните по маске, чтобы войти внутрь.
2. Переместите изображение так, чтобы оно пересекало область маски.
3. Масштабируйте изображение, если нужно.

Ошибка: булева операция не работает с текстом

Figma не применяет булевы операции к текстовым слоям напрямую. Сначала нужно преобразовать текст в вектор.

Решение:

1. Выделите текст.
2. Нажмите Ctrl+Shift+O (или Cmd+Shift+O на Mac), чтобы перевести в контуры.
3. Теперь можно использовать операции «Вычесть», «Объединить» и другие.

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

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

Создание аватарки пользователя

Часто в интерфейсах профиля требуется круглая аватарка. Вот как сделать это быстро:

• Нарисуйте круг диаметром 100px.
• Добавьте изображение пользователя размером 120x120px.
• Разместите изображение над кругом.
• Выделите оба слоя и нажмите Ctrl+Alt+M.

Теперь аватарка круглая, но вы можете легко заменить фото или изменить размер маски.

Дизайн баннера с фигурным обрезом

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

• Импортируйте векторный контур волны или нарисуйте его инструментом Pen.
• Поместите его поверх изображения.
• Примените маскирование.

Теперь изображение будет видно только в форме волны — эффектно и профессионально.

Логотип с вырезанными буквами

Допустим, вы проектируете логотип, где буква «O» вырезана из прямоугольника. Используйте булевы операции:

• Создайте прямоугольник.
• Добавьте круг в центре (будущее отверстие).
• Выделите оба объекта, начиная с прямоугольника.
• Выберите «Вычесть».

Результат — чистый векторный логотип, готовый к экспорту.

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

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

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

Заключение

Умение вырезать по фигуре в Figma — базовый, но крайне важный навык для любого дизайнера. Оно открывает возможности для создания сложных визуальных композиций, улучшает качество макетов и делает работу эффективнее. Главное — понимать разницу между маскированием и булевыми операциями и выбирать подходящий инструмент под задачу.

• Для большинства задач используйте маскирование (Ctrl+Alt+M).
• Булевы операции применяйте для векторных форм и логотипов.
• Всегда проверяйте порядок слоёв перед созданием маски.
• Сохраняйте оригиналы контента перед преобразованием в контуры.
• Тестируйте маскированные элементы в прототипах и при экспорте.