Before you start
Who can use this feature
Anyone on any team or plan
Anyone with edit access to a file can use masks.
Use masks to show specific areas of objects while concealing the rest.
It's like placing a photograph inside a picture frame with a small opening. You'll see a portion of the photograph peeking through the opening, while the rest is concealed without the need to trim it down to size.
Since no portion of masked layers are modified or deleted in this process, masks are a non-destructive action. This allows you to preserve the concealed areas without the need to trim them down to fit.
How masks work
Any layer can be used as a mask, including vector shapes, text layers, images with transparency channels, groups, and more.
Anatomy of mask objects
When you use a layer as a mask, a mask object is created, which includes the mask and any layers it is masking. The mask is then applied to all the siblings above it in on the z-index until it reaches:
- Another mask or mask object
- The mask's parent frame or group
- A frame or component with clip content on
In the Layers panel, a mask object can be identified by a at the base and an upward-facing arrow. Layers being masked will appear above the mask. The arrow that extends from the mask shows which layers are included in that mask object.
In Figma, masks are positioned below any layers you want to mask on the z-axis. You can re-order layers on the z-axis by using actions like send to back or bring forward, or by dragging layers up and down in the Layers panel.
In the example below, the purple ellipse is acting as the mask. If the mask sits below the image of the person on the z-axis, it'll successfully mask that image. If the mask sits above the image, it won't be masked.
Opacity and alpha channels
All masks in Figma support alpha channels. Alpha channels represent the degree of transparency, or opacity, in a color, image, or object.
Instead of using the outline of a layer or image to determine what's visible, alpha masks take into account the opacity of the mask.
This means we can utilize blurs and opacity in our masks:
- Import existing PNGs, GIFs, and WebP files with transparency (alpha channels)
- Use layer blur effects to replicate feathering
- Apply drop and inner shadows to create depth
- Add fills, strokes, and gradients with varying opacity
When working with alpha masks, masks are applied based on the opacity of the mask. Portions of the mask with an opacity greater than 0% will reveal the layers it is masking. Parts of the mask with an opacity of 0%, or no fill at all, will hide the layers it is masking.
In the example above, we've used an ellipse with an outside stroke as our mask. The opacity of the ellipse's fill is 100% and the opacity of the stroke is 30%. More of the content is revealed in the center of the image, where the mask's opacity is higher (100%).
Masks must contain a fill with an opacity of more than 0% for effects and masked objects to show.
In this section, we'll go over how to create mask objects and how to reposition, resize, change properties of, and remove masks.
Create a mask
- Choose an object you want to use as your mask, and place it behind all objects that'll be masked on the z-axis.
- Select all layers that will be a part of the mask object.
- Choose any of the following methods:
- Click in the top toolbar
- Right-click the object and select Use as mask
- Use the keyboard shortcut:
Doing this will use the bottom-most object as a mask and place the mask object into a group.
If you want to add additional layers to an existing mask group, you can do this by clicking and dragging them into the mask group from the Layers panel of the left sidebar.
You can also drag the mask up or down in the Layers panel to include or exclude layers to be masked.
Note: If you use an object on the canvas as a mask, Figma will place the newly created mask object in a group.
Resize and reposition
Resizing a mask won't resize any layers it is masking, and vice versa. The same is true for repositioning masks and layers it is masking.
Because they are siblings of one another, masks won't have any parenting behavior that a frame, group, or component might have. Thus, the contents of a mask object move and resize independently from one another.
Apply properties to a mask
Masks are "invisible" on the canvas. Any properties — like stroke, fills, or effects — added to a mask layer are treated as masks as well.
Figma recognizes transparency levels for masks, so you can adjust the opacity according to how much you want the masked objects to show through.
Remove a mask
To stop using an object as a mask, use any of the following methods to toggle it off:
- Select the mask and click in the top toolbar
- Right-click the mask and select Use as mask.
- Select the mask and use the keyboard shortcut:
- Mac: ⌃ Control ⌘ Command M
- Windows: Ctrl Alt M
Any portions hidden by the mask will reappear.
Reveal mask outlines
By default, Figma does not show the boundaries of a mask. Use mask outlines when working with complex masks or to check for unintended empty spaces.
To see them, toggle on/off mask outlines:
- Open the Figma menu
- Go to View
- Click Mask outlines
If you toggle on this setting on, the masks in your file will be outlined in green.
You can also search "show mask outlines" using quick actions.
Note: If all layers being masked are hidden or have 0% opacity, then the object's mask outlines won't appear.
Use shape outlines to ignore transparency
Use shape outlines allows you to ignore the transparency of a mask's fill or stroke and the alpha transparency of an image. Instead, it uses the outline of its shape as the mask, and assumes 100% opacity.
- Select a mask with transparency, or an alpha channel.
- Check or uncheck Use shape outlines in the Mask section of the right sidebar.
Note: Using shape outlines doesn't work on layer opacity or opacity from effects.