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

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

Что значит обрезать фигуру в Figma?

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

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

Способ 1: Обрезка с помощью маски (Mask)

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

Пошаговая инструкция:

1. Создайте или импортируйте объект, который нужно обрезать (например, изображение, текст или векторную форму).
2. Нарисуйте фигуру, которая будет служить границей обрезки — круг, прямоугольник, произвольный путь. Она должна полностью или частично перекрывать объект.
3. Убедитесь, что маска (ограничивающая фигура) находится над объектом в панели Layers.
4. Выделите оба объекта (зажмите Shift и кликните по ним).
5. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).
6. Альтернативно: кликните правой кнопкой мыши и выберите “Mask”.

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

Способ 2: Обрезка через пересечение (Intersect)

Операция “Intersect” (пересечение) — это способ, при котором Figma создаёт новую форму, равную области пересечения двух или более объектов. В отличие от маски, это разрушительная операция: исходные объекты заменяются новым вектором.

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

Как выполнить:

1. Создайте два перекрывающихся объекта — например, прямоугольник и круг.
2. Выделите оба объекта (Shift + клик).
3. В панели инструментов сверху найдите кнопку “Union”, “Subtract”, “Intersect” — выберите “Intersect”.
4. Figma автоматически создаст новую форму, соответствующую области пересечения.

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

Способ 3: Обрезка через вычитание (Subtract)

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

Когда использовать:
— Вам нужно физически удалить часть объекта (например, вырезать окно в стене).
— Вы работаете с дизайном, где важно уменьшить количество слоёв.
— Вы создаёте 3D-эффекты или сложные формы с пустотами.

Как выполнить:

1. Нарисуйте основной объект — например, прямоугольник.
2. Создайте форму, которую хотите вырезать — круг, треугольник, сложный путь.
3. Поместите вырезаемую форму над основным объектом.
4. Выделите оба объекта.
5. Нажмите кнопку “Subtract” в панели инструментов.

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

Продвинутые техники обрезки

Figma позволяет комбинировать методы для создания сложных эффектов. Вот несколько профессиональных приёмов:

Вложенные маски

Вы можете применить маску к маске. Например: изображение → обрезано кругом → этот круг обрезан звездой. Результат: изображение видно только в форме звезды. Для этого:
— Создайте маску для изображения (круг).
— Создайте вторую маску (звезду) и поместите её над кругом.
— Выделите оба и примените маску к верхнему слою.

Обрезка текста

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

Использование компонентов

Если вы обрезаете одинаковые объекты (например, аватары пользователей), сделайте компонент. Обрежьте один экземпляр маской — все остальные экземпляры автоматически повторят обрезку. Это экономит часы работы при больших проектах.

Обрезка с помощью артбордов

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

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

Ошибки при обрезке — одни из самых распространённых в Figma, особенно у новичков. Вот основные:

• Неправильный порядок слоёв. Маска должна быть выше объекта. Если вы выделили сначала маску, а потом объект — операция может не сработать. Всегда проверяйте стек слоёв.
• Обрезка без выделения. Вы не можете обрезать один объект, если не выделили и маску. Убедитесь, что оба объекта выбраны.
• Использование Subtract для изображений. Вычитание не работает с растровыми файлами. Сначала преобразуйте в вектор или используйте маску.
• Не проверяете экспортируемый результат. Иногда маска выглядит правильно в интерфейсе, но при экспорте SVG или PNG остаются артефакты. Всегда проверяйте экспорт в режиме “Export” → “SVG” или “PNG”.
• Забыли разгруппировать объекты. Если вы пытаетесь применить Intersect к группе — ничего не произойдёт. Разгруппируйте (Ctrl+Shift+G) перед операцией.

*Текст можно использовать в Intersect только после преобразования в вектор (Right-click → Convert to Vector).
То же правило — текст должен быть вектором.

Экспертное мнение: Когда и почему выбирают тот или иной метод?

Он добавляет: «Не бойтесь пробовать. Иногда маска кажется сложной, но на практике она экономит больше времени, чем кажется. Я видел, как дизайнеры пересоздавали 20 аватаров по 10 минут каждый, потому что использовали Subtract. С маской — один раз настроили, и всё работает.»

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

Заключение

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

Помните: лучший дизайн — это не только красивый результат, но и управляемый процесс. Обрезка через маску — это как “Ctrl+Z” для вашей работы. Она даёт вам свободу экспериментировать без страха потерять данные.

• Маска — лучший способ обрезки для большинства случаев.
• Intersect и Subtract — разрушительные операции, подходят только для финальных форм.
• Всегда проверяйте порядок слоёв и выделение перед применением обрезки.
• Обрезка текста и изображений возможна только через маску.
• Используйте компоненты и маски вместе — это ускоряет работу в больших проектах.