Маска в фигме
Уроки

Маска в фигме: как сделать и работать с инструментом «Use as mask»

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

Как сделать маску в фигма

Как создать маску в фигме

Чтобы сделать абтравочную маску в фигма (Figma) наложите один элемент на другой. Выделите 2 этих элемента и сверху нажмите на иконку маски «Use as mask». Также для создания маски можно нажать горячие клавиши «Ctrl + Alt + M». В панели слоёв появится группа с маской, которую вы можете редактировать.

Результат использования инструмента «Use as mask» в figma

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

Редактирование маски в figma

Если вы выберите какой-то элемент в слоях и потяните в сторону, то все будет меняться.

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

Чтобы убрать или отключить маску маску в фигме, откройте группу с маской в слоях (Mask Group) и выберите нижний элемент с иконкой маски. Затем нажмите на пиктограмму сверху по центру «Use as mask» и вы отключите созданную ранее маску.

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

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

Как вставить фото в круг фигма с помощью маски

Чтобы вставить фото в круг в фигме, создайте круг с помощью стандартных инструментов фигмы. Вставьте фото, поместить круг внизу фотографии и нажмите на иконку маски «Use as mask». Примеры реализации на скриншотах ниже.

Как обрезать фото в форме круга
Создайте круг и разместите фото
Поместите круг вниз фото для того, чтобы обрезать
Поместите круг вниз фото в слоях
Результат — фото в круге
Фото в круге в фигме

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

Чтобы наложить фото поверх текста в фигме, напишите какой-то текст и разместите фотографию. В слоях поместите текст вниз фотографии и нажмите сверху по центру пиктограмму маски «Use as mask».

Маска для текста. Как наложить фото на текст
Создайте текст и поместите фото в фигму
Размещение слоев
Разместите текст внизу фото в слоях и нажмите на иконку маски
Фото на тексте в фигме
Текст с наложением на него фото в фигме

Как удалить фон на фото в фигме с помощью маски

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

Подробнее про вырезание объектов с помощью пера и маски в этой статье.

Вырезание объектов с помощью маски
Разместите фотографию, где хотите удалить фон
Наложение контура на объект в фигме
С помощью пера создайте контур вокруг объекта
Вырезанный объект с помощью маски
Поместите контур вниз фото и нажмите на маску

Заключение

Итак, вы этом видео вы узнали как работать с инструментом «Маска» в фигме. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

Автор статьи: Владимир Чернышов

Теги

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *