The Boolean Complexity
Creating custom shapes in Figma; a practical approach.
As variegated as it may sound, Boolean operations are actually very simple. They are applied in almost every aspect of our everyday living; designing, programming, arts, etc.
In Figma, Boolean operations help us combine any set of shape layers through one of four formulas: Union, Subtract, Intersect, and Exclude. Shapes made with Boolean are treated as a single shape layer and share fill and stroke properties and can be combined with other boolean groups through subsequent boolean operations.
Create a new figma file with 4 frames with 2 squares in each frame. Label the frames as follows;
- Union
- Subtract
- Intersect
- Exclude
Union:
Union combines selected shapes into a boolean group. If the shapes overlap, the new shape’s outer path consists of the composite of its sublayers’ paths minus any segments that overlap. The stroke would then be applied to that outer path ignoring any path segments which overlap each other.
From the union frame, overlap the first shape with part of the second, select the two shapes then choose union operation from the boolean operations. We have a shape like this;
Subtract:
Subtract is the opposite of Union. Subtract removes the area of a shape or set of shapes from a base shape. Only the bottom shape layer is solid, the rest are subtracted from it.
Repeat the same process on the frame labeled subtract, but this time; choose subtract, instead of union.
Intersect:
Intersect creates a boolean group whose shape consists only of the overlapping parts of its sublayers.
On the intersect frame, perform the intersect operation.
Exclude:
Exclude is the opposite of Intersect. Exclude shows only the areas of its sublayers that do not overlap.
Yay! We are now masters of Boolean Operations using figma.
How do we apply this knowledge? Let’s try something out.
The Search Icon
We will create the search icon applying some of the Boolean operations we learnt here.
Recreate the following in your figma file;
- Two Circles / Ellipses with sizes 320px by 320px and 400px by 400px respectively,
- A rectangle with size 35px by 150px
Lets apply the Subtract Boolean Operation,
- Overlap the big circle with the small circle, align horizontal and verbal centred (NB: Make sure the small circle layer is on top of the Big Circle layer)
- Select both shapes and apply the Subtract operation
- Align the rectangle with the Circle Boolean group at the bottom
- Make sure some aspect of the rectangle overlaps the Circle
- Elect both shapes and apple Union Operation
Select the group and rotate angle to 40degrees
Align the Object to Centre of the Frame and Apply a colour of your choice.
Well Done!
I advice you practice more complex shapes and icons to master this skill.
Credits: https://help.figma.com/drawing/boolean-operations
Learn more about Figma and Design using the following resources:
Also, to be part of the Figma Community;
Join Figma on SLACK: https://figma-africa.slack.com
TWITTER: https://twitter.com/figma_africa
INSTAGRAM: https://instagram.com/figmaafrica
