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

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

Обрезка по фигуре

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

Создание двух объектов

• «Объект-маска» (рамка): Это фигура, которая будет определять видимую область. Чаще всего это прямоугольник, круг или скругленный прямоугольник. У этого объекта должна быть заливка (любого цвета, это не важно).
• «Содержимое»: Это то, что вы хотите поместить внутрь маски - изображение, другой цветной прямоугольник, текст и т.д.

Расположение объектов

1. Поместите объект-маску поверх содержимого, которое вы хотите обрезать.
2. Выделите оба объекта. Можно кликнуть и протянуть мышью, или щелкать по ним с зажатым Shift.
3. Примените маску:

• Способ 1 (Быстрый): Нажмите сочетание клавиш Ctrl+Alt+M (Win) / Cmd+Option+M (Mac).
• Способ 2 (Через меню): Кликните правой кнопкой мыши по выделенным объектам, выберите «Use as Mask».
• Способ 3 (Через панель слоев): Нажмите на значок шестеренки в правом верхнем углу интерфейса и выберите «Use as Mask».

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

Как работать с маской после создания

Чтобы переместить содержимое внутри маски, просто выделите его на холсте и перетащите - вы сразу увидите, какая часть остаётся видимой. Если нужно изменить границы обрезки, выделите сам объект-маски (со значком ромба в слоях) и отрегулируйте его размер или форму. Для отмены обрезки выделите маску-группу и снова нажмите сочетание клавиш Ctrl+Alt+M (Win) / Cmd+Option+M (Mac).

• Перемещение содержимого: Кликните по содержимому внутри маски-группы на холсте и перемещайте его. Вы увидите, какая часть изображения видна внутри маски.
• Изменение размера/формы маски: Выделите сам объект-маску (тот, со значком ромба) и меняйте его размер, скругление углов или форму как у любого обычного объекта.
• Разгруппировка (отмена маски): Выделите группу с маской и снова нажмите Ctrl+Alt+M / Cmd+Option+M, либо кликните правой кнопкой и выберите «Remove Mask».

Важные нюансы и дополнительные возможности

Обтравировка изображения (маска по контуру)

Этот метод используется, когда вы хотите, чтобы само изображение (или любая векторная фигура) было и маской, и содержимым одновременно. Классический пример - обрезка человека с фото по его контуру.

1. Поместите ваше изображение на холст.
2. Сверху нарисуйте векторный контур (используя инструмент Pen (Перо) или Pencil (Карандаш)), который точно повторяет нужный вам силуэт. У этого контура должна быть заливка.
3. Выделите и изображение, и векторный контур.
4. Примените маску (Ctrl+Alt+M).

Теперь изображение будет видно только внутри нарисованного вами контура. Чтобы изменить область видимости, перемещайте изображение внутри маски, пока не найдете нужную композицию. Если требуется подкорректировать границы, выделите векторный контур-маску и отредактируйте его точки с помощью инструмента «Pen» (Перо).

Инвертирование маски

Бывают случаи, когда вам нужно, чтобы маска работала наоборот: вырезала не внутреннюю часть, а внешнюю. Например, чтобы она создавала "вырез" в форме буквы.

1. Создайте маску обычным способом.
2. В панели слоев выделите объект-маску (со значком ромба).
3. На правой панели в разделе «Fill» (Заливка) найдите опцию «Mask».
4. Рядом с ней будет значок «Инвертировать маску» (кружок с треугольниками). Нажмите на него.

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

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

Тип маски	Принцип работы	Пример использования
Обычная	Показывает содержимое внутри области маски	Обрезка аватара по кругу, создание карточки товара со скругленными углами
Инвертированная	Показывает содержимое снаружи области маски	Создание эффекта "замочной скважины", текстового поля в форме рамки, виньетки по краям

 

Текст как маска

Текст - это такой же векторный объект. Вы можете использовать его в качестве маски. Для этого необходимо выполнить следующие действия:

1. Напишите текст.
2. Поместите под него изображение или цветной прямоугольник.
3. Выделите оба объекта и примените маску (Ctrl+Alt+M).

 

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

 

Основные рекомендации по вырезанию маски в Figma:

1. Что сверху, то и маска: Объект, который находится выше в Z-index (или был нарисован последним), станет маской при применении команды.
2. Заливка - это ключ: Только объекты с заливкой могут быть масками. Обводка (Stroke) для этого не подходит.
3. Сочетание клавиш - ваш друг: Запомните Ctrl+Alt+M / Cmd+Option+M - это сэкономит вам кучу времени.

Вывод

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