В этом видео вы узнаете как работать с инструментом «Маска» в фигме. Разберем простые примеры, которые вы можете использовать в своей работе. Посмотрите короткое видео или воспользуйтесь текстовым вариантом ниже.
Как сделать маску в фигма
![Как создать маску в фигме](https://web-design.center/wp-content/uploads/2021/03/1-maska-v-figma-1-1024x576.jpg)
Чтобы сделать абтравочную маску в фигма (Figma) наложите один элемент на другой. Выделите 2 этих элемента и сверху нажмите на иконку маски «Use as mask». Также для создания маски можно нажать горячие клавиши «Ctrl + Alt + M». В панели слоёв появится группа с маской, которую вы можете редактировать.
![Результат использования инструмента «Use as mask» в figma](https://web-design.center/wp-content/uploads/2021/03/2-maska-v-figma-1024x581.jpg)
Элемент, который был сверху будет обведен по контуру нижнего объекта.
![Редактирование маски в figma](https://web-design.center/wp-content/uploads/2021/03/3-maska-v-figma-1024x579.jpg)
Если вы выберите какой-то элемент в слоях и потяните в сторону, то все будет меняться.
Как убрать маску в фигме
![](https://web-design.center/wp-content/uploads/2021/03/image-5-1024x559.png)
Чтобы убрать или отключить маску маску в фигме, откройте группу с маской в слоях (Mask Group) и выберите нижний элемент с иконкой маски. Затем нажмите на пиктограмму сверху по центру «Use as mask» и вы отключите созданную ранее маску.
Как использовать маску в фигме
Использовать маску в фигме можно для обрезания каких-либо объектов по определенному контуру и форме. Например можно сделать фото в форме круга, наложить фото поверх текста и удалять задний фон на фото у простых элементов.
Как вставить фото в круг фигма с помощью маски
Чтобы вставить фото в круг в фигме, создайте круг с помощью стандартных инструментов фигмы. Вставьте фото, поместить круг внизу фотографии и нажмите на иконку маски «Use as mask». Примеры реализации на скриншотах ниже.
![Как обрезать фото в форме круга](https://web-design.center/wp-content/uploads/2021/03/4-maska-v-figma-1024x579.jpg)
![Поместите круг вниз фото для того, чтобы обрезать](https://web-design.center/wp-content/uploads/2021/03/5-maska-v-figma-1024x583.jpg)
![Результат — фото в круге](https://web-design.center/wp-content/uploads/2021/03/6-maska-v-figma-1024x578.jpg)
Как наложить фото поверх текста с помощью маски в фигме
Чтобы наложить фото поверх текста в фигме, напишите какой-то текст и разместите фотографию. В слоях поместите текст вниз фотографии и нажмите сверху по центру пиктограмму маски «Use as mask».
![Маска для текста. Как наложить фото на текст](https://web-design.center/wp-content/uploads/2021/03/7-maska-v-figma-1024x582.jpg)
![Размещение слоев](https://web-design.center/wp-content/uploads/2021/03/8-maska-v-figma-1024x563.jpg)
![Фото на тексте в фигме](https://web-design.center/wp-content/uploads/2021/03/9-maska-v-figma-1024x580.jpg)
Как удалить фон на фото в фигме с помощью маски
Чтобы удалить фон у какого-либо фото в фигме с помощью маски, следует сделать контур вокруг этого объекта. Поместить его вниз фотографии и нажмите на иконку маски сверху по центру.
Подробнее про вырезание объектов с помощью пера и маски в этой статье.
![Вырезание объектов с помощью маски](https://web-design.center/wp-content/uploads/2021/03/10-maska-v-figma-1024x569.jpg)
![Наложение контура на объект в фигме](https://web-design.center/wp-content/uploads/2021/03/11-maska-v-figma-1024x568.jpg)
![Вырезанный объект с помощью маски](https://web-design.center/wp-content/uploads/2021/03/12-maska-v-figma-1024x568.jpg)
Заключение
Итак, вы этом видео вы узнали как работать с инструментом «Маска» в фигме. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.
Автор статьи: Владимир Чернышов
![Дизайн генератор — комплект figma](https://web-design.center/wp-content/uploads/2021/09/banner-design-generator.png)
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).