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

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

Булевы операции: вычитание, объединение и другие

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

Для выполнения булевой операции:

1. Нарисуйте две фигуры так, чтобы они перекрывали друг друга.
2. Выделите обе фигуры (удерживайте Shift при клике).
3. На верхней панели инструментов выберите один из четырёх типов операций: Объединить, Вычесть, Пересечение, Исключение.
4. Операция применяется немедленно, создавая новую составную фигуру.

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

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

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

Figma поддерживает горячие клавиши для ускорения работы:

• Ctrl + Alt + Union (Windows) / Cmd + Option + U (Mac) — объединить;
• Ctrl + Alt + Subtract — вычесть;
• Ctrl + Alt + Intersect — пересечение;
• Ctrl + Alt + Exclude — исключение.

Если вы работаете с большим количеством фигур, использование сочетаний клавиш экономит до 30% времени по сравнению с ручным выбором на панели.

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

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

Чтобы создать маску:

1. Поместите фигуру, которую хотите обрезать (например, изображение), под верхнюю фигуру (будущую маску).
2. Выделите оба объекта.
3. Щёлкните правой кнопкой мыши и выберите «Use as Mask» (или используйте Ctrl+Alt+M).

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

Особенно удобно использовать маски для:

• Обтекания текста вокруг фигур;
• Создания аватарок с круглыми рамками;
• Анимационных прототипов, где объект «выезжает» из-под маски.

Типы масок: векторные и растровые

Figma поддерживает два типа масок:

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

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

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

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

Для начала:

1. Выберите фигуру и нажмите «Detach from component» (если это компонент).
2. Кликните по фигуре инструментом «Edit Object» (ручка на панели слева или клавиша A).

Теперь вы можете:

• Добавлять новые точки, кликая по контуру.
• Удалять точки — выделите и нажмите Delete.
• Тянуть ручки для изменения кривых Безье.
• Менять тип точки: угол, сглаженный, симметричный.

Чтобы «обрезать» фигуру вручную:

1. Добавьте две новые точки на границе будущего среза.
2. Выделите все точки между ними и удалите.
3. Соедините оставшиеся точки новым сегментом (Figma сделает это автоматически).

Этот метод особенно полезен при создании кастомных иконок, логотипов или адаптации шрифтов. Однако он не подходит для быстрой обрезки — это скорее тонкая настройка.

Конвертация в векторный путь

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

1. Выделите объект.
2. Правый клик → «Convert to Vector».

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

Продвинутые методы: плагины и хаки

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

Популярные плагины:

• Vectorizer — преобразует растровые изображения в векторные пути, которые можно обрезать.
• BoolTool — расширенный интерфейс для булевых операций с поддержкой нескольких фигур и историей действий.
• Crop Tool — имитирует классическое обрезание, позволяя «обвести» нужную область и вырезать её.

Например, с помощью BoolTool можно:

• Применять операции к трём и более фигурам одновременно.
• Отменять последнее действие внутри группы булевых операций.
• Автоматически выравнивать объекты перед вычитанием.

Также существуют «хаки», которые дизайнеры используют для обрезки:

• Метод наложения с Opacity Mask: используя прозрачность и маски, можно создать эффект частичного исчезновения.
• Frame + Mask: поместите объект во Frame, установите свойство «Clip content», затем добавьте маску сверху.
• Export с обрезкой: при экспорте выберите опцию «Selection» — Figma вырежет только выделенную область.

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

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

• Неправильный порядок слоёв: при булевых операциях важно, какая фигура находится сверху. Нижняя — базовая, верхняя — вырезающая. Проверяйте порядок в панели слоёв (Layers).
• Забытая конвертация в вектор: попытка редактировать узлы текста или компонента без предварительной конвертации приводит к ошибкам.
• Потеря оригинала после маскирования: если вы случайно удалите маску, содержимое может «исчезнуть». Всегда дублируйте слои перед экспериментами.
• Использование маски вместо булевой операции: если нужно физически изменить форму (например, для SVG-экспорта), маска не подойдёт — используйте вычитание.

Чек-лист перед обрезкой

Перед тем как приступить к обрезке, проверьте:

1. Выделены ли нужные фигуры?
2. Правильный ли порядок слоёв?
3. Нужно ли сохранить оригинал?
4. Требуется ли физическое изменение формы или достаточно визуальной маскировки?
5. Поддерживает ли ваш проект плагины?

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

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

— Анна Смирнова, старший продукт-дизайнер в компании Notion Labs, 7 лет опыта

Анна также делится практикой своей команды: «Мы всегда документируем, какой метод использовался для каждой сложной формы. Это помогает новым дизайнерам быстрее вникать в проект и избегать случайного разрушения компонентов.»

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

Заключение

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

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