The object on the bottom-right is using a vector mask, and uses the outline of the entire image as the mask. The object on the bottom-left is using an alpha mask, so we see the outline of the heart. In the example below, an image of a heart with a completely transparent background is being used as a mask. If a mask contains any area with an opacity of more than zero percent, then its outlines are used as the mask and the entire mask assumes 100% opacity. Vector masks, or using shape outlines as masks, ignore the translucency-or opacity value of more than zero percent-of a mask's fill or stroke. More is revealed in the center of the image, because the mask's opacity is higher (100%). The opacity of the ellipse's fill is 100% and the opacity of the stroke is 30%. In the example below, we've used an ellipse with an outside stroke as our mask. Add fills, strokes, and gradients with varying opacity.Apply drop and inner shadows to create depth.

Use layer blur effects to replicate feathering.

Import existing PNGs, GIFs, and WebP files with transparency (alpha channels).

This means we can utilize blurs and opacity in our masks: The higher the opacity, the more that is revealed. When working with alpha masks, masks are applied based on the opacity of the mask.

Alpha channels represent the degree of transparency, or opacity, in a color, image, or object. If the mask sits above the image, it won't be masked.Īll masks in Figma support alpha channels. If the mask sits below the image of the person on the z-axis, it'll successfully mask that image. In the example below, the purple ellipse is acting as the mask. Learn more about parent, sibling, and child relationships →

A frame or component with clip content on.The mask applies to all siblings above it until it reaches: Masks are positioned below masked layers on the z-axis. 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. When you use a layer as a mask, a mask object is created, which includes the mask and any layers it is masking. How masks workĪny layer can be used as a mask, including vector shapes, text layers, images with transparency channels, groups, and more. This allows you to preserve the concealed areas without the need to trim them down to fit. Since no portion of masked layers are modified or deleted in this process, masks are a non-destructive action. 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. It's like placing a photograph inside a picture frame with a small opening.

Use masks to show specific areas of objects while concealing the rest. Anyone with edit access to a Figma design file can use masks

Paint 3d grid