How to Mask in Figma: Essential Design Techniques

Masks in Figma run backwards from what most people expect. The shape doing the clipping sits underneath whatever it clips, which is the exact opposite of Adobe Illustrator’s convention, and Figma’s documentation says so plainly (Figma, 2026). Anyone with edit access can apply one, on any plan, from the same right sidebar that holds clip content and boolean group.

Nothing gets destroyed along the way. That’s the whole point of the feature.

What Is a Mask in Figma?

Nothing about the masked layer gets edited. Move the mask, hide it, or delete it six months later, and the full image or shape is still sitting there exactly as you placed it, vector points and pixels intact. Figma calls it non-destructive layer clipping, and the term is accurate: one layer’s shape, opacity, or brightness decides which parts of the layers around it stay visible.

People confuse it with two things that aren’t reversible at all. Deleting a layer removes the content permanently. Toggling visibility off just hides a layer with no clipping happening whatsoever, which sounds obvious but I’ve watched people use it as a poor man’s mask and then wonder why nothing lines up.

Cropping is the third one, and it deserves its own note. Cropping an image in Figma throws away the pixel data outside the trim line for good. A mask keeps every pixel and just controls what shows.

No plan gate on any of this. Free, Professional, Organization, doesn’t matter, as long as you have edit access to the file (Figma Help Center).

Figma Mask vs Clip Content vs Boolean Group: Which Should You Use?

All three hide or reshape parts of a layer. They solve different problems, and picking the wrong one is where most of the frustration comes from.

Clip content is just a checkbox on a frame or group. Not a layer action, not a separate object. Turn it on and anything spilling past the frame’s edges disappears from view while the frame stays a plain rectangle. Cheap, fast, and limited to rectangular boundaries.

Boolean groups are a different animal. Union merges every selected shape into one. Subtract cuts the top shape out of the shape below it. Intersect keeps only the overlapping area, and Exclude keeps everything except that overlap. Great for building icons. Useless for clipping a photo or a paragraph of text, since Figma’s documentation restricts boolean operations to shape layers rather than sections or frames.

So the mask is the only one of the three that clips to any shape, image, or piece of text without permanently flattening something. That flexibility starts to matter once you’re working inside auto layout frames, which already clip by default and can make a manual mask behave in ways you didn’t ask for.

If you’ve gone hunting for the boolean icons and found nothing, they’re not gone. Figma buried them in a nested menu during the UI3 interface overhaul that finished rolling out to every account on October 10, 2024 (Figma, 2024).

What Layers Can Be Used as a Mask in Figma?

Figma is loose about this, more so than you’d assume. Per the Help Center, practically any layer type qualifies:

• Vector shapes drawn with the pen, ellipse, rectangle, or polygon tools
• Text layers, using the glyph outlines of whatever font is applied
• Images that carry an alpha channel, like PNG, GIF, or WebP files
• Groups and boolean groups, treated as a single mask object

Text as a mask source has one gotcha. Confirm the font is actually available in the file before you apply anything, because adding fonts to your Figma library ahead of time saves you from a mask that quietly falls back to a system font and reshapes your whole design.

Which Drawing Tool Should You Use for a Custom Mask Shape?

The pen tool handles freeform, irregular outlines that follow a photo’s natural edges. It’s slower and I only reach for it when a rectangle genuinely won’t do.

For a circular or oval crop, the ellipse tool is the fastest route, and it’s what everyone uses for profile pictures. Rectangles cover card thumbnails and hero images, especially once you start rounding those corners rather than leaving them square.

None of these tools behave differently once they’re masking something. A shape is a shape. The mask command has no idea which tool drew it.

What Is the Keyboard Shortcut to Apply a Mask in Figma?

Select the mask shape together with the layers it should clip, then hit Control, Command, M on a Mac or Ctrl, Alt, M on Windows.

Right-click works too, if shortcuts aren’t your thing.

1. Select the layer you want to use as the mask, along with everything it should clip
2. Open the right sidebar and click More options
3. Choose Use as mask from the dropdown, or use the keyboard shortcut instead
4. Figma groups the selection into a single mask object automatically

Selected one layer rather than a group? Figma skips the dropdown and puts Use as mask directly in the right sidebar.

Worth pinning somewhere until it’s muscle memory:

• Mac shortcut: Control, Command, M
• Windows shortcut: Ctrl, Alt, M
• Menu path: right sidebar, More options, Use as mask
• The mask shape has to sit below the layers it clips

That last one causes more support threads than everything else combined, so it gets its own section below.

Once applied, a small mask icon shows up in the layers panel next to the shape, with an upward arrow marking every layer being clipped beneath it (Figma Help Center). If none of this sticks right away, Figma’s full shortcut list is worth keeping open in a second tab.

How Does Layer Order Affect Masking in Figma?

Below, not above. The mask reaches upward through the stack and clips every sibling layer sitting on top of it.

Its reach isn’t infinite though. It stops dead when it hits another mask or mask object further up, when it hits its own parent frame or group, or when it runs into a frame or component that already has clip content switched on.

Which is where masking and clip content start arguing with each other. A frame with clip content enabled is a hard stop for a mask’s reach, the same way it’s a hard stop for anything else spilling past its edges.

One more structural detail that saves confusion later: mask objects and the layers they clip are siblings, not parent and child. That’s why moving or resizing one never drags the other along with it. Nudge the mask shape and the masked image stays exactly where it was.

What Happens to a Mask Shape’s Fill and Stroke After Masking?

Fill and stroke stop rendering the second you apply the mask. The shape hasn’t gone anywhere, though. Its outline keeps defining the clip boundary and it stays fully editable.

How much shows through depends on the mask type.

Alpha is the default, and it’s the one that lets a blurred edge or a soft gradient fade an image out gradually instead of cutting it off with a hard line. Luminance is the one nobody remembers exists until they need a photo to fade based on brightness values.

Switch types from the dropdown in the Mask section of the right sidebar. Figma previews each option live as you hover, which is genuinely handy when you’re not sure what you want.

Since the shape stays editable, adjusting its corner radius, dragging a path point, or building a gradient fill into it updates the clipped result on the spot. No reapplying anything.

How Do You Mask an Image in Figma?

Drop the image on the canvas, draw a shape over the part you want to keep, send that shape behind the image, apply the mask.

1. Place the image on the canvas
2. Draw the shape you want to mask with, using the ellipse, rectangle, or pen tool
3. Send the shape behind the image, since the mask has to sit below what it’s clipping
4. Select both layers and press the mask shortcut, or right-click and choose Use as mask

The everyday version of this is a photo dropped into a circle or a rounded rectangle. Profile pictures, product thumbnails, avatar stacks.

Resize the image afterward and the shape stays put. Resize the shape and the image stays put. They move independently, like any other mask pair, which is either convenient or annoying depending on what you’re trying to do.

How Do You Mask Text With an Image in Figma?

Type the headline first. Then put the image above it in the stack, in front of the text. Select both, apply the mask, and the image only shows through the letterforms.

• Use a bold, wide typeface. Thin strokes leave almost no image visible and the effect just reads as messy
• Send the text behind the image before masking, since the mask always sits below whatever it’s clipping
• Flatten nothing beforehand, because masking works on live editable text with no conversion step

The result follows the text baseline in a straight line. If you want letters curving along a path instead, that’s a different technique entirely, and typing along a path needs setting up before you mask, not after.

Double-check which layer is lower. The text has to be underneath the image, not the reverse, or the mask won’t catch what you expect.

How Do You Mask Multiple Layers in Figma?

Select the mask shape along with every layer it should affect and apply the mask command once. Figma bundles the whole selection into a single mask object, with the shape at the bottom clipping everything above it.

• Group the target layers first if they need their own internal order preserved
• Place the mask shape below that group, not below each layer individually
• Select the mask and the group together, then apply

Adding one more layer later isn’t the drag-and-drop you’d hope for. Designers on Figma’s own community forum have flagged that there’s still no way to draw a new shape directly inside an existing mask group. You draw it somewhere else, then drag its layer down into the mask object (Figma Community, October 2024).

Sometimes the faster fix is just breaking the whole thing apart. Ungrouping in Figma separates the mask from what it’s clipping so you can work on either piece alone, then pair them again.

Can You Nest One Mask Inside Another?

Yes. A mask object can sit as one of the layers being clipped by a different mask further down the stack.

That inner mask object is one of the boundaries that stops an outer mask’s reach, which is the same layer-order rule from earlier showing up again.

• An outer mask won’t clip past an inner mask object it runs into
• Each mask object manages its own siblings independently
• It works fine, but every extra level adds another group to keep track of in the panel

My honest take: two levels is usually where it stops being worth it. Past that, finding the layer you actually want to edit takes longer than rebuilding the thing.

How Does Masking Work Inside Components and Auto Layout?

A component instance inherits whatever mask setup exists on its main component, same as it inherits any other layer structure. Nothing special happening there.

Auto layout frames carry the identical Clip content toggle as a regular frame. It isn’t a separate setting, despite how often people look for one.

New frames, auto layout included, now start with Clip content unchecked. By September 2025, enough designers had hit content bleeding past frame edges unexpectedly that some were publicly asking Figma to flip that default back (Figma Community, 2025). I’m with them on that one.

The default matters for masking because a frame with Clip content on blocks any mask trying to reach through it. If you’re building repeatable pieces with masked imagery inside them, look at how components in Figma handle overrides before standardizing a masked layout across a library.

When Does Masking Not Work in Figma?

It fails for specific, repeatable reasons. Not bad luck.

The frame-and-component case is the one that gets everybody. A frame automatically creates a mask boundary around itself once Clip content is on, so masking that frame directly gets blocked by its own setting (Figma Community, May 2024). Wrap the content in a plain group first and the conflict disappears, since a group has no clip content property to fight with.

Figma gives you a way to see all of this. Turn on View, then Mask outlines, and every mask boundary in the file gets outlined in green (Figma Help Center).

Small catch there: if every layer inside a mask object is hidden or sitting at 0 percent opacity, the outline won’t render either. Nothing left to trace.

Complex masks built from stacked union or subtract operations also get hard to click into on the canvas. Go through the layers panel instead of squinting at the artboard trying to hit the right sub-shape.

How Do You Remove a Mask in Figma?

Click the mask icon in the right sidebar to toggle it off. Or right-click the mask object and choose Remove mask. Or press the same shortcut you used to apply it.

That third one catches people off guard. Control, Command, M on a Mac and Ctrl, Alt, M on Windows aren’t apply-only commands, they’re toggles that work in both directions.

Whatever was hidden reappears instantly, right where it was left.

This is not the same as pressing undo in Figma, which walks backward through your whole edit history rather than breaking this one pairing.

Removing a mask only unpairs the shape from its target. The shape stays on the canvas with its fill and stroke restored, ready to delete or reuse.

How Does Figma’s Mask Compare to Masking in Photoshop and Illustrator?

All three hide part of a layer without deleting anything. The mechanics underneath don’t line up at all.

Figma works on shapes, text, images, and groups without ever leaving the file, and you can switch between alpha, vector, and luminance types with nothing to repaint. Its one rule that catches Illustrator refugees is the stacking order, since the mask goes below the content it clips.

Photoshop takes a completely different approach. You paint onto a grayscale channel attached to the same layer, where black conceals, white reveals, and gray partially hides (Adobe Help Center). Built for pixel-level photo compositing, not vector UI work, and it shows the moment you try to use it for interface design.

Illustrator’s clipping masks feel familiar to anyone with print or logo experience. The clipping shape sits on top of the stack, the reverse of Figma, and only vector paths, compound shapes, text, or groups of those can serve as the clip shape (Adobe Community).

If you bounce between all three in a week, the thing to hold onto is where the mask lives. Figma below, Illustrator above, Photoshop ignoring z-order entirely by painting onto the layer’s own grayscale channel.

FAQ on Masking in Figma

What does the mask indicator look like in the layers panel?

The mask layer shows a small crescent-shaped icon beside its thumbnail, with a thin arrow pointing upward through every layer it clips. Hovering over that arrow highlights the whole mask object at once in the layers panel.

How do you export a layer that has a mask applied?

Select the mask object itself, not just the mask shape, and export normally. Figma renders the clipped result exactly as it appears on the canvas, in PNG, JPG, SVG, or PDF, with the hidden portions left out of the file entirely.

Are there plugins that help with masking in Figma?

Yes. Plugins like Remove BG strip a photo’s background before you mask it, saving the step of drawing a precise vector outline by hand. Search Figma Community for mask-focused plugins covering batch cropping, image tracing, and shape libraries built for clipping work.

Does masking affect prototyping or interactions?

Not directly. A mask only changes what’s visible, so prototyping connections on the masked layer or its target still fire normally. The one catch: anything hidden by the mask can’t be clicked, since a hidden area has nothing on screen to tap.

Does a mask affect file size or performance?

A single mask adds almost no weight, since Figma stores it as a layer property, not a new image. Heavy nesting or dozens of boolean-shaped masks in one file can slow canvas rendering, more a layer-count issue than a masking one.

When a Masked Element Should Become a Component

Once the same masked element shows up repeatedly, a profile photo, an icon tile, a product thumbnail, converting it to a component pays for itself. One edit updates every copy.

• Repeated masked elements: convert to a component
• One-off decorative masks: leave them as loose mask objects
• Masks feeding export assets: recheck crop bounds before publishing

The conversion isn’t free. Resizing one masked instance independently stops being simple once it’s part of a component, because the change now competes with whatever override that instance already carries.

Teams running a large library get consistency and lose per-instance flexibility. Somewhere around five screens using the same masked shape, that trade starts making sense. Below that, I’d leave it alone.

Figma’s own best practices for building components go deeper on this, including when an instance override beats a new component outright.