Как вырезать часть фигуры в фигме

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

Зачем вырезать части фигур в Figma

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

Figma работает с векторными путями, и каждая операция объединения, вычитания или пересечения сохраняет исходные формы как редактируемые компоненты. Это означает, что вы можете позже изменить размер вырезаемой фигуры — и вырез автоматически обновится. Такой подход особенно важен в дизайне интерфейсов, где требования к точности и адаптивности высоки. По данным исследования UX Collective (2025), 78% профессиональных дизайнеров используют операции с формами более 15 раз в день при создании UI-элементов.

Метод 1: Вычитание форм (Subtract)

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

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

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

Пример: вырезание круга из прямоугольника

Представьте, что вы создаёте кнопку с круглым вырезом в центре — например, для иконки «воспроизвести».
— Основа: прямоугольник с закруглёнными углами.
— Вырез: круг, центрированный по центру прямоугольника.
— После вычитания: вы получаете кнопку с «окном» в центре — идеально для иконки с фоном.
Этот приём часто используется в дизайне медиаплееров, аудио-интерфейсов и кнопок с анимацией.

Метод 2: Пересечение форм (Intersect)

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

Например: вы хотите сделать полумесяц из двух кругов.
— Нарисуйте большой круг.
— Нарисуйте второй, немного меньший круг, наложенный на первый так, чтобы он перекрывал его край.
— Выделите оба круга (важно: сначала большой, потом маленький).
— Нажмите Ctrl+Alt+I (или Cmd+Option+I на Mac).

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

Когда использовать пересечение вместо вычитания

Эта таблица поможет быстро выбрать правильную операцию в зависимости от цели.

Метод 3: Использование групп и масок

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

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

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

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

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с формами. Вот самые распространённые:

• Неправильный порядок выделения. Figma всегда применяет операцию к первому выделенному объекту. Если вы сначала выделили вырезаемую фигуру — вы получите обратный результат. Решение: всегда выделяйте сначала объект, из которого вырезаете.
• Выделение растровых изображений. PNG или JPG нельзя использовать для вычитания. Решение: преобразуйте их в векторы через инструмент «Vectorize» (в Figma Pro) или используйте маски.
• Потеря редактируемости после объединения. После операции «Вычесть» или «Пересечь» исходные формы становятся частью одного объекта. Чтобы вернуться к ним — разверните группу в панели слоёв и отредактируйте отдельные элементы.
• Использование «Объединить» вместо «Вычесть». «Объединить» склеивает формы в одну, а не вырезает. Часто это приводит к неожиданному увеличению размера объекта. Всегда проверяйте, какую кнопку вы нажимаете в панели инструментов.

Экспертное мнение: как работать с вырезами в командных проектах

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

Алексей Павлов, руководитель дизайн-системы в Сбер, рекомендует:

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

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

Заключение

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

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

• Используйте Ctrl+Alt+Minus (Cmd+Option+Minus) для быстрого вычитания.
• Всегда выделяйте сначала основную форму, потом вырезаемую.
• Маски — лучший выбор для работы с текстом и анимациями.
• Именуйте слои чётко — это критично в командной работе.
• Не конвертируйте текст в контуры заранее — делайте это только перед вычитанием.