Did you know these are called Boolean Operations?
That's because they use booleans to determine which part of the shapes should be visible.
Let me explain 👇
To keep it simple lets use two overlapping circles.
Imagine a boolean for each circle called "inside" - for the area inside each circle the boolean is true, for the area outside it is false.
Any point within the bounding box can be represented in terms of these booleans.
Boolean operations are just a way of combining these booleans together to make a new shape.
Take Union for example- the new shape will consist of any area that is inside the red circle OR the blue circle.
Because we have combined the two booleans, there are now 4 possible states (2x2) :
- Outside Red, Outside Blue
- Outside Red, Inside Blue
- Inside Red, Outside Blue
- Inside Rad, Inside Blue
You can see this more clearly with Intersect which creates a new shape where the two shapes overlap.
Put differently, anywhere "inside" is true for BOTH shapes.
Difference/Exclude is almost the inverse of the Intersect.
It creates a shape anywhere "inside" is true for one but NOT BOTH of the shapes.
Subtract works differently in that it matters which shape is the primary shape. In Figma's case the top layer is subtracted from the bottom.
The new shape is anywhere "inside" is true for the primary shape AND NOT the secondary shape
This example is pretty simple but Boolean Operations are extremely powerful and work on complex shape combinations.
The math required to determine the overlapping areas of complex shapes deserves a whole thread on its own.
If you think these operations look familiar it's because they are essentially the logical operators we use in programming:
AND - Intersect
OR - Union
NAND - Exclusion (kinda of)
NOT - Subtract (kind of)
Wanna play with vector boolean operations? Check out paper.js which has some really helpful primitives for this.
paperjs.org/examples/boolean-operations/