Masking

Masks clip content to the shape of another element. Use masks to crop images to circles, create text cutouts, and reveal portions of layers.

Mask Types

• Shape Mask (Vector/Clipping) - Clips to a vector shape boundary
• Alpha Mask - Uses opacity/transparency to control visibility
• Luminance Mask - Uses brightness values to control visibility (brighter = more visible)

Creating a Shape Mask

1. Place the content (image, group, etc.) on top
2. Place the mask shape below
3. Select both elements
4. Right-click and choose "Use as Mask"
5. Or press Cmd/Ctrl + Shift + Alt + M

Frame Clipping

Frames automatically clip their children:

• Enable "Clip Content" in frame properties
• Children that extend beyond the frame are hidden
• Useful for cards, image containers, and scrollable areas

Editing Masks

• Double-click mask group to enter edit mode
• Move the content independently of the mask
• Resize or reshape the mask
• Click outside to exit edit mode

Releasing Masks

• Select the mask group
• Right-click and choose "Release Mask"
• Content and mask become separate elements

Alpha/Opacity Masks

Use transparency to create soft-edged masks:

• Create a shape with gradient fill (solid to transparent)
• Apply as mask
• Content fades based on mask opacity
• Great for vignettes and fade effects

Common Use Cases

• Avatar Images - Clip photos to circles
• Image Cards - Rounded rectangle masks
• Text Reveals - Show images through text
• Gradient Fades - Fade images at edges
• Complex Crops - Any shape as clip path

Advanced Mask Controls

Fine-tune your masks with these advanced controls in the Properties Panel:

• Inverted Mask - Flip the mask behavior. What was visible becomes hidden and vice versa. Perfect for creating cutout effects.
• Feather - Add soft, blurred edges to your mask. Values range from 0 (hard edge) to higher values for softer transitions. Creates smooth gradients at mask boundaries.
• Opacity - Control the mask strength. 0 = no effect, 1.0 = full mask. Useful for partially revealing content through a mask.

Luminance Masks

Create masks based on brightness:

• Bright areas of the mask reveal the content
• Dark areas of the mask hide the content
• Perfect for texture overlays and complex effects
• Works well with gradient fills for sophisticated fades

Visual Indicators

Easily identify masks in your design:

• Purple mask icon appears next to mask elements in the Layers Panel
• Hover over the icon to see mask details
• Mask groups are clearly labeled

Tips

• The mask shape can be any vector path
• Use compound paths for masks with holes
• Masks export to SVG as clip-path
• Frame clipping is more performant than masks for simple rectangles
• Combine masks with blend modes for creative effects
• Use inverted masks to create "punch-out" effects
• Feather works best with alpha and luminance masks