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

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

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

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

Маскирование — это основной способ визуальной «обрезки» одной фигуры по контуру другой в Figma. Маска скрывает всё, что выходит за пределы заданной области, не удаляя содержимое. Это идеально подходит для дизайна аватарок, баннеров, кадрирования изображений или создания нестандартных форм.
Для создания маски необходимо, чтобы верхний элемент (например, круг) служил маской, а нижний (например, прямоугольник или изображение) — содержимым. Чтобы активировать маску, выделите оба элемента, убедитесь, что маска сверху, и нажмите Ctrl+Alt+M (или Cmd+Option+M на Mac). Также можно щёлкнуть правой кнопкой и выбрать «Create Mask».
После применения маски содержимое будет видно только внутри границ маскирующей фигуры. При этом сама маска становится невидимой, а содержимое автоматически обрезается. Важно понимать, что маска — это не изменение формы, а визуальный эффект. Вы можете в любой момент отключить маску (Ctrl+Shift+M), и исходное содержимое восстановится.

• Маски поддерживают любые фигуры: прямоугольники, круги, многоугольники, кривые Безье.
• Можно использовать группу фигур в качестве маски, если они объединены в один объект.
• Маски работают не только с фигурами, но и с текстом, изображениями, векторными объектами.

Пошаговый алгоритм создания маски

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

Булевы операции: вычитание и обрезка контуров

Если вам нужно не просто скрыть часть фигуры, а изменить её реальную форму, применяйте булевы операции. Этот метод подходит, когда вы хотите «вырезать» один контур из другого, создавая новую векторную форму. В отличие от маски, булевы операции изменяют геометрию объекта навсегда (хотя отменить действие можно через историю).
Figma поддерживает четыре типа булевых операций:

• Объединить (Union) — соединяет фигуры в одну.
• Вычесть (Subtract) — вырезает верхнюю фигуру из нижней.
• Пересечение (Intersect) — оставляет только общую область.
• Исключение (Exclude) — удаляет пересекающиеся части.

Для обрезки фигуры наиболее полезна операция «Вычесть». Например, чтобы сделать отверстие в прямоугольнике, нарисуйте круг сверху и примените «Subtract». Результат — прямоугольник с вырезанным кругом.

Пример: создание рамки с вырезом

Представьте, что вы проектируете экран смартфона с вырезом под камеру. Нарисуйте прямоугольник (экран), затем поверх него — маленький овал (вырез). Выделите оба объекта, убедитесь, что овал выше, и нажмите иконку «Subtract» в верхней панели или используйте сочетание Ctrl+- (Cmd+- на Mac).

Ограничения булевых операций

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

Обрезка через фрейм с включённой маской

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

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

Когда использовать фрейм-маску

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

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

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

Ошибка 1: Маска не применяется

Самая частая причина — неправильный порядок слоёв. Маска должна быть выше по стеку, чем содержимое. Если вы выделили два объекта, но команда «Create Mask» неактивна, значит, маска находится ниже или объекты несовместимы (например, текст и фигура без преобразования в кривые).

Ошибка 2: Потеря формы после булевой операции

После применения «Subtract» или «Union» исходные фигуры перестают существовать как отдельные объекты. Чтобы сохранить возможность редактирования, дублируйте слои перед операцией (Ctrl+D) или используйте маски, если цель — визуальная, а не структурная обрезка.

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

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

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

Выбор метода обрезки зависит от контекста задачи. Если вы создаёте прототип, где важна скорость и гибкость, используйте маскирование через фрейм — это самый быстрый и безопасный способ. Для финальных иконок, логотипов или сложных векторных иллюстраций предпочтительны булевы операции, так как они дают контроль над каждым сегментом пути.
При работе с масками помните: они не увеличивают нагрузку на производительность, так как не создают новых путей. Булевы операции, напротив, могут усложнять файл, особенно при множественных объединениях. Оптимизируйте сложные векторы, удаляя лишние точки через «Simplify Path».
Для командной работы рекомендуется документировать, где используются маски, а где — булевы операции. Это помогает избежать путаницы при редактировании макетов другими дизайнерами. Используйте имена слоёв: например, «[MASK] Avatar» или «[VECTOR] Logo Cut».

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

Заключение

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

• Для визуальной обрезки используйте маски — они не меняют геометрию и легко редактируются.
• Для изменения формы применяйте булевы операции, особенно «Subtract».
• Фреймы с clipping’ом — лучший выбор для композиций и прототипов.
• Проверяйте порядок слоёв: маска должна быть выше содержимого.
• Сохраняйте копии перед irreversible действиями, такими как Union или Subtract.