A few essential aspects of the application design include using images, which can attract customers and make it feel more related to the application. In addition, images can help it feel more realistic and applicable. Remember that a picture speaks louder than thousands of words. This tutorial will show you How to Create a Mask for Images in Figma, so stay tuned.
Before starting this lesson, we suggest going and checking How to Use Images in Figma; there, you will learn a few ways to place images and play with their attributes. Once you have your image placed, let’s introduce the use of Masking.
Let’s say we are creating a profile page and we want the profile picture to be in a circle like most profile pages, so next we have our profile picture that usually will be a rectangle. Next select the ‘Shape’ tool from the left-hand side panel and draw the shape you want to serve as the mask.
Select the Image tool from the left-hand side panel and upload the image you want to mask. Place the image on top of the shape you just drew. Select both the shape and the image, then click on the Mask icon from the top menu bar. Your image should now be masked by the shape you drew. You can further customize the image by using the Transform and Edit tools from the left-hand side panel.
NOTE: Make sure when you do the masking that there are no other elements accidentally masked along with the image.
One cool feature of the mask is that you can move it around with the image inside and still behave as a clipping mask, as both elements work independently. This way, you can resize the mask regardless of the image or vice versa.
Very easy to follow steps, don’t you think? So, time to include images in your application design and make it more attractive. Stay tuned!
