Figma tutorial: Masks

Masks are used to reveal specific portions of layers while concealing the rest. In this video, we'll go through how to create a simple mask, the differences between masks and image fills, alpha channels, and advanced designs combining masks with other features. To follow along, click the description below for a copy of the masks playground file from the Figma Community.

Timestamps:
00:00 Overview
00:47 How to create a simple mask
01:17 Resizing and repositioning the layers of a mask object
01:38 Using text layer as mask
02:28 Image fill vs mask
03:14 Using alpha channels for mask
04:11 Using layer blurs and drop shadows for mask
04:58 Combining mask with smart animate
05:56 Wrap up

#Figma #FigmaTutorial #Masks #Mask

Music:
On My Way by Ghostrifter Official

[Figma]

In June 2024, we introduced a redesigned Figma—called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.

[AnshMehraa]

Really really good stuff. Whenever I see a new upload, I go like "Ahh, Masks? I already know that" and when I'm done watching video I'm like "Thank god. I didn't miss this one"

[thmahawk]

The way masks work in figma is the most confusing thing I've ever dealt with. Can anyone explain why they don't just use the industry standard of the top object clipping the object below?

[deivchoi]

SO COOL!!! Figma is such an amazing product and it works so well. It's hard not to love it

[seaningledew]

Around the 5:36 mark, the tutorial says to center the text vertically and horizontally and change the frame color to white. Then a few seconds later, the frame in the tutorial changes from white to blue without any explanation. And the on-screen actions are fast-forwarded to such a high degree that you can't even tell what is going on. It took me forever to realize that you have to unmask the text layer again, and I'm not even sure that's exactly what you're supposed to do. A lot of these "tutorial" videos feel less like a tutorial and more like a product demo. "Look what this program is capable of!". OK, but I already have the program. I came here to actually learn how to do that.

[rohansth]

I personally find using masks very unintuitive. I think the most confusing thing is when I have to un-mask. It took me multiple attempts to realize that you need to select the bottom masking layer and click the "Use as mask" icon again to do so.

[ux-curiosity]

For 04:58 "Combining mask with smart animate" It is a rectangle colored (5551FF) that was added, that's why when she adds the mask again you can see the words. Spend an hour trying to figure it out, just download the figma file and look at her layers.

[moheetchaurasia]

Dear Figma team, I really love your product. If you can work on Mask than I would love you the most, Mask doesn't work very often and it's really difficult to unmask. Please work on it ASAP.

[Cell_melton]

I liked, I subscribed, I shared with friends… I’m here for the long run!!!

[vasu]

Nice, short, on point, easy, perfect job, good vid, i already knew it but still thanks 👍

[chetanyadav]

Frames also sort of do the same function (with clipped content). When to use Mask and when to use Frame?

[oliverhuynhhh]

It's kidda bad experience when come to masking objects. Why don't it show the background of the mask object? Like why it obmited my filled solid color then?

[baconcassoulet]

Can we use variants as mask?
To easily change icons for exemple

[agabewill]

For anyone else running into this, this won’t work on components unless you uncheck “clip content” on the component itself.

[shahiferdous]

Coming from Adobe XD, i find the image fill option complex to use in figma. In XD you can just drag and drop an image over the shape and it will be filled with the image. Is there anything like this on figma? I'm new so i dont know.

[mrduycua]

Greatttt!!! Thanks this is super helpful

[neelsharma]

i need help, whenever i use mask, the color of my object changes, and it happens everytime, don't know what to do

[The_Humming_arts]

I'm facing some problem when I click on mask button it shown that frame without colours....if anyone has a cute of this problem please let me know

[Fastlikefood]

I don't understand why Figma works by putting the mask under the image. It would be much more practical if you could put the mask over the image. The mask is always smaller than the image that is to be masked...

[JoshSmith-xmgz]

Is it possible to add an outline stroke to a mask and export this as an svg to mask a video on a website?