Figma offers various tools to edit images, and if you’re trying to mask in Figma, there’s one for it as well. In this guide, we will help you to mask through a simple demonstration to get you covered.
Mask in Figma
- Start by navigating to Figma and sign in with your credentials. After logging in, open an existing design from Recents or create a new one using the Design file button.
- After the new/existing design is loaded, ensure you have the layers necessary to add to the mask.
- Now drag the shape over to the image and adjust the position. Doing this will place the shape behind the image, which you can observe in the Layers panel.
- If you do it right, the shape outline is displayed. To apply the mask effect, select both and right-click on it. Now, from the multiple options, click on Use as mask.
Pro Tip: You can also mask in Figma by selecting the layers and pressing Ctrl + Alt + M (Windows) and Cmd + Alt + M (macOS) keys together. However, if you want an alternative approach straight from the canvas, select the layers to display multiple options on the toolbar and from which click on the Use as Mask option.
- If you do everything right, you will have an image masked onto the shape like below.
Wrapping Up
Congratulations on learning how to mask in Figma!
While we have presented ways to mask an image on the shape, if you’re trying to mask it on the text, the process remains the same. However, for the mask effect to apply, ensure the text size is large enough to mask the image inside it.
