Masking in Figma is a fundamental vector editing technique that allows you to hide portions of an image or shape, revealing only the area contained within a specific boundary. Think of it as a digital stencil, where the mask acts as the cutout and the content behind it is what ultimately gets displayed to the viewer. This functionality is essential for creating clean, professional visuals, as it enables designers to fit photos perfectly into frames, create complex iconography, and build intricate visual compositions without permanently altering the original asset.
How Vector Masks Work
The core principle of masking relies on the relationship between the mask layer and the content layer beneath it. In Figma, any shape or vector path can serve as a mask, and it will clip everything inside its borders. The mask itself is not visible; only its boundary defines what is shown. This non-destructive workflow is a significant advantage, as you can adjust the mask or the content independently, allowing for flexible edits long after the initial design is completed.
Creating a Basic Mask
To create a mask, you need at least two layers: a base layer (the image or color) and a top layer (the mask shape). Select both layers and either right-click to choose "Mask" or use the quick shortcut Cmd/Ctrl + Alt + M. The selected area of the top layer becomes the transparent zone, while the content within that area reveals the layer below. Outside the boundary, the content is completely hidden, resulting a clean, defined composition.
Advanced Techniques and Use Cases
Beyond simple image cropping, masking unlocks a world of creative possibilities. Designers often use complex shapes to create realistic device mockups, such as placing a screenshot inside a smartphone frame. By using a mask that matches the screen's exact curvature and bezel, the design appears as if the image is truly rendered on the device, greatly enhancing the realism of the prototype.
Gradient Fades: Apply a linear or radial gradient mask to an image to create a soft, vignette effect or a smooth fade-out at the edges.
Texture Overlays: Use a textured pattern as a mask to apply a grunge or paper effect to text or background elements.
Icon Styling: Combine boolean operations with masking to create custom icons where a specific shape intersects with a brand logo.
Editing and Refining
One of the most powerful aspects of Figma masking is the ease of refinement. If your mask boundary isn't perfect, simply double-click the mask layer to enter isolation mode and adjust the vector points using the regular editing tools. You can move the mask, scale it, or even change its shape entirely, and the clipped content will update instantly to match your new boundary definition.
Best Practices and Limitations
To ensure a smooth workflow, it is best practice to keep your mask layers directly above the content they are clipping. Naming the resulting component clearly, such as "Mask: [Content Name]," helps maintain organization in complex files. Be aware that while Figma supports masking with multiple layers, the standard behavior uses the topmost layer as the mask, so layer order is critical to achieving the desired result.
Currently, there are some limitations regarding video content, as masks on embedded videos may not behave identically to raster or vector graphics. For static imagery and UI elements, however, masking remains the most efficient method for controlling visibility. By mastering this tool, designers can elevate their precision and produce visuals that are both technically accurate and visually compelling.
