How to Cut a Shape in Figma: Simple Editing Guide

You’ve got two shapes. You need one to punch a hole through the other. Figma makes this surprisingly simple once you know where to look.

Learning how to cut a shape in Figma opens up icon design, custom graphics, and complex vector editing. The Subtract boolean operation handles this in seconds.

This guide walks through the exact steps to cut shapes using boolean operations. You’ll learn proper layer order, keyboard shortcuts, and how to adjust cuts after applying them.

Stuck with shapes that won’t subtract correctly? We cover that too. Five steps, two minutes, and you’ll cut shapes like you’ve done it for years.

How to Cut a Shape in Figma

Cutting a shape in Figma removes a portion from one shape using another shape through the Subtract boolean operation.

The top layer acts like a cookie cutter. It punches through whatever sits beneath it on the canvas.

Users need this when creating custom icons, building complex vector graphics, or removing sections from design elements.

This guide covers 5 steps requiring about 2 minutes. You’ll need Figma version 116 or later (browser, desktop app, or mobile).

Prerequisites

Before you start cutting shapes, make sure you have these ready:

• Figma account (free or paid plan works)
• Figma desktop app, browser version, or mobile app installed
• Two or more shapes already on your canvas
• Can edit access to the file you’re working in
• Basic familiarity with shape tools (Rectangle, Ellipse, Polygon)

Time needed: approximately 2 minutes from start to finish.

The boolean operations menu requires at least two selected layers. Single shapes won’t trigger the subtract function.

Step One: How Do You Create the Base Shape?

Draw the shape you want to cut from using the shape tools in the top toolbar. Press R for rectangle, O for ellipse, or access the dropdown for polygon and other options.

Action

Tool location: Top toolbar > Shape tools dropdown (rectangle icon) or keyboard shortcuts R, O, L

Click and drag on the canvas to draw your base shape. Hold Shift while dragging to constrain proportions (perfect circle or square).

Your shape appears in the layers panel on the left side. This bottom layer will receive the cut.

Purpose

The base shape determines your final output. Whatever you draw here becomes the object that gets a hole punched through it.

Layer order matters. The subtract operation removes the top shape from the bottom shape, not the other way around.

Step Two: How Do You Position the Cutting Shape?

Create a second shape that will act as your cutter. Position it over the area you want to remove from the base shape.

Action

Tool location: Same shape tools dropdown or press R, O, L for quick access

Draw your cutting shape directly over the base shape. The overlapping area defines what gets removed.

Use the move tool (V) to reposition. Hold Shift while moving to constrain to horizontal or vertical movement.

Check alignment using Smart Guides (they appear automatically when edges or centers align).

Purpose

Precise positioning controls exactly where the cut happens. The cutting shape’s position relative to the base shape determines the final result.

You can rotate in Figma to angle your cutting shape before applying the boolean operation.

Step Three: How Do You Select Both Shapes?

Select both the base shape and cutting shape together before accessing the boolean operations menu.

Action

Selection method: Click first shape, then Shift + Click second shape

Alternative: Click and drag a selection box around both shapes on the canvas.

The layers panel shows both shapes highlighted when selected correctly. You’ll see “2 layers selected” in the right sidebar.

Purpose

Boolean operations require multiple selected layers. The subtract function stays grayed out with only one shape selected.

Selection order doesn’t affect the result. Layer order in the layers panel determines which shape cuts from which.

Step Four: How Do You Apply the Subtract Operation?

Access the boolean operations menu and select Subtract to cut the top shape from the bottom shape.

Action

Exact path: Top toolbar > Boolean operations icon (two overlapping squares) > Subtract

Keyboard shortcut: Cmd + Option + S (Mac) or Ctrl + Alt + S (Windows).

Right-click alternative: Select shapes > Right-click > Boolean operations > Subtract selection.

The canvas shows your shape with the cutout applied immediately. A boolean group appears in the layers panel labeled “Subtract.”

Purpose

The subtract operation performs non-destructive editing. Original shapes remain accessible inside the boolean group for later adjustments.

Step Five: How Do You Adjust the Cut After Applying?

Modify the cut position, size, or shape without starting over by editing layers inside the boolean group.

Action

Selection method: Double-click the boolean group to enter it, then click individual shapes to select them.

Move the cutting shape to reposition the hole. Resize it to make the cutout larger or smaller.

Changes update in real-time on the canvas. Press Escape or click outside the group to exit editing mode.

Purpose

Non-destructive boolean operations let you iterate without recreating shapes. Adjust until the cut looks right for your user interface design.

Verification

Confirm your shape cut worked correctly with these checks:

• Visual inspection shows the cutout in the expected position
• Layers panel displays a boolean group with “Subtract” label
• Double-clicking the group reveals both original shapes inside
• The cutting shape remains editable (move, resize, rotate)

Place a colored rectangle behind your shape. The background should show through the cut area.

Alternative Method: Masking

Two approaches exist for cutting shapes in Figma. Each serves different purposes.

Subtract Method

• Time: 30 seconds
• Result: Permanent cutout in vector shape
• Best for: Icons, custom shapes, removing portions from vectors

Mask Method

• Time: 20 seconds
• Result: Non-destructive clipping
• Best for: Images, preserving original content, easier reversibility

Choose Subtract when cutting vector shapes for icon design. Choose masking in Figma when clipping images or when you need quick reversibility.

Masks hide content outside the mask shape. Subtract removes the overlapping area entirely.

Troubleshooting

Issue: Subtract Removes the Wrong Shape

Solution: Layer order determines which shape cuts from which. The top layer always cuts from the bottom layer.

Fix: Select the cutting shape in the layers panel, drag it above the base shape, then reapply Subtract.

Issue: Cannot Find Boolean Operations Menu

Solution: In Figma’s UI3 interface, click the two overlapping squares icon in the top center toolbar.

Alternative: Right-click your selected shapes and choose “Boolean operations” from the context menu.

If the menu appears grayed out, check that you have at least two shape layers selected. Frames and sections don’t support boolean operations.

Issue: Cut Appears Inverted

Solution: The shapes are in wrong order. Double-click the boolean group to enter it.

Swap the layer positions by dragging one shape above or below the other in the layers panel.

Issue: Cannot Edit Shapes After Cutting

Solution: You may have flattened the boolean group. Check if the layers panel shows “Vector” instead of “Subtract.”

Flattening is permanent. Undo in Figma with Cmd/Ctrl + Z if recent, otherwise recreate the shapes.

Related Processes

Continue building your Figma shape editing skills with these related techniques:

• How to ungroup in Figma to break apart boolean groups
• How to make components in Figma for reusable cut shapes
• How to scale in Figma to resize boolean groups proportionally
• How to round corners in Figma before or after cutting
• How to make a grid in Figma for precise shape alignment

Boolean operations work with Union, Intersect, and Exclude too. Using components in Figma lets you create reusable shapes with consistent cuts across your design system.

FAQ on How To Cut A Shape In Figma

What is the Subtract boolean operation in Figma?

Subtract removes the overlapping area of one shape from another. The top layer cuts from the bottom layer, creating a hole or cutout. It’s one of four boolean operations alongside Union, Intersect, and Exclude.

Where do I find boolean operations in Figma?

Click the two overlapping squares icon in the top center toolbar. You can also right-click selected shapes and choose “Boolean operations” from the context menu. Keyboard shortcut for Subtract: Cmd + Option + S (Mac) or Ctrl + Alt + S (Windows).

Why is my Subtract option grayed out?

You need at least two shape layers selected. Boolean operations don’t work on single shapes, frames, or sections. Select multiple vector shapes or paths, then the Subtract option becomes active in the toolbar.

Does layer order matter when cutting shapes?

Yes. Layer order determines which shape cuts from which. The top layer always cuts from the bottom layer. Rearrange layers in the layers panel before applying Subtract if your cut appears inverted.

Can I edit shapes after applying Subtract?

Boolean operations are non-destructive. Double-click the boolean group to access individual shapes inside. Move, resize, or blur in Figma any element. Changes update in real-time on the canvas.

What’s the difference between Subtract and Mask?

Subtract removes the overlapping area permanently from vector shapes. Cropping in Figma with masks hides content outside the mask shape without removing it. Use Subtract for icons, masks for images.

Can I cut multiple shapes at once?

Select all shapes you want to use as cutters plus your base shape. Apply Subtract. All top layers cut from the bottom layer simultaneously. The result creates one boolean group with multiple cutouts.

How do I flatten a boolean group?

Right-click the boolean group and select “Flatten.” This converts the group into a single vector path. Warning: flattening is permanent. You lose the ability to edit individual shapes inside the group afterward.

Why did my cut appear in the wrong place?

Your cutting shape wasn’t positioned correctly over the base shape. Only the overlapping area gets removed. Double-click the boolean group, reposition the cutting shape, and the cut updates automatically.

Can I use text with boolean operations?

Yes. Figma supports boolean operations on text layers. Select your text and a shape, then apply Subtract. The text cuts through the shape. Works great for creating knockout text effects in designing websites in Figma.

Conclusion

Knowing how to cut a shape in Figma transforms your vector editing workflow. The Subtract boolean operation handles everything from simple cutouts to complex icon creation.

Layer order controls the result. Top shape cuts from bottom shape. Always.

Non-destructive editing means you can adjust cuts anytime. Double-click the boolean group, reposition elements, and watch changes happen in real-time on the canvas.

The shape manipulation techniques covered here apply to UI design projects, custom graphics, and design system components. Master these pathfinder-style tools and you’ll build shapes that would take twice as long in other software.

Start with two shapes. Apply Subtract. That’s the foundation.

From here, explore Union, Intersect, and Exclude to expand your design system in Figma. Each boolean operation opens new possibilities for shape combination and custom vector graphics.