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

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

Маска фигме состоит как минимум из двух слоев: собственно самой маски и слоя, к которой эта маска будет применяться.

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

Чтобы сделать обтравочную маску в фигме, необходимо:

1. Выбрать слой, к которому будет применяться маска. Для примера пусть это будет картинка:

2. Нарисовать фигуру той области, которая должна быть видна в итоговом варианте. Сделать это можно инструментом перо или фигурами. Цвет не важен, значение имеет только прозрачность/непрозрачность.

3. На панели слоев переместить фигуру под картинку

4. Одновременно выделить оба слоя и применить маску одним из способов, описанных ниже

Где находится кнопка маски в новой фигме и как её сделать горячими клавишами

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

На правой панели также есть возможность применить маску. В новом интерфейсе фигмы эта функция находится в иконке (значке) маски и меню многоточия:

Ну и конечно же сделать маску можно и с помощью сочетания горячих клавиш Ctrl Alt M (на Windows) или Ctrl Cmd M (на Mac OS).

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

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

Данная функция появляется у слоя после того, как его сделали маской и находится в тех же местах, что и при добавлении маски. Но называется она уже не Use as mask, а наоборот — Remove mask. После нажатия этой кнопки слой снова станет обычной фигурой.

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

Для этого под группой маски нарисуйте дополнительный прямоугольник, выделите его вместе со слоем-маской и сделайте Subtract selection:

Получившуюся в результате фигуру снова примените как обтравочную маску уже знакомым вам способом. Инвертированная наоборот маска готова!

Как еще можно использовать инструмент маска в фигме

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

Подробную инструкцию, как сделать сложную составную маску, смотрите в видео-версии в начале урока.