Lesson 11. Boolean Operations

Module 2. Figma basics.
Free UX / UI design course for a newcomer

To start learning, take tests and track progress, you need to enroll in the course. It's free.

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

About Boolean Operations

Boolean operations are not a new concept. They come to us from a science called logic and can be mathematically represented using set theory. They are actively used in programming to build complex conditions. For example, the logical operators "and", "or", and "not" are well-known 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
  • Exclusion
  • 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 extracting the element from the group).

Union Selection

This operation should be applied when you want to create a single solid shape from several. As a result, the same fill, stroke, or other effects rules will apply to all parts of this shape.

The parameters of the future unified shape will be taken from the top layer of the selected vectors.

Let's try to make a simple icon using the boolean operation “Union”. For this:

  1. Pre-draw two or more (in my case - three) vector shapes.
  2. 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, we will see a list of commands.
  3. Select the “Union Selection.” command.

Subtracting Shapes (Subtract Selection)

Relevant if you need to cut out a part, make a hole, or bend a shape. As a result, we will see the lowest layer of our vector objects, except for those parts that were overlapped by layers above.

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

  1. Pre-draw vector shapes. Remember that we subtract the top layer from the bottom one.
  2. Using the Shift key and the left mouse button – select what you need. At the top right, we see the Boolean Groups menu with a side arrow, clicking which we will see a list of commands.
  3. Select the “Subtract Selection.” command.

Intersection of Shapes (Intersect Selection)

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

Let's try to create a simple icon using the boolean operation “Intersection”. To do this:

  1. Pre-draw vector shapes.
  2. 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.
  3. Select the command “Intersect Selection.”

Exclude Selection

Unlike intersection, Exclude works in the opposite way. The visible parts of the vector layers are those that do NOT intersect with each other.

Let's try to create a simple icon using the boolean operation “Exclude”. For this:

  1. Pre-draw two vector shapes.
  2. Hold Shift and LMB to select both at the same time.
  3. 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 action. Example:

Flatten Selection

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, the faster it will load when viewing the page on which it will be used.

As a result, it combines all elements into one shape with subsequent conversion of objects into curves. That is, 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 into curves, and we can only edit their shape using curves. Example:

Homework

From now on, this course is designed for independent study and completing homework. I understand that some tasks may be challenging for you.

For additional support, use the chat on Telegram. Here you can ask questions related to the lessons or view examples of correct completions from other students.

The chat is not available for citizens of Russia.

  1. 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 that you learned in this lesson for drawing. Try to independently understand which operation is relevant for each of them. For easier and more accurate representation, transfer the picture to Figma. Remember that in the end, each icon should be grouped. First homework for the 8th lesson of the UX/UI course
  2. 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 for the 8th lesson of the UX/UI course

For review, please send the link to the file in Figma. I hope you remember that finished icons need to have meaningful names.

Conclusions

Today you learned about boolean operations, which will help you when creating complex interface elements, icons, simple illustrations, and even parts of infographics. While we previously grouped primitives, we are now familiar with more efficient and convenient ways to build vector graphics.

We still need to study working with curves at the level of points and levers, but we will cover this in the next lessons.

Follow me on Instagram – @frusia.pro – stay updated on announcements for new lessons, watch homework checks in stories, ask questions, and look forward to many helpful posts about design.

Take quiz

To pass the lesson and check your knowledge, you need to correctly answer 80% of the questions from the quiz. To do so, you need to login and enroll to the course or signup, if you haven't done so yet.

Take quiz

Leave a comment

Place the handle into the purple zone

Comments

Сергей14 December 2024 17:29  
Кратко и по существу. Спасибо!
скажена черепахаUkraine flag підтримує ЗСУ 5 March 2024 16:46  
Привіт! Оце я кайфанула :)
https://www.figma.com/file/nvSYfkq63m2kn0QDaZHriK/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-%D1%83-Frusia.Pro?type=design&node-id=283%3A2&mode=design&t=k4KGZGnVmxi6A4nC-1

Коментар frusia.pro:

Привіт, кинула декілька коментарів у самому файлі. Переглянете

Даша5 April 2023 21:08  
Доброго вечора, завдання чудове. https://www.figma.com/file/kSCP9cjGRVcpT0jsiKlPsO/6-8-lesson?node-id=66%3A34&t=mon99ScjDdAaOi63-1

Коментар frusia.pro:

У вас все класно вийшло, зауважень по перемальовці або булевих операціях немає. Єдиний момент, на який я б радила звернути увагу – це розміри. Все виглядало б трохи акуратніше, якби усі іконки були однакового розміру.

ВарвараUkraine flag підтримує ЗСУ 22 January 2023 13:41  
Намагалась максимально наблизитися до оригіналу)
https://www.figma.com/file/Dy1fUf6L4DZSfVxQCFVSvm/UX%2FUI-Frusia-2?node-id=132%3A2&t=q87rmDx55RjPgt4Y-1

Коментар frusia.pro:

Стало значно краще. Переходьте до наступного уроку!

ВарвараUkraine flag підтримує ЗСУ 6 January 2023 17:04  
Добрий вечір! Завдання було нереальним, нереально цікавим та трохи важким)
https://www.figma.com/file/Dy1fUf6L4DZSfVxQCFVSvm/UX%2FUI-Frusia-2?node-id=132%3A2&t=88TpXhQExEGKuOt0-1

Коментар frusia.pro:

Дуже рада, що вам було цікаво!

Завдання 1. Усі іконки гарно відтворили, але зверніть будь ласка увагу на іконку Hangouts та Periscope ще раз. А саме на скруглення, бо є розбіжності з оригіналом.

Завдання 2. Тут все чудово.

Yuliya LepenkoUkraine flag підтримує ЗСУ 24 September 2022 21:59  
Добрий вечір:)

https://www.figma.com/file/I08T3W8u2GI3NE21Xv5DTd/HW7?node-id=33%3A2

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати іконки соціальних мереж. Всі іконки перемальовано дуже точно, як по кольорах, так і за формою фігур. Також бачу, що ви розібрались з булевими операціями та правильно їх застосували. Все правильно.

Завдання 2. Перемалювати деталізовані іконки. Тут також все чудово, не маю жодних зауважень. Також правильно застосовані булеві операції.

Молодець, ви чудово розібрались з матеріалом і показали на практиці, що засвоїли його. Переходьте до наступного уроку

Вікторія ГрищенкоUkraine flag підтримує ЗСУ 26 August 2022 16:03  
Добрий день!
https://www.figma.com/file/OEs3FEXx4okWGuI9Rn1O00/%D0%A3%D1%80%D0%BE%D0%BA-8?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір! Вибачте за затримку з перевіркою (була неділю у відпустці).

Завдання 1. Перемалювати іконки соціальних мереж. Ви досить точно перемалювали усі іконки, а також правильно застосували булеві операції, молодець!

Завдання 2. Перемалювати деталізовані іконки. Тут також все дуже добре, я би сказала ідеально. Єдине зауваження полягає у тому, що ви забули об'єднати елементи, що формують нитку накалу у лампочці. По решті все чудово.

Дуже добре попрацювали, переходьте до вивчення наступного уроку

БогданаUkraine flag підтримує ЗСУ 28 July 2022 12:00  
Вітаю!
Цього разу я в захваті від дз, бо іноді треба булл ламати голову над побудовою концепції лого. Та коли ти знаходиш рішення - це повний кайф))
Дуже дякую за перевірку та зауваження.
Мирного дня!
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/дз?node-id=251%3A24

Коментар frusia.pro:

Привіт! Дуже рада, що вам сподобалось виконувати завдання

Завдання 1. Перемалювати іконки соціальних мереж. Іконки перемальовані дуже точно, бачу що ви добре орієнтуєтесь в різних видах булевих операцій, так як застосовуєте їх правильно і доречно. Усі іконки ви розмістили всередині фреймів, все супер. Єдине маленьке зауваження: приберіть заливку білим кольором у фреймах, в середині яких розміщені іконки. Фон має бути завжди прозорим.

Завдання 2. Перемалювати деталізовані іконки. Тут таке саме зауваження, по решті все ідеально, молодець!

Ідеально виконане завдання, чудово попрацювали. Приберіть білий фон з фреймів з іконками і переходьте до наступного уроку

Марія СUkraine flag підтримує ЗСУ 12 July 2022 22:09  
Доброго дня, надсилаю 8 урок:
https://www.figma.com/file/Yx2EJ9dtMNP2WCzioaKQo5/8-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1

Правки до 7-го теж надсилала, але зараз свій коментар чомусь побачити не можу.

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати іконки соціальних мереж. Все зроблено правильно, бачу використання булевих операцій. Самі іконки намальовані дуже схоже.

Завдання 2. Перемалювати деталізовані іконки. Тут також все чудово, зауважень не маю.

Гарно попрактикувались, видно, що ви засвоїли роботу з булевими операціями. Переходьте до вивчення 9-ого уроку

АннаUkraine flag підтримує ЗСУ 9 July 2022 21:54  
https://www.figma.com/file/W8K43RLVgYKy54mrLQ2SHV/8-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1

Ваші зауваження виправила:
Twitch. Білу підложку з хвостиком треба об'єднати в один елемент за допомогою Union Selection;
Hangout. Білі лапки та зелену підложку треба об'єднати за допомогою Union Selection;
Plurk. Усі білі елементи потрібно вирізати з червоної підложки, а не просто перекрити її за допомогою Substract Selection.

Коментар frusia.pro:

Привіт! Тепер все правильно, молодець

Yana UsachovaUkraine flag підтримує ЗСУ 8 July 2022 17:29  
Доброго вечора, це завдання це щось з чимось, намагалась, не один в один, но майже вишло
Ще раз дякую за можливість навчатися у вас
https://www.figma.com/file/owsei3g7EUwTUMnZxp0A4Q/lesson-8?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати іконки соціальних мереж. По пропорціях трохи відрізняється, але головне, що ви правильно використали усі основні булеві операції, молодець! Якщо хочете повторити іконки один в один, то малюйте прямо зверху зображення. Щоб референс не заважав, можете заблокувати відповідний прошарок за допомогою іконки замка.

Завдання 2. Перемалювати деталізовані іконки. Тут все набагато краще, вийшло дуже схоже. Також бачу правильне застосування булевих операцій. Сама ліва іконка трохи стиснута по горизонталі, достатньо її трохи розтягнути.

Чудово попрацювали, чекаю на правки до попереднього уроку. Після чого можете переходити до 9-ого

АннаUkraine flag підтримує ЗСУ 6 July 2022 17:59  
https://www.figma.com/file/W8K43RLVgYKy54mrLQ2SHV/8-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1

Ці монетки, це щось. Змусили мені понервувати. Бачу помилку, що між стовчиками монет не повинно бути простору. Я не змогла це зробити, щоб вони щільно прилягали один до одного.
Дякую за фідбек.

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати іконки соціальних мереж. Візуально все дуже добре. Бачу, що в деяких місцях ви використали булеві операції. Але також бачу, що є просто групи з примітивами, які не були об'єднані. До прикладу:

  • Twitch. Білу підложку з хвостиком треба об'єднати в один елемент за допомогою Union Selection;
  • Hangout. Білі лапки та зелену підложку треба об'єднати за допомогою Union Selection;
  • Plurk. Усі білі елементи потрібно вирізати з червоної підложки, а не просто перекрити її за допомогою Substract Selection.

Завдання 2. Перемалювати деталізовані іконки. Також дуже добре справились, молодець! Вперше бачу, щоб використовували градієнти замість двох окремих примітивів. Щілина між стовпчиками монет не має ніякого значення і не впливає на загальну картину, не переймайтесь через це

Ви гарно виконали це завдання, зробіть правки у першому завданні (вони досить прості) і переходьте до наступного уроку

Люба Фурсеєва4 July 2022 18:54  
Костянтин, спеціального інструменту для ваших цілей немає, але достатньо зробити дублікат пар фігур і по черзі застосувати булеві операції Intersect Selection й Exclude Selection до кожної пари.
Костянтин2 July 2022 15:29  
Підкажіть, а якщо я хочу щоб при перетинанні декількох фігур вони розбивались на окремі фігури. Наприклад коло перетинається з квадратом і я хочу щоб області перетинання і ті, що не перетинаються стали окремими фігурами. Щоб я наприклад міг змінити їх колір. Хоча я знаю як це зробити, але може є швидкий спосіб для великої кількості фігур, які накладаються одна на одну і на секторі перетинання мають інщі кольори.
Ірина С.Ukraine flag підтримує ЗСУ 29 June 2022 21:18  
Добрий вечір! Надсилаю дз до 8 уроку.
https://www.figma.com/file/nJRZebYtvYsz0Lyq1Q7ap2/Homework-8?node-id=1%3A6

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати іконки соціальних мереж. Гарно попрацювали, особливо сподобалось розумне використання булевих операцій. До прикладу іконка Youtube, яка зроблена за допомогою Intersect Selection.

Завдання 2. Перемалювати деталізовані іконки. Є невеликі розбіжності у останній іконці на стиках пазлів, але це дрібниці. В цілому все виглядає максимально схоже, молодець!

Добре попрактикувались, переходьте до наступного уроку

ІннаUkraine flag підтримує ЗСУ 19 June 2022 19:36  
Доброго дня, дякую за урок!
Ось виконане завдання https://www.figma.com/file/c3XSXKFGVDBEwCCFOF53FE/Lesson-8?node-id=2%3A107

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати іконки соціальних мереж. Вийшло максимально схоже, молодець! Цікаво, що ви правильно підписали усі соціальні мережі, включно з Plurk, про який мало хто знає, я приємно здивована

Завдання 2. Перемалювати деталізовані іконки. Також дуже якісна робота. Все добре. Бачу, що ви розібрались з новими налаштуваннями обводки, що стало у нагоді при створенні іконки Screen.

Хочу похвалити за хорошу роботу, рухайтесь до наступного уроку

Анна СмірноваUkraine flag підтримує ЗСУ 16 June 2022 17:07  
Доброго дня!
Дуже круте домашнє завдання, дякую!
Підкажіть, будь ласка, у другій врпаві, я кінцеве зображення згрупувала, чи достатньо цього? Не знаю як об'єднати зображення так, аби воно не зіпсувалось

https://www.figma.com/file/Gena0CjtpVFEW5PfQb8wmM/UI%2FUX-hw-lesson-8?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір! Так, кінцеве зображення достатньо об'єднати у групу, а ще краще у фрейм. В ідеалі усі фрейми будуть однакового розміру. Там, де іконки маленькі залишаємо відступи.

Завдання 1. Ювелірна робота, молодець! Здивована наскільки точно ви відтворили іконку Youtube використовуючи еліпс і булеву операцію виключення.

Завдання 2. Все добре. Зверніть увагу на назви прошарків, дотримуйтесь однакових правил. Рекомендую кожне слово писати з великої літери через пробіл.

Добре попрацювали, переходьте до 9-ого уроку

Катерина Ukraine flag підтримує ЗСУ 16 June 2022 17:06  
Добрый вечер!)

https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/%D0%BE%D0%B1%D1%83%D1%87?node-id=343%3A2

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Все правильно, іконки схожі по розміру і формі.

Завдання 2. Також все дуже добре. Хочу дати одну пораду. Не переводьте прошарки з застосованими булевими операціями у криві і не об'єднуйте усі елементи в один прошарок, тому що його буде набагато складніше редагувати у майбутньому, якщо це знадобиться.

Гарно попрацювали, переходьте до наступного уроку

Люба Фурсеєва27 April 2022 16:49  
Андрій Дяченко, дякую
Андрей Дьяченко26 April 2022 19:09  
За этот урок огромная благодарность!!! Без вас в этом точно бы не разобрался! Вы лучшая!!!
Ірина20 April 2022 15:00  
Добрий день! перевірте, будь ласка.
https://www.figma.com/file/XcYKdhCf1N91iU7QpvccXd/Untitled?node-id=11%3A2

Коментар frusia.pro:

Завдання 1. Всі іконки чудово виконано і гарно згруповані. Маю лише зауваження до wi-fi. Було б добре зліпити еліпси в одну фігуру за допомогою булевого об'єднання, щоб Фігма правильно показувала межі іконки (bounding box).

Завдання 2. Справились з ювелірною точністю, молодець! Навіть повторили ледь помітні заокруглення нижньої частини другої зліва фігури.

Нина22 December 2021 16:45  
Здравствуйте, вот дз)
https://www.figma.com/file/oBRO7AcMCIq4r8PaA3N9C7/%D0%94%D0%B7-7?node-id=301%3A2

Комментарий frusia.pro:

Оба задания выполнены идеально! Вы делаете большие успехи!

Полина27 November 2021 16:28  
Люба, спасибо за обратную связь по домашнему заданию!
Поправила 8 иконку, там видны теперь составляющие. А в прошлом история пропала, т.к. в вектор преобразовала все. Ссылку прикрепляю, там отдельным фреймом сделала 8 иконку. https://www.figma.com/file/XkFPMT8WJnGMDjMBnHqJbK/Boolean?node-id=0%3A1
Еще раз спасибо за ценнейшие знания!

Комментарий frusia.pro:

Отлично! Молодец, что внимательны к деталям!

Полина24 November 2021 19:55  
Добрый вечер!
Спасибо за очень крутой урок!
Ссылка на домашнюю работы https://www.figma.com/file/XkFPMT8WJnGMDjMBnHqJbK/Boolean?node-id=0%3A1

Комментарий frusia.pro:

Задание 1. Все супер, правда не увидела "историю" последней (оранжевой) иконки внизу, как именно вы её нарисовали.

Задание 2. Очень хорошо!

Виктория13 November 2021 09:19  
Здравствуйте) проверьте пожалуйста задания:
1) https://www.figma.com/file/IxK6EHg5Oq8g3uJGcisOSw/%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8?node-id=0%3A1
2) https://www.figma.com/file/HzYjOaAgeP77IVkQ0zPoKB/%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8-2?node-id=2%3A2

Комментарий frusia.pro:

Задание 1. Все верно, но есть замечание к последней иконке. Вы наверняка заметили, что при наведении курсора, она занимает очень много места. Не забывайте про функцию Flatten, которая описана в уроке. Именно она превращает наши иконки в пригодные к верстке.

Задание 2. Отлично, молодец!

Student.9 October 2021 12:51  
something interesting
Люба Фурсеева4 October 2021 11:25  

Дизайнер, пожалуйста

Дизайнер4 October 2021 11:15  
Отличная новость, Спасибо Вам!
Люба Фурсеева1 October 2021 13:59  

Дизайнер, следующие уроки будут выходить регулярнее

Дизайнер30 September 2021 00:20  
Вы вернулись, наконец-то дождался)

To start learning, take tests and track progress, you need to enroll in the course. It's free.