In the fifth part of the Figma basics, we will learn about boolean operations and how to use them in practice. This is an indispensable tool for working with vector graphics, especially with icons and logos.
About Boolean Operations
Boolean operations are not a new concept. They have come to us from a science called logic, and mathematically they can be expressed using set theory. They are actively used in programming when constructing complex conditions. For example, the logical operators "and," "or," and "not" are familiar to us even from Excel tables.
Boolean operations are needed to construct complex vector shapes from simple primitives. For example, several circles can be combined into a cloud. In Figma, there are five operations:
- Union
- Subtraction
- Intersection
- Difference
- Convert to Curves
To work with these tools, you need two or more vector elements (shapes, primitives).
After applying one of the five Boolean operation tools, we will not just get a ready-made shape. Figma combines vectors into a group and allows you to edit each element (move, change shape, undo the Boolean operation by removing the element from the group).
Union Selection
This operation should be used when you want to create a single solid shape from several. As a result, the same fill, stroke, or other effects will apply to all parts of this shape.
The parameters of the future single shape will be taken from the top layer of the selected vectors.
Let's try to create a simple icon using the boolean operation "Union." For this:
- Pre-draw two or more (in my case – three) vector shapes.
- Using the Shift key and the left mouse button – select the necessary objects. In the center of the top panel, we see the Boolean Groups menu with a side arrow, clicking on which will show us a list of commands.
- Select the “Union Selection.” command.
Subtracting Shapes (Subtract Selection)
Relevant when you need to cut out a part, create a hole, or bend in a shape. As a result, we will see the lowest layer of our vector objects, except for those parts that were covered by layers above.
Let's try to create a simple icon using the boolean operation "Subtract." For this:
- Pre-draw vector shapes. Remember that we subtract the top layer from the bottom.
- Using the Shift key and the left mouse button – select what you need. At the top right, we have the Boolean Groups menu with a side arrow, clicking which we will see a list of commands.
- Choose the “Subtract Selection.” command.
This operation needs to be applied so that only the part where our vector shapes intersect becomes visible. Here, the fill, stroke, and other effect parameters will be taken from the top layer.
Let's try to create a simple icon using the boolean operation "Intersection". For this:
- Pre-draw the vector shapes.
- We repeat the same actions as with the previous functions. To make the Boolean Groups panel appear, you need to hold Shift and select the shapes with the mouse.
- Select the command “Intersect Selection”.
- Pre-draw two vector shapes.
- Hold Shift and LMB to select both at the same time.
- In the panel, choose the command “Exclude Selection”.
Important point: the exclusion works only with two vector layers. If we add a third layer at the intersection of the two layers, it will invert the effect. Example:
Usually, I use this operation as a last resort for baking the result before exporting to SVG. This allows optimizing the number of points. After all, the less space the icon takes up, the faster it will load when viewing the page on which it will be used.
As a result, it creates a union of all elements into one shape with the subsequent conversion of objects into curves. That means we can no longer change the contents of the group in the same way as in "Union Selection". The elements of our group have been converted to curves, and we can edit their shape only using curves. Example:
Due to the large influx of those wishing to take the course, I am making the homework check paid. $30 (at the current exchange rate), I will transfer 10% to the Armed Forces of Ukraine. For one donation, I will check homework for all lessons.
For details, write to the Instagram direct @frusia.pro
The course and lessons remain free of charge.
Homework is no longer checked for citizens of Russia.
- Did you know that some of the most popular icons that designers use on most websites are social networks and various services? Let's try to draw the icons shown below in the picture. Use the boolean operations you learned in this lesson for drawing. Try to understand independently which operation is relevant for each of them. For easier and more accurate rendering, transfer the image to Figma. Remember that in the end, each icon should be grouped.
![First homework assignment for the 8th lesson of the UX/UI course]( "First homework assignment for the 8th lesson of the UX/UI course")
- Increased difficulty task. Use boolean operations to replicate the following four icons as accurately as possible. Pay special attention to the colors and particles they consist of.
![Second homework assignment for the 8th lesson of the UX/UI course]( "Second homework assignment for the 8th lesson of the UX/UI course")
Please send the link to the file in Figma for review. I hope you remember that finished icons need to have meaningful names.
Today you learned about boolean operations, which will help you create complex interface elements, icons, simple illustrations, and even parts of infographics. While before we grouped primitives, now we are familiar with more efficient and convenient ways to build vector graphics.
We will also need to study working with curves at the level of points and levers, but more on this in the next lessons.
Follow me on Instagram – @frusia.pro – stay updated on announcements of new lessons, watch homework checks in stories, ask questions, and look forward to many useful posts about design.
Continue learning
