Figma Masks & Clipping Guide (2026)

Quick answer

In Figma, a mask is a shape that defines which part of layers below it stay visible. Select the mask shape and the content layers, then use Use as mask (or ⌃⌘M on Mac). For simple rectangular crops, turn on Clip content on a frame instead—faster and easier for engineers to read. Use masks for circles, custom silhouettes, and gradients; use clip content for cards and scroll regions. Always check exports on masked groups before handoff (export production assets). For imported artwork, pair this guide with Illustrator SVG cleanup and the Figma guides hub.

Who this is for

UI designers cropping avatars, hero photos, and map thumbnails.
Marketing designers building social templates with non-rectangular frames.
Developers wondering why a “simple image” exported as five layers.

Mask vs clip content vs boolean (pick the right tool)

Technique	What it does	Best for	Handoff note
Clip content (frame toggle)	Hides anything outside the frame bounds	Cards, modals, carousels, scroll areas	Dev sees one frame + children
Use as mask	Shape alpha defines visibility	Circular avatars, custom cutouts	Export as flattened asset or document mask rules
Boolean subtract/intersect	Permanent vector edit	Icons, logos, one-off shapes	Clean SVG; not for swapping photos
Fill image on shape	Image as fill on rectangle/ellipse	Simple thumbnails	Easiest for “image in a box”

Verdict: if the crop is a rectangle, use a frame with clip content. If the crop is a circle or organic shape, use a mask. If the image never changes, a fill is enough.

Clip content on frames (the default for UI)

Draw a frame at the target size (e.g. 320×180 for a card image).
Place the image inside; scale with Fill or Crop in the image fill panel.
Select the frame → enable Clip content in the right panel (or double-click into the frame and resize the image).
Name the frame Media / Card / 16:9 so instances stay recognizable in components and variants.

Common mistake: masking when clip content would do—masks add a layer engineers may not expect in CSS (they will often use overflow: hidden on a div instead).

When clip is not enough: rounded corners only clip if the frame has corner radius. For a circle avatar, use a mask or an elliptical frame with equal width/height.

Create a circular image mask (avatars)

Draw an ellipse (hold Shift for a perfect circle) at the avatar size—48×48, 64×64, etc.
Place the photo above the ellipse in the layers panel (or below, depending on workflow—Figma masks the layers below the mask shape when using “Use as mask”).
Select the image layer first, then the ellipse, or select both and use Use as mask from the context menu.
Confirm the mask icon appears on the ellipse layer.

Workflow tip: build one Avatar / Photo component with the mask inside so product screens use instances, not one-off masks per user.

Export tip: select the masked group → export PNG @2x for raster avatars; for SVG icons with masks, flatten or outline strokes before export (fix blurry exports).

Alpha masks and gradients (soft edges)

Figma supports alpha from the mask shape’s fill opacity and gradients:

Create a rectangle the size of the hero.
Apply a linear gradient from white to transparent on the mask shape (white = visible, transparent = hidden in standard mask behavior).
Mask the photo stack beneath for fade-to-background heroes.

Best for: editorial headers, album art fades, and presentation slides (slide decks in Figma).

Watch out: heavy gradient masks are hard to reproduce in code—add a Dev Mode note: “Implement as CSS mask-image or overlay gradient; do not ship flattened 4K PNG unless approved.”

Mask groups and layer order

Figma creates a mask group containing the mask shape and masked layers.

Layer order (typical)	Result
Mask shape on top (mask icon)	Everything below in the group is clipped
Extra layer outside group	Not affected by the mask

Common mistake: the image sits outside the mask group after paste—drag it inside the group or re-apply the mask.

Common mistake: applying a mask to a whole auto layout frame—padding and resizing fight the mask. Mask the media slot only; keep chrome (titles, buttons) outside (Auto Layout patterns).

Masks with components and variants

Put masked media inside the component master, not on the instance, when every variant shares the same crop shape.
Expose instance swap for the image when avatars or product shots change per screen.
For state=hover variants, do not duplicate mask groups—swap fills or nested instances instead (interactive components).

Publishing masked components to a team library? Test that consumers can still swap images without detaching—if not, use component properties for the image layer.

Icons and boolean operations vs masks

For logos and icons, prefer boolean union/subtract on vectors so paths stay editable (logo design workflow).

Use masks for icons only when:

The icon is a photo texture inside a shape.
You are building a one-off marketing asset, not a system glyph.

Imported SVG from Illustrator may arrive with clip paths—clean them in SVG cleanup before adding to a library.

Export and Dev Mode checklist

Check	Why
Export the masked group, not the uncropped image	Prevents wrong assets in ZIP exports
Mark `@2x` for raster UI	Crisp avatars on retina
Note CSS approach in Dev Mode	`border-radius: 50%` vs `mask-image`
Avoid 1px hairline gaps	Align mask and image to pixel grid (fix dimensions)

Link engineers to Dev Mode handoff checklist when masks affect implementation.

Troubleshooting

White fringe or halo on circular avatars

Image was exported with a white background before masking. Re-export source PNG with transparency, or use Remove background plugins sparingly and re-check contrast (accessibility plugins for text on avatars).

Mask stopped working after resize

The image layer may have been detached from the group. Re-enter the mask group or re-apply Use as mask.

Auto layout broke the crop

Move auto layout to the parent card; keep the mask group as a fixed-size child with Fill container only if the grid should scale the media slot (responsive frames).

Export shows full uncropped image

You exported the child image instead of the mask group. Select the parent group with the mask icon.

FAQ

Should I use mask or corner radius on a frame?

Corner radius on a frame + clip content for rounded rectangles. Mask when the silhouette is not a rounded rect (circle, blob, diagonal cut).

Can I mask text?

Yes for display effects; for readable UI, prefer clipping inside a fixed frame or truncate with ellipsis styles in typography and text styles. Masked live text is painful for localization.

Do masks work in prototypes?

Yes—they render in Present mode. Prototype connections should target the frame, not the masked bitmap inside.

How do masks relate to Figma’s image fill “Crop”?

Crop adjusts the fill inside one shape. Mask controls visibility across multiple layers. Use crop for single-layer thumbnails; mask when stacking effects or multiple objects.

Recommended next steps

Standardize avatar and card media as library components with masks or clip frames defined once.
Run export tests at 1x and 2x before sprint handoff.
Document which heroes are CSS-gradient vs flattened asset in Dev Mode.

Masks are a layout and brand tool—use the simplest option that your team can ship and maintain.

Figma Masks and Clipping: A Practical Guide for Images, Icons, and UI Shapes