To mask an object in Figma, place it on top of the shape you want to use as a mask. Make sure it covers the area you want to reveal. Then, select both layers and click the “Use as a mask” button from the top menu toolbar to apply the mask effect.
Hi! My name is Yana, and I’ve been immersed in the Figma world for the past year. I have a solid understanding of the Figma features and their practical applications. One of my favorite features is the masking effect, which can help you to create more dynamic designs.
In this article, I’ll guide you through the process of using the masking effect in Figma. I will also provide you with tips and insights to help you use masks for images, text, or multiple shapes.
Contents
Key Takeaways
- The mask feature allows you to hide some parts of a layer while revealing another.
- Use the Control+Command+M keyboard shortcut for Mac and Ctrl+Alt+M for Windows to add a mask effect.
- You can deactivate the mask by selecting the mask layer and clicking the Use as mask button from the top menu.
Working with Masks in Figma
The mask tool is one of many great Figma features that can help you create more complex projects. You can create visually stunning compositions where one layer acts as a “mask” for another layer, allowing you to reveal or hide specific parts and create interesting visual effects.
Let’s take a look at how to use the mask tool in detail.
Masking Images
Masking images can be helpful when you need to create a profile image. Follow the steps below to add a mask.
Step 1. First, insert the shape of your choice onto the canvas. You can choose from various shapes available in the toolbar. Make sure that the image covers the entire shape so the design will be displayed correctly.
Step 2. Select both layers by holding the Shift key and clicking the Use as Mask button from the menu at the top of the screen.
Step 3. Once the masking effect is applied, you can change the size of the shape separately by dragging one of the corners. You can also adjust an image inside the shape and position it correctly.
Masking Images with a Transparent Background
Another fantastic way to achieve visually stunning designs is by utilizing image masking with transparent backgrounds and filling them with abstract images.
Step 1. Start by importing an image that has a transparent background. If your image doesn’t have a transparent background, you can use a plugin like “Icon8 Background Remover” to help remove the background. Install the plugin from the Figma community and run it to create a transparent background.
Step 2. Next, add an image you want to work as a mask. Place an image with a transparent background behind it and then select both layers. Use the Control+Command+M keyboard shortcut for Mac and Ctrl+Alt+M for Windows to add a mask effect.
You can also change the transparency of a masked layer to create a more interesting look.
Masking Text
As I mentioned above, you can add a mask effect not only to images but text layers. Let’s see how to mask a text.
Step 1. Choose an image that you want to fill your text layer.
Step 2. Press the T key to create a text layer. Then, adjust the font size, and style, or add a stroke to your text. Learn more about editing the text in Figma here.
Since we want the text to mask the image, you need to place the text behind the image. You can accomplish this by right-clicking on the text layer and selecting “Send to Back“.
Step 3. Finally, select the text and the image layers and press Control+Command+M for Mac and Ctrl+Alt+M for Windows to add a mask effect.
You can still change the content of the text layer after applying the mask effect. Just enter the text mode by pressing the T key and modifying the text.
Masking Multiple Shapes
While you can also fill the shape or text layer with an image using the Fill option when it comes to working with multiple shapes, the Mask feature is preferable.
Step 1. Add the image you want to customize along with some objects. Place all the objects correctly and then group them together. To do this, select every element you want to mask and press the Command+G keyboard shortcut for Mac and Ctrl+G for Windows.
Step 2. Next, create a layer that you want to use as a mask. Press the O key to create a circle or the R key to add a rectangle to your design. Place it to the back so the masking effect will be displayed correctly.
Step 3. Select the group of elements and the shape behind it and click the Use as mask button at the top of the screen or the keyboard shortcuts I mentioned above.
That’s it! When you mask images and include abstract elements, it adds depth, intrigue, and a special touch to your designs. Give it a try and see how your visuals come alive with a captivating combination of transparency and abstraction.
FAQs
Here are the most frequently asked questions about masking in Figma.
How to Remove Mask in Figma
To remove the mask, you need to find the object that works as a mask and select it. Then, click on the Use as Mask button from the menu at the top of the screen to deactivate the effect.
Is Masking the Same as Clipping?
No, masking and clipping are not the same. In Figma, masking is used to hide or reveal parts of a layer based on another layer’s shape. Clipping is used to restrict the visible area of a frame. While both techniques hide some part of a layer, their use varies.
Final Thoughts
When it comes to design, one of the key objectives is to create captivating and visually appealing projects. Whether you’re masking images, text, or multiple objects, it’s important to follow the steps we discussed today. Set aside some time to experiment with this feature and unleash your creativity to craft engaging banners or captivating social media content.
Do you use the mask feature in Figma? Share your experience using this tool in the comments below.
