Boolean operations (union, subtract, intersect, exclude) in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Boolean Union in Figma

In Figma, you have two overlapping shapes: a red circle and a blue square. You apply the Union boolean operation. What will be the visual result?

A A single shape combining both the circle and square areas, filled with the color of the top shape.

B Two separate shapes remain visible, overlapping with their original colors.

C Only the overlapping area of the circle and square is visible, filled with a mix of red and blue.

D The square shape is cut out from the circle, leaving a hole in the circle.

💡 Hint

Think about how union combines shapes.

The Union operation merges all selected shapes into one combined shape that covers all areas of the originals. The fill color is taken from the topmost shape.

🧠 Conceptual

intermediate

Result of Subtract Operation in Figma

You have a green rectangle and a yellow circle overlapping. You apply the Subtract boolean operation with the circle on top. What is the expected visual output?

A Both shapes remain unchanged and visible.

B The circle shape is removed from the rectangle, creating a hole in the rectangle where the circle overlapped.

C Only the overlapping area remains visible, filled with green.

D The two shapes merge into one shape with combined colors.

💡 Hint

Subtract removes the top shape area from the bottom shape.

The Subtract operation cuts out the top shape's area from the bottom shape, leaving a hole in the bottom shape where they overlapped.

❓ visualization

advanced

Visualizing Intersect Operation Result

Given two overlapping shapes, a purple triangle and an orange ellipse, you apply the Intersect boolean operation. Which visual result matches this operation?

A The triangle shape is removed from the ellipse, leaving a hole in the ellipse.

B Both shapes remain visible side by side without overlap.

C Only the overlapping area of the triangle and ellipse is visible, filled with the color of the top shape.

D The two shapes merge into one shape covering all areas.

💡 Hint

Intersect keeps only the shared area of shapes.

The Intersect operation keeps only the area where both shapes overlap, discarding all other parts.

🎯 Scenario

advanced

Using Exclude to Create a Complex Shape

You want to create a shape that shows all areas of two overlapping shapes except the overlapping part itself. Which boolean operation should you use in Figma?

A Subtract

B Union

C Intersect

D Exclude

💡 Hint

Think about removing only the overlapping area.

The Exclude operation removes the overlapping area from both shapes, leaving only the non-overlapping parts visible.

🔧 Formula Fix

expert

Troubleshooting Unexpected Boolean Operation Result

You applied the Subtract operation on two shapes in Figma, but the result shows no visible shape. What is the most likely cause?

A The top shape completely covers the bottom shape, removing it entirely.

B The shapes were not selected before applying the operation.

C The bottom shape was on top instead of the top shape.

D The shapes have different fill colors.

💡 Hint

Consider what happens if the top shape fully covers the bottom shape.

If the top shape fully covers the bottom shape, subtracting it removes the entire bottom shape, leaving nothing visible.