Figma is a popular browser-based design and prototyping tool that allows designers to create vector graphics, UI designs, icons, logos and more. One of the powerful features of Figma is the ability to use Boolean formulas to combine shapes and vector objects.
Table of Contents
What are Boolean Formulas?
Boolean formulas refer to a set of operations that allow you to combine, unite, subtract or intersect vector shapes and objects. There are four main types of Boolean formulas in Figma:
Union
The Union formula combines multiple vector shapes into a single object. If the shapes overlap, the overlapping segments will be merged. The final shape will encompass the outlines of all the combined shapes.
Subtract
The Subtract formula allows you to subtract one vector shape from another. Only the bottom-most vector shape remains solid, while the shapes on top are subtracted from it.
Intersect
The Intersect formula creates a shape that consists only of the overlapping parts between multiple vector objects. Any non-overlapping parts are removed.
Exclude
The Exclude formula does the opposite of Intersect. It shows only the non-overlapping parts of the combined vector shapes.
How to Use Boolean Formulas in Figma
Using Boolean formulas in Figma is easy. Follow these simple steps:
- Select two or more vector shapes that you want to combine.
- In the toolbar, click on the Boolean icon and select the operation you want to apply – Union, Subtract, Intersect or Exclude.
- The vector objects will be instantly combined based on the Boolean formula.
- You can edit the properties of the resulting object just like any other shape in Figma.
Here are some tips when working with Boolean formulas:
- Make sure the shapes perfectly overlap without any gaps if you want to use the Intersect formula.
- Pay attention to the layer order if using Subtract or Exclude. The top layers will be subtracted from or excluded from the bottom-most layer.
- You can combine shapes, text, images, and even other Boolean objects. Experiment with different combinations.
- Use Union to create complex shapes, Intersect to cut shapes, Subtract to punch holes, and Exclude to invert Intersect.
Examples and Uses of Boolean Formulas
Here are some examples of how you can use Boolean formulas in your Figma designs:
Creating Complex Shapes
Combine basic shapes using Union to create intricate icons, logos and illustrations. For example, you can combine multiple circles to create abstract bubble shapes.
Complex bubble shape made with circles
Cutting Out Shapes
Use Intersect to cut text or shapes out of other objects. For example, you can make a text take the shape of an unusual vector object.
Text shaped with Intersect formula
Inverting Designs
Exclude is useful for inverting designs by subtracting shapes from a rectangle. For example, you can create a frame by excluding shapes from a rectangle.
Frame created by excluding shapes
Designing Icons
Easily design icons using Subtract to punch holes and Intersect to combine shapes.
Icon design with Subtract and Intersect
Prototyping Interactions
Animate your designs by using Boolean formulas to transition shapes in prototypes.
Prototyping animation with Boolean formulas
Tips for Using Boolean Formulas
Here are some additional tips to help you master Boolean operations in Figma:
- Name your shapes and layers properly so that you can easily identify them later.
- Group Boolean objects to make selection and editing easier.
- Pay attention to layer order and arrangement when combining shapes.
- Create your own Boolean shape libraries and components to reuse across files.
- Use clipping masks instead of Intersect if you want overlapping parts to remain editable.
- Apply corner radius, strokes and effects to Boolean objects to create more unique shapes.
- Animate transitions between Boolean operations in prototypes.
Conclusion
Learning to effectively use Boolean formulas opens up endless possibilities for creating complex and unusual shapes in Figma. With some practice, you’ll be able to use Union, Subtract, Intersect and Exclude formulas to design intricate logos, engaging illustrations, animated prototypes and more. So start combining some shapes and see what interesting designs you can create!
