Как вырезать элемент в фигме

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

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

Основы маскирования в Figma

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

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

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

Какие объекты могут быть масками?

• Прямоугольники, эллипсы, многоугольники и другие базовые фигуры.
• Сложные векторные контуры, созданные с помощью Pen Tool.
• Текстовые слои — при условии, что они преобразованы в кривые (Outline Stroke).
• Изображения с прозрачностью — при использовании в качестве маски, они учитывают альфа-канал.

Пошаговое создание маски

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

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

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

Редактирование и отключение маски

После применения маски вы можете:

• Двигать содержимое внутри маски — просто кликните по нему и переместите.
• Изменять форму маски — выделите маску и редактируйте её углы или радиус.
• Отключить маску: выделите группу, нажмите правой кнопкой → «Detach Mask».
• Удалить маску: выделите маску и нажмите Delete — содержимое останется, но без ограничений.

Булевы операции: вычитание фигур

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

Булевы операции в Figma включают:

• Union (объединение)
• Subtract (вычитание)
• Intersect (пересечение)
• Exclude (исключение)

Для вырезания одной фигуры из другой используется Subtract.

1. Нарисуйте две перекрывающиеся фигуры — например, большой прямоугольник и маленький круг.
2. Выделите обе фигуры (сначала ту, из которой будете вырезать, затем ту, которой вырезаете).
3. На панели сверху нажмите иконку Subtract (минус в квадрате).
4. Figma удалит область пересечения, оставив «дыру» в первой фигуре.

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

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

Помимо базовых методов, существуют более сложные подходы, которые расширяют возможности дизайна в Figma.

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

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

• Добавьте текстовый слой.
• Поместите изображение поверх текста.
• Выделите оба слоя и нажмите Ctrl+Alt+M.

Теперь изображение будет видно только внутри контура текста.

Альфа-маски из изображений

Если у вас есть PNG с прозрачностью, его можно использовать как маску. Например, вы можете применить текстуру или градиент, ограниченную формой облака или капли.

Комбинирование масок и компонентов

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

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

Даже опытные пользователи Figma иногда сталкиваются с типичными проблемами при попытке вырезать элементы.

Ошибка 1: Неправильный порядок слоёв

Если маска находится под объектом, она не сработает. Всегда убедитесь, что маска — верхний слой в выделении.

Ошибка 2: Попытка вычесть из изображения

Figma не позволяет применять Subtract к растровым изображениям. Используйте маскирование вместо булевых операций.

Ошибка 3: Забытая группа

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

Ошибка 4: Слишком маленькая маска

Иногда маска кажется «пустой», потому что содержимое вышло за её пределы. Увеличьте маску или переместите содержимое внутрь.

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

По словам эксперта, маскирование — это не просто инструмент обрезки, а способ управления визуальной иерархией. Например, в мобильном приложении можно использовать маску для плавного появления баннера из-за края экрана, имитируя анимацию.

Также Дмитрий отмечает, что маски особенно полезны при создании дизайн-систем: они позволяют стандартизировать формы аватаров, иконок и карточек, обеспечивая единообразие.

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

Заключение

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

• Для изображений используйте маскирование (Ctrl+Alt+M).
• Для векторных фигур применяйте Subtract.
• Маски обратимы и не повреждают исходный объект.
• Следите за порядком слоёв — маска должна быть сверху.
• Комбинируйте техники для продвинутых визуальных эффектов.