Boolean operations (union, subtract, intersect, exclude) in Figma - Dashboard Guide

Dashboard Mode - Boolean operations (union, subtract, intersect, exclude)

Business Question

How can we visually combine and compare different sales regions using Boolean operations to understand overlaps and unique areas?

Sample Data: Sales Regions Overlap

Region	Sales (in $1000)	Area Covered (sq km)
North	120	300
East	150	250
South	100	200
West	130	280
North-East Overlap	50	80
South-West Overlap	40	70

Dashboard Components

• KPI Card: Total Sales
  Formula: Sum of all sales including overlaps
  Result: 120 + 150 + 100 + 130 + 50 + 40 = 590 (in $1000)
• Venn Diagram Visual
  Shows regions as circles:
  - Union: Combined area of North and East (North + East - Overlap)
  - Subtract: North area excluding overlap with East
  - Intersect: Overlap area between North and East
  - Exclude: Areas outside both North and East
  Values:
  North = 300 sq km
  East = 250 sq km
  Overlap (Intersect) = 80 sq km
• Bar Chart: Sales by Region
  Bars for North, East, South, West, and Overlaps
  Shows sales values for each region and overlap
• Table: Boolean Operation Results
  Columns: Operation, Area (sq km)
  Rows:
  - Union (North ∪ East): 300 + 250 - 80 = 470
  - Subtract (North - East): 300 - 80 = 220
  - Intersect (North ∩ East): 80
  - Exclude (Outside North and East): Total area (assumed 1000) - Union = 530

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |     Bar Chart        |
|   Total Sales: 590   | Sales by Region      |
+----------------------+----------------------+
|                  Venn Diagram                |
|          (Union, Subtract, Intersect)        |
+---------------------------------------------+
|          Table: Boolean Operation Results    |
+---------------------------------------------+

Interactivity

User can select regions (North, East) using checkboxes. Selecting/deselecting updates:

• KPI Card recalculates total sales for selected regions and overlaps.
• Venn Diagram updates to show Boolean operations for selected regions.
• Bar Chart filters to show sales only for selected regions and overlaps.
• Table recalculates areas based on selected regions and their overlaps.

Self Check

If you add a filter to select only the North region, which components update and how?

• KPI Card: Shows sales for North plus overlaps involving North (120 + 50 = 170).
• Venn Diagram: Shows only North circle without East, so no overlap area.
• Bar Chart: Displays sales for North and North-East Overlap only.
• Table: Boolean operations recalculate with only North selected (Union = North area 300, Subtract = 300, Intersect = 0, Exclude = 700).

Key Result

Dashboard showing sales and area overlaps of regions using Boolean operations with interactive visuals.

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