Add fills, strokes, and gradients with varying opacity.
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
0 kommentar(er)
