Boolean operations (union, subtract, intersect, exclude) in Figma - Deep Dive

Overview - Boolean operations (union, subtract, intersect, exclude)

What is it?

Boolean operations in Figma let you combine or change shapes by joining, cutting, or overlapping them. These operations include union, subtract, intersect, and exclude. They help create complex shapes from simple ones without drawing from scratch. Anyone can use them to design faster and cleaner visuals.

Why it matters

Without Boolean operations, designers would spend much more time manually drawing or erasing parts of shapes to get the desired look. This slows down design work and makes editing harder. Boolean operations solve this by letting you quickly combine or remove parts of shapes, making design changes easy and flexible.

Where it fits

Before learning Boolean operations, you should know basic shape creation and selection in Figma. After mastering these, you can explore advanced vector editing and component design. Boolean operations are a key step between simple shapes and complex, reusable design elements.

Mental Model

Core Idea

Boolean operations let you combine or cut shapes like puzzle pieces to create new shapes quickly and flexibly.

Think of it like...

Imagine you have cookie cutters of different shapes. You can press them together to make a bigger cookie (union), cut one shape out of another (subtract), keep only the overlapping part (intersect), or remove the overlapping part (exclude).

Shapes A and B combined by Boolean operations:

  ┌─────┐       ┌─────┐
  │  A  │       │  B  │
  └─────┘       └─────┘

Union: A ∪ B  → One shape covering both A and B
Subtract: A - B → Shape A with B's area cut out
Intersect: A ∩ B → Only the overlapping area of A and B
Exclude: A ⊕ B → A and B combined but overlapping parts removed

Build-Up - 6 Steps

1

Foundation

Understanding Basic Shapes in Figma

Concept: Learn how to create and select simple shapes as the building blocks for Boolean operations.

In Figma, you can create rectangles, circles, triangles, and other shapes using the shape tools. Click and drag on the canvas to draw a shape. You can select shapes by clicking on them. These shapes are the starting point for Boolean operations.

Result

You can create and select multiple shapes on the canvas.

Knowing how to create and select shapes is essential because Boolean operations work by combining these shapes.

2

Foundation

What Are Boolean Operations?

Concept: Introduce the four main Boolean operations and what they do to shapes.

Boolean operations combine two or more shapes in different ways: - Union: merges shapes into one big shape - Subtract: removes the top shape's area from the bottom shape - Intersect: keeps only the overlapping area - Exclude: removes the overlapping area, leaving non-overlapping parts These operations let you create complex shapes easily.

Result

You understand the purpose and effect of each Boolean operation.

Recognizing the four Boolean operations helps you choose the right one for your design goal.

3

Intermediate

Applying Union and Subtract Operations

🤔Before reading on: do you think union adds shapes together or cuts one from another? Commit to your answer.

Concept: Learn how to use union to merge shapes and subtract to cut one shape from another in Figma.

Select two or more shapes, then click the Union button to merge them into one shape covering all areas. To subtract, select shapes with the one to subtract on top, then click Subtract. The top shape's area is cut out from the bottom shape.

Result

You can create new shapes by merging or cutting shapes.

Understanding how union and subtract change shapes helps you build complex designs efficiently.

4

Intermediate

Using Intersect and Exclude Operations

🤔Before reading on: does intersect keep overlapping parts or remove them? Commit to your answer.

Concept: Learn how intersect keeps only overlapping areas and exclude removes overlapping areas between shapes.

Select two or more shapes, then click Intersect to keep only the area where all shapes overlap. Click Exclude to remove overlapping areas, leaving only the parts that don't overlap.

Result

You can isolate or remove overlapping parts of shapes.

Knowing intersect and exclude lets you control shape overlaps precisely for cleaner designs.

5

Advanced

Editing Boolean Groups After Creation

🤔Before reading on: do you think Boolean groups can be edited like normal shapes after creation? Commit to your answer.

Concept: Learn how Boolean operations create groups that can be edited by adjusting individual shapes inside them.

After applying a Boolean operation, Figma groups the shapes. You can double-click the group to enter and move or resize individual shapes. This updates the combined shape dynamically without starting over.

Result

You can fine-tune complex shapes by editing their parts inside Boolean groups.

Knowing Boolean groups are editable prevents redoing work and supports flexible design changes.

6

Expert

Boolean Operations and Performance in Large Designs

🤔Before reading on: do you think many Boolean operations slow down Figma or have no effect? Commit to your answer.

Concept: Understand how excessive Boolean operations can affect Figma's performance and how to optimize designs.

Boolean operations add complexity to vector shapes. Using many nested Boolean groups can slow down rendering and editing. Experts flatten Boolean groups when finalizing designs or use components to manage complexity. This keeps files fast and responsive.

Result

You can balance design complexity and performance by managing Boolean operations wisely.

Knowing the performance impact helps you design efficiently and avoid slowdowns in large projects.

Under the Hood

Boolean operations work by combining the vector paths of shapes mathematically. Each shape is defined by points and curves. The operations calculate new paths by adding, subtracting, or intersecting these areas to form a new vector shape. Figma keeps the original shapes inside a group so changes update the combined shape dynamically.

Why designed this way?

Boolean operations were designed to let designers create complex shapes without redrawing. Keeping original shapes editable inside groups allows flexible changes later. This approach balances ease of use with powerful vector editing, unlike destructive editing which loses original shapes.

Shapes A and B paths combined:

  ┌───────────────┐
  │   Shape A     │
  │  ┌───────┐    │
  │  │       │    │
  │  └───────┘    │
  │               │
  │   Shape B     │
  │     ┌─────┐   │
  │     │     │   │
  │     └─────┘   │
  └───────────────┘

Boolean operation calculates new path from overlap or difference of these shapes.

Myth Busters - 3 Common Misconceptions

Quick: Does subtract remove the bottom shape or the top shape? Commit to your answer.

Common Belief: Subtract removes the bottom shape completely.

Reality: Subtract removes the area of the top shape from the bottom shape, not the entire bottom shape.

Why it matters: Misunderstanding this leads to unexpected shape results and wasted time fixing designs.

Quick: Can you edit individual shapes inside a Boolean group after applying the operation? Commit to yes or no.

Common Belief: Once combined, Boolean shapes become one and cannot be edited separately.

Reality: Boolean groups keep original shapes editable inside, allowing adjustments anytime.

Why it matters: Believing Boolean groups are fixed causes unnecessary rework and limits design flexibility.

Quick: Does using many Boolean operations always improve design performance? Commit to yes or no.

Common Belief: More Boolean operations make designs more efficient and faster.

Reality: Excessive Boolean groups increase file complexity and can slow down Figma.

Why it matters: Ignoring performance impact leads to slow files and frustrating editing experiences.

Expert Zone

1

Boolean operations preserve original shapes inside groups, enabling non-destructive editing and easy reversions.

2

The stacking order of shapes affects subtract and intersect results, so order matters in complex designs.

3

Flattening Boolean groups converts them to simple vector paths, improving performance but losing editability.

When NOT to use

Avoid Boolean operations when you need very simple shapes or when performance is critical in large files. Instead, use single vector shapes or components. For pixel-perfect UI elements, consider using masks or image assets.

Production Patterns

Designers use Boolean operations to create icons, logos, and complex UI elements quickly. They combine Boolean groups with components and variants for reusable, scalable design systems. Flattening is done before handoff to developers to ensure clean SVG exports.

Connections

Set Theory

Boolean operations in design mirror set operations like union, intersection, and difference.

Understanding set theory clarifies how shapes combine mathematically, improving precision in design.

Vector Graphics Editing

Boolean operations are a core part of vector editing tools like Adobe Illustrator and Inkscape.

Knowing Boolean operations in Figma helps transfer skills to other vector design software.

Database Query Operations

Boolean logic in databases uses similar operations (AND, OR, NOT) to filter data sets.

Recognizing this connection helps understand filtering and combining data in BI tools.

Common Pitfalls

#1 Using subtract with shapes in the wrong order causes unexpected cutouts.

Wrong approach:

Select shape A then shape B, click Subtract expecting B to be cut out from A.

Correct approach:

Select shape B on top of A, then click Subtract to cut B's area from A.

Root cause:

Misunderstanding that subtract removes the top shape's area from the bottom shape.

#2 Flattening Boolean groups too early removes ability to edit parts.

Wrong approach:

Immediately flatten Boolean groups after creation to simplify shapes.

Correct approach:

Keep Boolean groups editable during design, flatten only when finalizing.

Root cause:

Not knowing Boolean groups preserve original shapes for flexible editing.

#3 Applying many nested Boolean operations slows down Figma performance.

Wrong approach:

Create complex designs with many nested Boolean groups without optimization.

Correct approach:

Use components and flatten groups strategically to maintain performance.

Root cause:

Ignoring the impact of vector complexity on software responsiveness.

Key Takeaways

Boolean operations let you combine and modify shapes quickly by merging, cutting, or overlapping them.

They work by mathematically combining vector paths, keeping original shapes editable inside groups.

Understanding the order of shapes is crucial for subtract and intersect to work as expected.

Excessive Boolean groups can slow down design tools, so manage complexity with flattening and components.

Boolean operations connect deeply to set theory and vector graphics, linking design to math and data concepts.

Practice

1.

Which Boolean operation in Figma combines two shapes into one shape that covers all areas of both?

easy

A. Subtract

B. Union

C. Intersect

D. Exclude

Solution

1. Step 1: Understand the Union operation

   Union merges two shapes into a single shape covering all areas of both shapes.

2. Step 2: Compare with other operations

   Subtract cuts one shape from another, Intersect keeps only overlapping parts, Exclude removes overlaps. Only Union combines fully.

3. Final Answer:

   Union -> Option B

4. Quick Check:

   Union = Combine all areas [OK]

Hint: Union joins all shapes fully without cutting [OK]

Common Mistakes:

• Confusing Subtract with Union
• Thinking Intersect combines all areas
• Mixing Exclude with Union

2.

Which of the following is the correct way to apply the Subtract Boolean operation in Figma?

1. Select two shapes
2. Click on Subtract in the Boolean operations menu
3. The top shape cuts out the bottom shape

easy

A. The top shape cuts out the bottom shape

B. The bottom shape cuts out the top shape

C. Both shapes merge into one shape

D. Only the overlapping area remains

Solution

1. Step 1: Recall Subtract operation behavior

   Subtract removes the area of the top shape from the bottom shape.

2. Step 2: Verify the direction of subtraction

   The top shape acts as the cutter, so it cuts out from the bottom shape, not the other way around.

3. Final Answer:

   The top shape cuts out the bottom shape -> Option A

4. Quick Check:

   Subtract = Top shape cuts bottom [OK]

Hint: Top shape always cuts out bottom in Subtract [OK]

Common Mistakes:

• Reversing which shape cuts which
• Thinking Subtract merges shapes
• Confusing with Intersect or Exclude

3.

Given two overlapping circles in Figma, what will the Intersect Boolean operation produce?

medium

A. A shape of the overlapping area only

B. A shape excluding the overlapping area

C. A shape of the first circle minus the second

D. A shape covering both circles completely

Solution

1. Step 1: Understand Intersect operation

   Intersect keeps only the overlapping area between two shapes.

2. Step 2: Apply to overlapping circles

   Only the area where both circles overlap remains visible after Intersect.

3. Final Answer:

   A shape of the overlapping area only -> Option A

4. Quick Check:

   Intersect = Keep overlap only [OK]

Hint: Intersect keeps only the overlap area [OK]

Common Mistakes:

• Thinking Intersect merges full shapes
• Confusing with Union or Subtract
• Assuming it excludes overlap

4.

In Figma, a user tries to apply the Exclude Boolean operation but the result is the same as Union. What is the likely cause?

medium

A. The user selected only one shape

B. The shapes are grouped, not boolean combined

C. The shapes are locked

D. The shapes do not overlap

Solution

1. Step 1: Recall Exclude operation effect

   Exclude removes overlapping areas between shapes, leaving non-overlapping parts.

2. Step 2: Analyze why result equals Union

   If shapes do not overlap, Exclude cannot remove anything, so it behaves like Union.

3. Final Answer:

   The shapes do not overlap -> Option D

4. Quick Check:

   No overlap means Exclude = Union [OK]

Hint: Exclude needs overlap to differ from Union [OK]

Common Mistakes:

• Assuming grouping affects Boolean results
• Thinking single shape can exclude
• Ignoring shape overlap requirement

5.

You have three overlapping shapes: A, B, and C. You want to create a new shape that includes all areas covered by A and B but excludes any area where C overlaps. Which Boolean operation sequence should you use?

hard

A. Intersect A and B, then Exclude C

B. Subtract C from A, then Union with B

C. Union A and B, then Subtract C

D. Exclude C from A, then Intersect with B

Solution

1. Step 1: Combine A and B fully

   Use Union to merge A and B into one shape covering all their areas.

2. Step 2: Remove overlap with C

   Use Subtract to cut out any area where C overlaps from the combined shape.

3. Final Answer:

   Union A and B, then Subtract C -> Option C

4. Quick Check:

   Union then Subtract excludes C overlap [OK]

Hint: Union first, then subtract to exclude overlap [OK]

Common Mistakes:

• Using Intersect instead of Union first
• Excluding before combining shapes
• Mixing order of operations