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

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

Figma — мощный инструмент для векторного дизайна, широко используемый в создании интерфейсов, прототипов и графики. Одной из ключевых задач при работе с фигурами является их обрезка — необходимость изменить форму объекта, оставив видимой только определённую его часть. Эта операция может потребоваться при создании сложных композиций, иконок, аватарок, кадрировании изображений или имитации эффектов обрезки под угол. Однако новички часто сталкиваются с путаницей: где кнопка «обрезать»? Почему после маскирования нельзя редактировать контур как обычную фигуру? В этой статье мы детально разберём все способы обрезки фигур в Figma, покажем пошаговые инструкции, типичные ошибки и профессиональные лайфхаки.

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

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

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

После применения маски нижний объект становится «обрезанным» — он виден только в области перекрытия с верхним. При этом сам объект не удаляется, а лишь скрывается за пределами маски.

Если вы хотите изменить форму маски, просто выберите её и отредактируйте — например, потяните углы или измените радиус скругления. Содержимое автоматически адаптируется. Чтобы отменить маскирование, выделите группу и нажмите Ctrl+Shift+M (или Cmd+Shift+M).

Когда использовать маски?

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

Булевы операции: альтернатива маскам

Если вам нужно не просто скрыть часть фигуры, а изменить её форму навсегда, на помощь приходят булевы операции. Figma поддерживает четыре типа логических операций: Объединить, Вычесть, Пересечение и Исключение. Для обрезки чаще всего используется операция Вычесть.
Чтобы обрезать фигуру через вычитание:

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

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

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

• Порядок выделения важен: первым должен идти объект-основа, вторым — тот, который вычитает.
• Операции можно отменить (Ctrl+Z), но лучше дублировать слои перед изменением.
• Булевы операции работают с любыми векторными объектами, включая текст (после преобразования в кривые).

Ручное редактирование векторных точек

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

1. Выберите фигуру и нажмите Ctrl+Enter (или щёлкните правой кнопкой → «Edit Object»).
2. Используйте инструмент Pen или Node Tool (в панели слева).
3. Добавьте новые точки на контур там, где нужно «вырезать».
4. Выделите лишние сегменты и удалите их (Delete).
5. Соедините оставшиеся точки, чтобы замкнуть контур.

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

Советы по редактированию узлов

• Включите привязку к сетке (View → Snap to Grid) для точности.
• Используйте Alt для временного отключения привязки при необходимости.
• Для плавных кривых редактируйте направляющие ручки (Bézier handles).
• Комбинируйте ручное редактирование с булевыми операциями для сложных форм.

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

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

Как проверить корректность маски

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

Продвинутые техники и практические примеры

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

• Создайте круг (Ellipse Tool, U).
• Поместите изображение поверх.
• Выделите оба → Ctrl+Alt+M.
• Добавьте второй круг чуть больше — это будет рамка.
• Используйте булеву операцию «Вычесть», чтобы вырезать середину и получить кольцо.

Пример 2: Обрезка текста под форму

• Напишите текст.
• Создайте фигуру (например, сердце).
• Поместите фигуру над текстом.
• Выделите оба → Ctrl+Alt+M.
• Готово: текст виден только внутри формы.

Пример 3: Создание «дыры» в фигуре

• Нарисуйте большой прямоугольник.
• Поверх — маленький квадрат в том месте, где должна быть дыра.
• Выделите оба → выберите «Исключение» (XOR) или «Вычесть».
• Получится фигура с прозрачным отверстием.

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

Профессиональные дизайнеры подчёркивают, что выбор метода обрезки зависит от контекста проекта. Маски — лучший выбор для прототипирования и динамических компонентов. Булевы операции незаменимы при создании иконок и логотипов. Ручное редактирование узлов — для уникальных форм, которые нельзя достичь другими способами.
Важно понимать, что Figma — не Photoshop. Здесь нет инструмента «Ластик» для векторов. Всё основано на логике наложения, масок и векторной алгебре. Чем раньше вы освоите эти принципы, тем быстрее будете работать.
Также эксперты рекомендуют использовать компоненты с масками. Например, создать компонент «Аватар», где изображение — это заполнитель, а форма — маска. Тогда при использовании экземпляра достаточно заменить изображение — форма останется прежней.

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

Заключение

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

• Для визуальной обрезки используйте маски (Ctrl+Alt+M).
• Для постоянного изменения формы применяйте булевы операции, особенно «Вычесть».
• Редактирование узлов даёт максимальную свободу, но требует внимательности.
• Избегайте типичных ошибок: проверяйте порядок слоёв и вложенность.
• Сохраняйте копии объектов перед радикальными изменениями.