A way to use a rectangle as a clipping mask and retain its fill/stroke/shadow?

Excuse me as this probably was asked many times but I can’t pull off this easy trick from Photoshop in Figma. Once I use an object as a mask, it loses its fill and stroke, and apparently it’s impossible to add a proper shadow to it. Is this an upcoming Figma’s feature or am I doing something wrong?

1 Like

Masks are always invisible. You need to duplicate the shape to make it visible. Or just use a frame with Clip Content on, in case you need a simple rectangle as a mask.

3 Likes

Yes, thanks! Using a frame as a container does the trick just fine looks like.

2 Likes

Yup, this is a tricky concept coming over from Sketch, where masks themselves can take layer properties, like borders/stroke, fills, and shadows. In Figma, masks are always invisible and only take on opacity properties (basically lowering or raising the invisibility of the mask layer).

I’ve been learning Figma, and have been wondering where all the power of frames has been hiding, since frames is obviously such a core concept as evidenced in the platforms functionality hierarchy and toolbar. I now see that frames can act as a mask (w clip content, essentially a “clipping mask”) and take on all the layer properties like fill, stroke and shadow.

Couple things: 1. It would be nice if Figma’s UI did not allow you to apply fills and strokes to masks, since they do not appear (very frustrating to learn this). 2. It’s quite odd that transparency gets applied to the mask, but effects the content — which sits above the mask. Would it not be better for the mask to sit on top (like other software)? And also allow strokes and fills to be applied?

They don’t appear but they affect the mask (i.e. the outside stroke or disabling/enabling the fill).

I don’t find that odd, it’s just the way it works. You can see the masking arrow in the layers panel which shows which layers the mask is applied to.