In the fifth part of the Figma basics, we will learn about boolean operations and learn how to use them in practice. This is an indispensable tool for working with vector graphics, especially icons and logos.

About boolean operations

Boolean operations – the concept is not new. They came to us from such a science as logic, and mathematically they can be written using set theory. They are actively used in programming when constructing complex conditions. For example, the logical operators "and", "or" known to us even from Excel tables and «not».

Boolean operations are needed to build complex vector shapes from simple primitives. For example, several circles can be combined into a cloud. There are five operations in Figma:

  • Merge
  • Subtraction
  • Intersection
  • Exception
  • Convert to curves

To work with these tools, you need two or more vector elements (shapes, primitives).

After applying one of the five boolean operations tools, we will get more than just a finished shape. Figma combines vectors into a group and allows you to edit each element (move, reshape, cancel the effect of a boolean operation by removing the element from the group).

Union Selection

This operation should be used if you want to get one common shape from several. As a result, all parts of this shape will have the same fill, stroke, or other effect rules.

The parameters of the future single shape will be taken from the topmost layer of the selected vectors.

Let's try to make a simple icon using the boolean operation "Union". To do this:

  1. Draw two or more (in my case – three) vector shapes in advance.
  2. By holding down the Shift key and the left mouse button – select the desired objects. In the top panel in the center, we have a menu Boolean Groups with a side arrow, by clicking on which we will see a list of commands.
  3. Select the “Union Selection” command.

Subtract Selection

Actually, if you need to cut off some part, make a hole or bend in the figure. As a result, we will see the bottommost layer of our vector objects, except for those parts of it that were covered by the layers above.

Let's try to make a simple icon using the Boolean operation "Subtract". To do this:

  1. Draw vector shapes in advance. Remember that we subtract the top layer from the bottom one.
  2. By holding down the Shift key and the left mouse button – highlight what you need. In the top panel in the center, we have a menu Boolean Groups with a side arrow, by clicking on which we will see a list of commands.
  3. Select the command “Subtract Selection”.

Intersect Selection

This operation must be applied so that only the part where our vector shapes intersect becomes visible. Here the parameters of the fill, stroke and other effects will be taken from the topmost layer.

Let's try to make a simple icon using the Boolean operation "Intersect". To do this:

  1. Draw vector shapes in advance.
  2. We repeat the same steps as with the previous functions. In order for the Boolean Groups panel to appear, you need to hold down Shift and select the shapes with the mouse.
  3. Selecting the command “Intersect Selection”.

Exclude Selection

Unlike intersection, exclusion works in the opposite way. Only those parts of vector layers that do NOT intersect with each other become visible.

Let's try to make a simple icon using the "Exception" boolean operation. To do this:

  1. Draw two vector shapes in advance.
  2. Press Shift and LMB to select both at the same time.
  3. On the top panel, select the command “Exclude Selection”.


Important point: the exclusion only works with two vector layers. If we add a third vector layer to the intersection, then it will invert the action. Example:

Flatten Selection

I usually use this operation last to bake the result before exporting to SVG. This allows you to optimize the number of points and thereby save precious disk space, because the less space an icon takes, the faster it will load when viewing the page in which it will be used.

The result is a union of all elements into one shape with the subsequent transfer of objects to curves. That is, we will no longer be able to change the contents of the group in the same way as in “Union Selection”. The elements of our group are converted to curves, and we can only edit their shape using curves. Example:

Homework

  1. Did you know that some of the most popular icons that designers use on most – is it social networks and services? Let's try to draw the icons that are shown below in the picture. Use the Boolean operations you learned about in this tutorial to draw. Try to understand for yourself which operation is relevant for each of them. For an easier and more accurate display, transfer the image to Figma. Remember that in the final, each icon must be grouped. First homework for lesson 8, frusia.pro
  2. A task of increased complexity. Use Boolean operations to repeat the next four icons as closely as possible. Pay special attention to the colors and the particles they are composed of. Second homework for lesson 8, frusia.pro

For verification, send a link to the file in Figma. I hope you remember that ready-made icons need to be given meaningful names.

Conclusions

Today you've learned about boolean operations that will help you a lot when creating complex interface elements, icons, simple illustrations, and even infographic parts. If earlier we combined primitives into groups, now we are familiar with more efficient and convenient ways to build vector graphics.

We have yet to learn more about working with curves at the level of points and levers, but more on that in the next lessons.

Follow me on Instagram - @frusia.pro - stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.

Stay tuned!