Как сделать обтравочную маску в фигме

Обтравочные маски (Clipping Masks) в Figma - одна из базовых и очень полезных функций. Они позволяют легко и гибко управлять видимостью объектов, не изменяя их исходную структуру. Это делает их незаменимыми для создания сложных композиций, работы с фотографиями и типографикой. Рассмотрим, как это можно сделать несколькими способами.

Вы можете создать интернет магазин за 1 вечер. Просто выберите готовый шаблон интернет магазина и установите его. Останется только наполнить его своими товарами.

Основной способ создания обтравочной маски

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

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

1. Подготовьте объекты: Расположите объект, который нужно обрезать (например, изображение) поверх объекта-маски (например, прямоугольник, круг, звезда).
2. Сгруппируйте с помощью маски:

• Выделите оба слоя.
• Нажмите на значок «Обтравочная маска» в панели над холстом (рядом с Boolean операциями).
• Или используйте горячую клавишу: Ctrl+Alt+M (Win) / Cmd+Option+M (Mac).
• Или щелкните правой кнопкой мыши и выберите «Use as Mask».

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

 

Чтобы отредактировать содержимое, просто дважды кликните по маске. Вы можете перемещать изображение внутри, менять саму форму-маску или добавлять новые слои внутрь группы.

 

Заливка изображением

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

После загрузки картинки она автоматически вписывается в контур объекта. Главное преимущество - встроенный интерфейс для контроля положения и масштаба изображения прямо на холсте. Этот способ идеально подходит для быстрого прототипирования и создания повторяемых стилей.

1. Нарисуйте фигуру (например, звезду).
2. На панели «Design» (справа) в разделе «Fill» выберите тип заливки «Image» (или «Gradient»).
3. Загрузите или выберите изображение.
4. Появится интерфейс для настройки: можно перемещать, масштабировать и растягивать изображение прямо внутри фигуры.

 

Плюс этого способа: Удобно, если нужно применить один стиль заливки к нескольким фигурам через стили.

 

Продвинутые приёмы

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

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

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

1. Добавить новые слои внутрь маски - просто перетащите их в группу в списке слоев.
2. Изменить режим наложения слоя-маски (например, на «Alpha Mask») для сложных эффектов.
3. Отменить маскирование: Выделите группу и снова нажмите значок маски или нажмите Ctrl+Alt+M / Cmd+Option+M.

Ключевые отличия от Boolean Operations

Не путайте маску с операциями Union, Subtract, Intersect. Важно понимать фундаментальную разницу между этими инструментами. Булевы операции безвозвратно объединяют или вычитают векторные пути, создавая совершенно новую, единую фигуру.

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

• Boolean Operations - необратимо сливают две векторные фигуры в одну новую форму.
• Clipping Mask - это недеструктивное редактирование. Вы в любой момент можете изменить и содержимое, и форму маски.

Хотите просто обрезать картинку или сохранить возможность редактировать - используйте обтравочную маску. Хотите создать новую сложную векторную форму - используйте Boolean Operations. Попробуйте оба способа, и вы быстро найдёте, какой удобнее для каждой конкретной задачи.

Выбирайте маску, если нужно временно обрезать контент (например, фото в круг). Используйте булевы операции, когда ваша цель - создать новую единую векторную иконку или логотип. Вот небольшая таблица, которая сравнивает инструменты: Обтравочную маску и Булевы операции:

Критерий	Обтравочная маска (Clipping Mask)	Булевы операции (Boolean Operations)
Основное назначение	Управление видимостью (обрезание) одного или нескольких объектов по форме другого.	Создание новой сложной векторной формы путем слияния, вычитания или пересечения контуров.
Редактируемость	Неразрушающая: оба объекта остаются исходными и их можно менять отдельно.	Разрушающая (чаще всего): создаётся новая единая форма, исходные контуры теряются.
Применимость	Работает с любыми слоями: изображениями, векторами, текстом, группами.	Работает только с векторными объектами (Shape Layers).
Гибкость	Высокая: содержимое маски можно перемещать, а форму - редактировать в любой момент.	Ограниченная: после применения операцию можно отменить или изменить режим, но исходные пути восстановить сложно.

 

Вывод

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