tezvyn:

Boolean Operations: Non-Destructive Shape Math

AI-drafted, machine-checkedSource: help.figma.comintermediate

Boolean operations are non-destructive shape math, combining layers into complex forms while keeping the original pieces editable. Use them for icons and illustrations. The footgun: intersecting non-overlapping shapes makes them disappear until they touch.

WHY IT EXISTS To create complex shapes from simple ones without permanently flattening them. In UI design, you constantly iterate. Non-destructive operations mean you can adjust an icon's components—like the handle of a magnifying glass—without having to start over from scratch.

THE MENTAL MODEL Think of boolean operations as non-destructive shape algebra. You're performing actions like adding (Union) or subtracting (Subtract) shapes, but you can always go back and tweak the original 'numbers' (the component shapes) in your equation. The final result updates automatically.

HOW IT WORKS When you select multiple layers and apply a boolean operation, Figma creates a 'boolean group'. This group looks like a single object, but it contains the original, fully editable layers. The final shape's geometry is calculated from the component layers' fills and strokes. The three main operations are Union, Subtract, and Intersect.

Union combines all selected layers into one shape, using the outer path of all objects. Subtract removes any overlapping areas from the bottom-most layer. Intersect creates a new shape consisting only of the area where all selected layers overlap.

WHEN TO USE IT Use boolean operations constantly for icon and illustration work. Creating a crescent moon by subtracting one circle from another is a classic example. Making a 'plus' icon by uniting two rectangles is another. It's the right tool whenever you're building a complex vector from simple primitives and anticipate future tweaks.

WHEN NOT TO USE IT Boolean operations cannot be applied to frames or sections. If you need to hand off a finalized asset and want to simplify the file, you might flatten a boolean group into a single vector path, but be aware this is a destructive, irreversible action that removes the editability.

ONE CANONICAL EXAMPLE To create a simple user icon, place a small circle (the head) overlapping the top of a larger, slightly rounded rectangle (the shoulders). Select both shapes and choose the Union operation. They merge into a single, clean silhouette. Because this is a non-destructive boolean group, you can still dive into the group and resize the 'head' circle or adjust the 'shoulders' rectangle independently, and the final shape will update in real-time.

Read the original → help.figma.com

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.