Как обрезать фигуру в фигме другой фигурой

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

Figma — один из самых популярных инструментов для UI/UX-дизайна, сочетающий в себе гибкость векторного редактора и удобство командной работы. Одной из ключевых задач при создании интерфейсов является точное управление формами и контентом. Часто дизайнерам нужно, чтобы изображение или текст отображались только внутри определённой геометрической формы — например, круглый аватар, карточка с закруглёнными углами или нестандартная рамка. Для этого используется метод обрезки одной фигуры с помощью другой.

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

Маскирование как основной метод

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

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

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

Кроме того, маскирование работает с группами. Это означает, что вы можете объединить несколько фигур в одну группу, а затем использовать её как маску. Такой подход полезен при создании сложных форм, например, многоугольных рамок или декоративных элементов.

Какие объекты могут быть масками?

• Простые фигуры: прямоугольники, эллипсы, звёзды, многоугольники.
• Векторные пути, созданные с помощью Pen Tool.
• Текстовые блоки — текст может служить маской для изображения.
• Группы объектов — при условии, что они не содержат вложенных масок.
• Изображения — но только если они используются как маска для другого содержимого.

Пошаговая инструкция обрезки

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

1. Создайте две фигуры: ту, которую хотите обрезать (например, изображение), и ту, которая будет служить маской (например, круг).
2. Убедитесь, что маска находится выше по слоям. Используйте Ctrl+] (Cmd+] на Mac), чтобы поднять её над содержимым.
3. Выделите оба объекта одновременно — щелкните по ним с зажатой клавишей Shift или выделите рамкой.
4. Нажмите сочетание клавиш Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).
5. Результат: содержимое будет видно только внутри формы маски.

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

• Перемещать маску и содержимое вместе.
• Отдельно редактировать форму маски (например, изменить радиус углов).
• Заменить содержимое — просто удалите старое и вставьте новое.
• Отключить маску, чтобы временно увидеть весь объект.

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

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

• Верхний — маска (может быть скрыта, но она всё ещё существует).
• Нижний — содержимое (изображение, фигура, текст).

Чтобы изменить форму маски:

1. Выберите маску (верхний слой).
2. Используйте Selection Tool или Vector Tool для изменения её формы.
3. Маска автоматически обновит видимую область содержимого.

Ошибки и как их избежать

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

Распространённые ошибки

• Неправильный порядок слоёв: маска должна быть выше. Если вы выделили два объекта, но команда маскирования неактивна — проверьте, какой из них сверху.
• Попытка маскировать группу с масками: Figma не позволяет вкладывать маски внутрь других масок. Сначала разгруппируйте или упростите структуру.
• Использование эффектов на маске: тени, размытие и другие эффекты на маске не влияют на результат. Они могут визуально мешать, но не работают как часть маски.
• Забыть про масштабирование: при масштабировании группы с маской содержимое может «выползать» за границы. Убедитесь, что содержимое достаточно велико.

Как исправить ошибку маскирования

Если маска применяется некорректно:

1. Щёлкните правой кнопкой по группе.
2. Выберите «Release mask» (Разгруппировать маску).
3. Переупорядочьте слои и повторите операцию.

Также можно использовать панель слоёв: перетащите маску выше содержимого в списке, прежде чем применять команду.

Дополнительные техники обрезки

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

Использование Boolean Operations

Булевы операции — это способ комбинирования фигур путём сложения, вычитания, пересечения и исключения. Хотя они не являются масками, они позволяют создавать сложные формы, которые можно использовать как шаблоны.

Например:

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

Маскирование с прозрачностью

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

Для этого:

1. Создайте фигуру с градиентной заливкой прозрачности.
2. Используйте её как маску.
3. Результат — мягкое затухание содержимого по краям.

Использование компонентов с масками

Если вы создаёте дизайн-систему, можно сделать компонент с маской. Например, кнопка с иконкой внутри круглой области. При этом иконку можно заменять через instance, сохраняя маску.

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

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

1. Круглые аватары

Часто в интерфейсах нужны круглые изображения пользователей. Решение:

1. Добавьте изображение.
2. Нарисуйте поверх эллипс нужного размера.
3. Поднимите эллипс выше.
4. Примените маску (Ctrl+Alt+M).

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

2. Карточки с закруглёнными углами и фоновым изображением

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

1. Создайте прямоугольник с закруглёнными углами — это будет маска.
2. Поместите изображение ниже.
3. Примените маску.

Теперь фон подстраивается под форму карточки. Можно добавить затемнение или градиент поверх.

3. Необычные формы для прототипов

Для креативных проектов можно использовать многоугольные или кастомные маски. Например, маска в виде сердца или стрелки. Просто нарисуйте форму, используя Pen Tool, и примените её как маску.

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

Елена отмечает, что маски особенно полезны при создании микровзаимодействий. Например, можно смоделировать прогресс-бар, где заполнение имитируется перемещением маски по изображению. Или создать эффект “раскрытия” контента через анимацию маски.

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

Заключение

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

• Используйте Ctrl+Alt+M (Cmd+Option+M) для быстрого применения маски.
• Маска всегда должна быть выше по слоям.
• Маски редактируемы и не разрушают исходные объекты.
• Поддерживаются сложные формы, текст и градиенты прозрачности.
• Интегрируйте маски в компоненты для переиспользования.