How to Mask in Figma — Clipping Masks, Image Masks & Mask Types

You want a circular avatar, a star-shaped crop, or to drop a photo into the shape of some text — and then you go looking for a “mask” button in Figma and can’t find one. Figma has no dedicated mask tool in the toolbar. Instead, masking works through layer order plus “Use as mask”, which can feel unintuitive at first.

This guide walks through masking in the order you’ll actually need it: the basic shape mask for cropping an image → the three mask types (alpha, vector, luminance) → using text and groups as masks → releasing and editing → troubleshooting. At the end, we cover what to do when masks break after migrating from Adobe XD or Illustrator.

What you’ll learn

• How to crop an image to a shape with a basic mask
• The difference between the alpha, vector, and luminance mask types
• How to use images, text, and groups as masks
• How to release and edit a mask
• When to use a mask vs Crop vs Clip content
• Why masks can break when migrating from XD or Illustrator, and how to prevent it

⭕ Crop an image with a shape — the basic mask

The most common use is cropping an image to a circle or any other shape — a round profile photo, a star-shaped cutout, or a crop that follows a logo. All of these are done with a mask.

Here are the steps:

1. Draw the mask shape. Create the shape you want to crop to — a circle, rectangle, star, and so on.
2. Place the shape below the image. In the layer order, put the mask shape below the image it will mask. In Figma, the mask is the bottom layer of the selection.
3. Select both and apply the mask. Select the shape and the image together, then choose More options → Use as mask in the right sidebar. The shortcut is ⌃ + ⌘ + M on macOS and Ctrl + Alt + M on Windows.
4. The image is cropped to the shape, and the layers are grouped into a mask group. In the Layers panel, the mask gets a mask icon and the masked layers show an upward-facing arrow.

🎚️ Mask types — alpha, vector, luminance

Figma masks come in three types, which change what the mask layer uses to decide what shows and what hides. A new mask starts as alpha (the default).

To switch types, select the layer being used as the mask and open the dropdown in the “Mask” section of the right sidebar. Hover over each option to preview the effect on the canvas before committing.

When in doubt, leave it on the default alpha — it handles shape cropping in almost every case. Reach for luminance when you want a smooth gradient fade, and vector when you want only the outline of a semi-transparent shape.

🖼️ Use images, text, and groups as masks

Masks aren’t limited to shapes. In Figma, any layer can be a mask — vector shapes, text layers, images with a transparency channel, groups, and more.

• Text masks. To pour an image into the shape of letters, use a text layer as the mask. A large headline filled with a landscape photo is a classic example. Place the text below the image, select both, and run “Use as mask.”
• Image masks. When you use an image with transparency (such as a transparent PNG) as a mask, the upper layer shows through only the opaque parts.
• Group masks. Group several shapes and use the group as a mask to crop to a more complex outline.

✂️ Release and edit a mask

You can release a mask at any time to get your independent layers back.

• Release it. Select the mask and choose Remove mask from the right-click menu, click the release button in the right sidebar, or use the same shortcut as creation. The shape and image return to independent layers.
• Edit the shape. Select the mask shape inside the mask group to adjust its size or form after the fact. Because the mask and the masked layers move and resize independently, you can keep the image in place and reposition only the crop shape.

🗺️ Mask vs Crop vs Clip content

When you want to “crop an image,” Figma offers three related but distinct approaches. Pick by what you’re trying to do.

For the rectangular Crop mode and Clip content steps, see How to Crop an Image in Figma. If you instead want to keep a subject and remove its background, that’s a different task — see How to Remove a Background in Figma.

🔧 When a mask doesn’t work

• The image disappears or goes blank. The mask shape and image are probably in the wrong order. The mask is the bottom layer of the selection, so move the shape below the image and apply it again.
• The mask moves but the image doesn’t (or vice versa). That’s by design. The mask and the masked layers move independently, so select the whole mask group when you want to move them together.
• The visible area isn’t what you expected. The mask type may not match your intent. A shape with a gradient, for example, will reflect its semi-transparent areas under the default alpha type. Switch to vector if you want only the outline (see Mask types).

🔄 When masks break after migrating from XD

When you bring clipping masks made in Adobe XD or Illustrator into Figma, the mask structure can break — the image isn’t cropped, or extra areas show through. That’s because each tool represents masks differently, and a plain copy-paste or a generic conversion doesn’t preserve the relationship.

When migrating an XD design to Figma, a dedicated tool that keeps mask and transparency structure intact can save you from rebuilding by hand. Pixel Fine Converter reads XD files and maps masks and transparency onto Figma’s mask structure. With the Free version, you can check how faithfully your own file converts before deciding.

❓ FAQ

Q: Does Figma have clipping masks like Illustrator?

Yes. What Illustrator and XD call a clipping mask is simply called a “mask” in Figma. It shows the upper layer only through the shape of the bottom layer — the concept is the same.

Q: What’s the keyboard shortcut for a mask?

It’s ⌃ Control + ⌘ Command + M on macOS and Ctrl + Alt + M on Windows. The same shortcut both creates and releases a mask.

Q: Can I fill text with an image?

Yes. Use a text layer as the mask, place an image above it, and run “Use as mask” to pour the image into the letter shapes.

Q: Does releasing a mask restore the image?

Yes. Running “Remove mask” returns the mask shape and the masked layers to independent layers.

Wrapping up

A Figma mask is a window in the shape of the bottom layer of your selection. Once you’ve got the basic shape mask down, you can switch between the alpha, vector, and luminance types by purpose and move on to using text and groups as masks. Keep the roles separate — Crop for rectangles, Clip content for frame overflow — and cropping in Figma is much less confusing.

When masks break after migrating from XD or Illustrator, a tool that preserves the structure is the shortcut. Try the Free version of Pixel Fine Converter to check how faithfully your own file converts.

Related pages

• How to Crop an Image in Figma — Crop mode and Clip content
• How to Remove a Background in Figma — separating background removal
• Converting XD shapes to Figma — shape and path conversion details
• How to Vectorize an Image in Figma — turn an image into editable vectors
• XD → Figma migration playbook — the full migration workflow