Masking: Hide Pixels Without Deleting Them
A mask is a stencil that hides everything outside its shape without destroying the original image. Use it for circular avatars and rounded photo crops. The hidden portion still exists, so exporting without flattening may bloat the file with invisible pixels.
WHY IT EXISTS: Early digital design tools forced you to permanently crop or erase pixels to fit content into a shape. That meant any late change required starting over with the original asset. Masking was invented to separate the visible window from the content itself, letting designers iterate on layout without destroying source material.
THE MENTAL MODEL: Think of a mask like a paper stencil laid on top of a photograph. The stencil hole determines exactly what you see; everything underneath the solid part is hidden but still physically there. Slide the photograph around and the visible portion changes, yet the stencil shape never changes and the photo remains whole.
HOW IT WORKS: In Figma and similar tools, a mask is a layer that defines the visible bounds for any layers stacked above it. The mask layer's vector path or alpha channel becomes the clipping boundary. When you select a shape and an image and apply the mask command, the image is cropped to the shape in the viewport but remains fully editable underneath. You can adjust the mask shape, reposition the masked content, or release the mask entirely to restore the original uncropped image. Multiple layers can be masked by a single shape, and masks can be nested inside components to create reusable templates.
WHEN TO USE IT: Reach for masking whenever you need non-destructive cropping. Common cases include circular profile avatars from square uploads, text characters filled with imagery, photos constrained inside rounded rectangles, and scrollable content clipped to a frame. It is especially powerful in design systems where the same container must hold variable content across many instances.
WHEN NOT TO USE IT: Avoid masking if you only need a solid color background or a simple border, because an extra mask layer adds unnecessary complexity to the layer tree and can slow prototype performance. Do not use a mask as a permanent replacement for a cropped raster export; if you are handing off a final PNG to a developer and will never edit it again, flatten the crop to keep the file lean and avoid confusion about hidden boundaries.
ONE CANONICAL EXAMPLE: The circular user avatar is the classic mask demonstration. You import a square headshot, draw a perfect circle vector on top, and use the circle as a mask. The photo appears round in the interface, but the underlying square image is untouched. When the user updates their profile picture, you simply swap the image layer while the circular mask stays locked in place, preserving spacing and component structure across every screen in the file.
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.