Boolean operations (union, subtract, intersect, exclude) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to perform a union of two shapes in Figma.

Figma

const unionShape = figma.combineShapes({ shapes: [shape1, shape2], operation: '[1]' });

Drag options to blanks, or click blank then click option'

AINTERSECT

BSUBTRACT

CEXCLUDE

DUNION

Attempts:

3 left

💡 Hint

Common Mistakes

Using SUBTRACT instead of UNION removes one shape from the other.

INTERSECT keeps only overlapping parts, not the full union.

The UNION operation combines two shapes into one shape that covers both areas.

2fill in blank

medium

Complete the code to subtract shape2 from shape1 in Figma.

Figma

const subtractShape = figma.combineShapes({ shapes: [shape1, shape2], operation: '[1]' });

Drag options to blanks, or click blank then click option'

AEXCLUDE

BSUBTRACT

CINTERSECT

DUNION

Attempts:

3 left

💡 Hint

Common Mistakes

Using UNION adds shapes instead of subtracting.

INTERSECT keeps only overlapping parts, not subtraction.

The SUBTRACT operation removes the area of the second shape from the first shape.

3fill in blank

hard

Fix the error in the code to intersect two shapes in Figma.

Figma

const intersectShape = figma.combineShapes({ shapes: [shape1, shape2], operation: '[1]' });

Drag options to blanks, or click blank then click option'

AINTERSECT

BUNION

CSUBTRACT

DEXCLUDE

Attempts:

3 left

💡 Hint

Common Mistakes

Using UNION keeps all areas, not just the overlap.

SUBTRACT removes one shape from another, not intersection.

The INTERSECT operation keeps only the overlapping area of both shapes.

4fill in blank

hard

Fill both blanks to exclude overlapping areas between two shapes in Figma.

Figma

const excludeShape = figma.combineShapes({ shapes: [[1], [2]], operation: 'EXCLUDE' });

Drag options to blanks, or click blank then click option'

Ashape1

Bshape2

Cshape3

Dshape4

Attempts:

3 left

💡 Hint

Common Mistakes

Using shapes not involved in the operation.

Mixing up the order of shapes does not affect EXCLUDE but use correct shapes.

The EXCLUDE operation removes the overlapping area between the two shapes, keeping only non-overlapping parts.

5fill in blank

hard

Fill all three blanks to create a combined shape using union, subtract, and intersect operations in Figma.

Figma

const combinedShape = figma.combineShapes({ shapes: [shapeA, shapeB], operation: '[1]' });
const subtractedShape = figma.combineShapes({ shapes: [shapeC, shapeD], operation: '[2]' });
const intersectedShape = figma.combineShapes({ shapes: [shapeE, shapeF], operation: '[3]' });

Drag options to blanks, or click blank then click option'

AUNION

BSUBTRACT

CINTERSECT

DEXCLUDE

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up operation names causes wrong shape results.

Using EXCLUDE instead of INTERSECT for overlapping areas.

This code shows three different boolean operations: UNION to combine shapes, SUBTRACT to remove one shape from another, and INTERSECT to keep only overlapping areas.

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