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.
When you use a layer as a mask, a mask object is created, which includes the mask and any layers it is masking. A mask object can be identified in the Layers panel by a at the base denoting the mask, and an upward-facing arrow along the layers being masked.
Masks are positioned below masked layers on the z-axis. The mask applies to all siblings above it until it reaches:
- Another mask or mask object
- The mask's parent frame or group
- A frame or component with clip content on
Learn more about parent, sibling, and child relationships →
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.
Alpha channels and transparency
All masks in Figma support alpha channels. Alpha channels represent the degree of transparency, or opacity, in a color, image, or object.
When working with alpha masks, masks are applied based on the opacity of the mask. The higher the opacity, the more that is revealed. Zero percent (0%) opacity reveals nothing.
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
In the example below, 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 is revealed in the center of the image, where the mask's opacity is higher (100%).
Vector masks, or using shape outlines as masks, ignore the translucency—or any opacity value of more than zero percent (0%)—of a mask's fill or stroke. If a mask contains any area with an opacity of more than 0%, then its outlines are used as the mask and the entire mask assumes 100% opacity.
In the example below, a heart png image with a completely transparent background is being used as a mask. The bottom left is using an alpha mask, so we see the outline of the heart. The bottom right is using a vector mask, and uses the outline of the entire image as the mask.
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.
Learn more about reordering layers →
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.
Learn more about parent, sibling, and child relationships →
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.