Subtract in Figma: What It Is and How to Use It

In Figma, Subtract is a boolean operation that removes the overlapping area of one shape from another, creating a new shape with a 'cut-out' effect. It helps designers combine shapes by subtracting one from another to create complex designs easily.

How It Works

Imagine you have two pieces of paper stacked on top of each other. The Subtract operation in Figma works like cutting out the top paper's shape from the bottom paper. The area where they overlap disappears, leaving a hole in the bottom shape.

This lets you create new shapes by removing parts of one shape using another. Figma calculates the overlapping area and subtracts it, so you get a clean, combined shape without manually erasing parts.

Example

This example shows how to subtract a circle from a rectangle in Figma using the boolean Subtract operation.

text

1. Draw a rectangle.
2. Draw a circle overlapping the rectangle.
3. Select both shapes.
4. Click the <strong>Subtract</strong> boolean operation button in the top toolbar.

Result: The circle area overlapping the rectangle is removed, leaving a rectangle with a circular hole.

Output

A rectangle shape with a circular hole where the circle overlapped.

When to Use

Use Subtract when you want to create complex shapes by removing parts of one shape using another. It's perfect for designing logos, icons, or UI elements where you need cut-out effects or negative space.

For example, if you want a button with a notch or a custom shape with a hole, subtracting one shape from another saves time and keeps your design editable.

Key Points

• Subtract removes the overlapping area of the top shape from the bottom shape.
• It creates a new combined shape with a cut-out effect.
• Shapes remain editable and can be adjusted after applying subtract.
• Useful for creating logos, icons, and custom UI elements.

Key Takeaways

Subtract in Figma removes the overlapping area of one shape from another to create cut-out effects.

It helps build complex shapes quickly without manual erasing.

Subtracted shapes remain editable for easy adjustments.

Ideal for logos, icons, and UI designs needing negative space.

Use the Subtract boolean operation by selecting shapes and clicking the Subtract button.