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

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

Что такое обрезка фигур и зачем она нужна

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

Инструменты для обрезки фигур в Figma

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

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

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

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

1. Нарисуйте две фигуры: нижнюю — которую вы хотите обрезать (например, прямоугольник), и верхнюю — которая будет «вырезать» (например, круг).
2. Убедитесь, что верхняя фигура перекрывает ту часть, которую нужно удалить. Порядок слоёв критичен: вычитаемая фигура должна быть выше.
3. Выделите обе фигуры одновременно (удерживайте Shift или Shift+Cmd/Ctrl).
4. На верхней панели найдите иконку «Vector operations» — это символ пересекающихся квадратов.
5. Нажмите на выпадающее меню и выберите «Subtract» (Вычесть).
6. Результат появится мгновенно: нижняя фигура будет обрезана по форме верхней.

После выполнения операции Figma объединяет объекты в один векторный путь. Теперь вы можете редактировать точки этого пути с помощью инструмента «Pen» или «Direct Select» (белая стрелка). Однако важно понимать: после объединения вы больше не сможете отдельно изменять исходные фигуры, если не отмените действие (Cmd/Ctrl + Z).
Если вам нужно восстановить исходные фигуры, но вы уже закрыли файл, шансов мало. Поэтому опытные дизайнеры рекомендуют дублировать слои перед выполнением булевых операций. Простое копирование (Cmd/Ctrl + D) может спасти проект от необходимости начинать с нуля.

Советы по точности при обрезке

• Используйте привязку к сетке (View → Show Grid) и включите «Snap to Grid», чтобы фигуры точно совмещались.
• Для симметричных вырезов применяйте центрирование: выделите оба объекта и используйте кнопки Align по горизонтали и вертикали.
• Если нужно вырезать несколько одинаковых элементов (например, ряд отверстий), создайте один вырез, затем продублируйте его и объедините все вычитаемые фигуры в одну группу перед операцией.

Маскирование как гибкая альтернатива

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

1. Поместите изображение или фигуру, которую нужно замаскировать.
2. Нарисуйте поверх неё фигуру той формы, в которой вы хотите показать содержимое (например, круг или звезду).
3. Выделите оба объекта: сначала маску, затем содержимое (порядок важен).
4. Нажмите Cmd/Ctrl + Alt + M или выберите в правой панели «Use as mask».

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

Когда маскирование лучше булевых операций?

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

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

Даже опытные пользователи Figma иногда сталкиваются с неожиданными результатами при обрезке. Многие из них связаны с непониманием логики работы векторных операций или невнимательностью к структуре слоёв.
Одна из самых частых ошибок — неправильный порядок слоёв. При операции «Вычесть» верхний объект вычитается из нижнего. Если вы случайно поменяете их местами, результат будет противоположным. Чтобы избежать этого, всегда проверяйте панель «Layers» перед выполнением операции.
Ещё одна проблема — попытка применить булевы операции к объектам разного типа. Например, нельзя вычесть группу из фигуры, пока группа не будет объединена в единый вектор. То же касается текста: он должен быть преобразован в кривую (Create Outlines) через контекстное меню.

Типичные сценарии сбоев

• Ничего не происходит при выборе «Subtract». Причина: объекты не являются векторными или находятся в разных группах. Решение — преобразуйте в вектор и объедините в одну группу.
• Фигура исчезает полностью. Вероятно, маска или вычитаемая фигура больше исходной. Проверьте размеры и положение.
• Появились артефакты или «дыры». Это может быть следствием наложения нескольких операций. Лучше начать с чистого листа и переопределить шаги.

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

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

Современные тренды, такие как neumorphism или glassmorphism, требуют тонкого контроля над формами и прозрачностью. Здесь особенно важны маски и составные фигуры. Эксперты рекомендуют сочетать оба метода: использовать булевы операции для базовой структуры и маскирование — для деталей.
Также отмечается рост использования автоматизации. Плагины вроде «Boolean Operations» или «Masking Tools» ускоряют рутинные действия. Однако основа остаётся прежней — понимание принципов векторной графики.

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

Заключение

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

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