cft

An easier way to use masks in Figma

Masking in Figma is not too different from other design tools, then why designers find it difficult


user

Arpit Gupta

3 years ago | 1 min read

Using mask is simple, in any design tool.

Use an image via drag and drop/ copy-paste/ upload an image, create a shape and apply mask.

From using Adobe’s Illustrator to Photoshop to CorelDRAW, designers are using the same method to mask an image.

Then what’s the problem?

Well despite being the common method to display images masked in a shape, in UI design it becomes hard under reusing the component, (if not grouped properly.)

But are there any other ways?

Yes! there are other options available in Figma to mask an image easily

  • Filling an image in a shape
  • Using clip content under a frame

Let’s start with filling an image

Introduced by Sketch, filling an image in shape is not a new concept nowadays but Figma takes it to a new level of simplicity. Filing an image makes it simpler to mask an image within a desired shape in Figma without making another pair of elements.

Example of filling an image in Figma

In a distributed design its also a plus point for designers to edit design easily with just one layer instead of multiple layers of masks.

Now the interesting one

Clicking on clip content under the frame’s properties panel will mask any element under the frame to its shape. You can shape a frame as a predefined shape such as a rectangle / circle or as a custom polygon shape.

In my last video on my YouTube channel, I’ve shared how frames in Figma are different from artboards in Sketch.

Not a restriction😃

Though these are preferred optimal ways to mask an image or group of images in a shape, you can use the traditional method by clicking on the mask button on top toolbar.

Swap layer under layer panel if it’s masking incorrectly

Opinion

If you click on code tab under each scenario, you’ll see the optimal solutions which are listed above are better than using a shape mask.

Upvote


user
Created by

Arpit Gupta

Product Designer - Airmeet.com | Dev-Design Facilitator | UI Mentor at DesignBoat UI/UX School | appy013


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles