In Web design
Mask in Figma: how to make and work with the Use as mask Figma tool
Management
In this article, you'll learn how to work with the Mask tool in figma. We'll cover simple examples that you can use in your work.
How to make a mask in Figma
To make an abstraction mask in Figma, overlay one element on top of another. Select the 2 elements and click the "Use as mask" icon at the top. You can also press "Ctrl + Alt + M" to create a mask. A group with a mask will appear in the Layers panel, which you can edit.
To make an abstraction mask in Figma, overlay one element on top of another. Highlight the 2 elements and click the "Use as mask" icon on top. You can also press "Ctrl + Alt + M" to create a mask. A group with a mask will appear in the Layers panel, which you can edit.
The element that was on top will be outlined on the bottom object.
If you select any element in the layers and drag, everything will change.
How to remove a mask in Figma
To remove or turn off a mask in figma, open the Mask Group in the layers and select the lower element with the mask icon. Then click on the top centre icon "Use as mask" and you'll disable the mask you created earlier.
How to use a mask in Figma
You can use a mask in Figma to crop any object to a particular outline and shape. For example you can make a circle-shaped photo, overlay a photo over text, and remove the background on a photo of a simple element.
How to insert a photo into a circle using a photo mask in Figma
To insert a photo into a circle in Figma, create a circle using the standard Figma tools. Insert the photo, place the circle at the bottom of the photo and click the "Use as mask" icon. Examples of implementation in the screenshots below.
How to place a photo over text with a mask in Figma
To superimpose a photo over text in figma, write some text and place the photo. In layers, place the text at the bottom of the photo and click the "Use as mask" icon in the top centre.
How to remove the background on a photo in Figma using a mask
If you want to remove the background for a photo in Figma using a mask, you need to make an outline around the object. Place it at the bottom of the photo and click the mask icon in the top centre.
