Boolean operations (union, subtract, intersect, exclude) in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer working with the marketing team.

📋 Request: Your manager wants you to create clear icon shapes by combining and editing simple shapes using Boolean operations in Figma.

📊 Data: You have basic shapes like circles, rectangles, and triangles in Figma. You need to use Boolean operations to create new shapes that represent concepts like 'add', 'remove', 'combine', and 'exclude'.

🎯 Deliverable: A Figma file with four icons created using union, subtract, intersect, and exclude Boolean operations, each clearly labeled.

Sample Data

Shape Name	Shape Type	Position	Size
Circle1	Circle	(50,50)	40x40
Rectangle1	Rectangle	(70,50)	60x40
Triangle1	Triangle	(120,50)	50x50
Circle2	Circle	(150,50)	40x40

1

Step 1: Create the 'Add' icon by combining Circle1 and Rectangle1 using the Union Boolean operation.

Select Circle1 and Rectangle1, then click 'Union selection' in the Boolean operations menu.

Expected Result

A single shape combining Circle1 and Rectangle1 with no overlapping edges.

2

Step 2: Create the 'Remove' icon by subtracting Circle1 from Rectangle1 using the Subtract Boolean operation.

Select Rectangle1 and Circle1 (order matters), then click 'Subtract selection' in the Boolean operations menu.

Expected Result

Rectangle1 shape with the area overlapped by Circle1 removed, creating a cut-out.

3

Step 3: Create the 'Combine' icon by intersecting Triangle1 and Circle2 using the Intersect Boolean operation.

Select Triangle1 and Circle2, then click 'Intersect selection' in the Boolean operations menu.

Expected Result

A shape showing only the overlapping area between Triangle1 and Circle2.

4

Step 4: Create the 'Exclude' icon by excluding the overlapping area between Circle1 and Rectangle1 using the Exclude Boolean operation.

Select Circle1 and Rectangle1, then click 'Exclude selection' in the Boolean operations menu.

Expected Result

A shape showing both Circle1 and Rectangle1 but with the overlapping area removed.

5

Step 5: Label each icon clearly with text: 'Add', 'Remove', 'Combine', and 'Exclude'.

Use the Text tool to add labels below each icon.

Expected Result

Each icon has a clear label below it for easy identification.

Final Result

Circle + Rectangle

↓

Rectangle - Circle

↓

Triangle ∩ Circle

↓

Circle ⊕ Rectangle

✓Union combines shapes into one solid shape.

✓Subtract removes the overlapping part of the second shape from the first.

✓Intersect keeps only the overlapping area between shapes.

✓Exclude removes the overlapping area but keeps the non-overlapping parts.

Bonus Challenge

Create a new icon by combining three shapes using multiple Boolean operations to represent a complex concept like 'merge and exclude'.

Show Hint

Try using Union first to combine two shapes, then use Exclude with the third shape.

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