Masking and Clipping in Figma

Key Concepts

• Masking
• Clipping
• Using Masks and Clips in Design Critiques

Masking

Masking in Figma allows you to hide parts of an object or group of objects based on the shape of another object. This is particularly useful for creating complex shapes or revealing specific areas of an image. To apply a mask, select the object you want to mask and the mask object, then right-click and choose "Use as Mask."

For example, if you have a photo and want to display only a circular portion of it, you can create a circle shape and use it as a mask. The photo will be cropped to fit the circular shape, hiding the rest of the image.

Clipping

Clipping in Figma is similar to masking but is applied to groups or frames. It allows you to hide parts of a group or frame that fall outside the boundaries of another object. To apply a clip, select the group or frame you want to clip and the clipping object, then right-click and choose "Use as Clip."

For instance, if you have a group of elements that you want to fit within a rectangular frame, you can use the frame as a clip. Any parts of the group that extend beyond the frame's boundaries will be hidden, ensuring a clean and contained design.

Using Masks and Clips in Design Critiques

During design critiques, masking and clipping can be powerful tools for highlighting specific areas of your design. For example, you can use a mask to focus on a particular element within a complex layout, making it easier for reviewers to provide feedback. Similarly, clipping can be used to isolate a section of your design, ensuring that only relevant parts are visible during the critique.

For instance, if you are critiquing a user interface with multiple components, you can clip the interface to a specific section, such as a navigation bar. This allows reviewers to concentrate on that section without being distracted by other elements.

Examples and Analogies

Think of masking as using a stencil to paint a specific shape. Just as the stencil blocks out areas you don't want to paint, masking in Figma blocks out areas you don't want to display. For example, using a star-shaped mask on an image would reveal only the star-shaped portion of the image.

Clipping can be compared to cutting out a piece of paper with a shape. Anything outside the shape is discarded, leaving only the part that fits within the shape. For instance, clipping a group of elements to a circular frame would result in only the circular portion of the group being visible.