Урок 11. Булеві операції

Модуль 2. Основи Figma.
Безкоштовний ввідний курс по UX/UI дизайну для початківця

Щоб почати навчання, проходити тести і відслідкувати прогрес, треба записать на курс. Це безкоштовно.

У п'ятій частині основ Figma ми дізнаємося про булеві операції та навчимося використовувати їх на практиці. Це незамінний інструмент для роботи з векторною графікою, особливо з іконками та логотипами.

Про булеві операції

Булеві операції – поняття не нове. Вони прийшли до нас із такої науки як логіка, а математично можуть бути записані за допомогою теорії множин. Активно використовуються у програмуванні при побудові складних умов. Наприклад, відомі нам навіть із екселівських таблиць логічні оператори «і», «або» та «не».

Булеві операції потрібні для побудови складних векторних фігур із простих примітивів. Наприклад, кілька кругів можна об'єднати у хмару. У Figma є п'ять операцій:

  • Об'єднання
  • Віднімання
  • Перетин
  • Виключення
  • Перетворення на криві

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

Після застосування одного з п'яти інструментів булевих операцій ми отримаємо не просто готову фігуру. Figma об'єднує вектори в групу та дозволяє редагувати кожен елемент (рухати, змінювати форму, скасовувати дію булевої операції шляхом винесення елемента з групи).

Об'єднання фігур (Union Selection)

Цю операцію слід застосовувати тоді, коли ви хочете отримати одну суцільну фігуру із кількох. Як результат, для всіх частин цієї фігури діятимуть однакові правила заливки, обводки або інших ефектів.

Параметри майбутньої єдиної фігури будуть взяті з верхнього шару вибраних векторів.

Давайте спробуємо зробити просту іконку за допомогою булевої операції «Об'єднання». Для цього:

  1. Заздалегідь намалюйте дві або більше (в моєму випадку – три) векторні фігури.
  2. За допомогою кнопки Shift та лівої кнопки миші – виділяємо необхідні об'єкти. У верхній панелі по центру у нас з'являється меню Boolean Groups з боковою стрілочкою, натиснувши на яку, ми побачимо перелік команд.
  3. Обираємо команду “Union Selection”.

Віднімання фігур (Subtract Selection)

Актуально, якщо вам потрібно відрізати якусь частину, зробити отвір чи вигин у фігурі. Як результат, ми побачимо найнижчий шар наших векторних об'єктів, за винятком тих його частин, які були перекриті шарами вище.

Давайте спробуємо зробити просту іконку за допомогою булевої операції «Віднімання». Для цього:

  1. Заздалегідь намалюйте векторні фігури. Пам'ятайте, що верхній шар ми віднімаємо з нижнього.
  2. За допомогою кнопки Shift та лівої кнопки миші – виділяємо потрібне. Вгорі з правого боку у нас з'являється меню Boolean Groups з боковою стрілочкою, натиснувши яку ми побачимо перелік команд.
  3. Обираємо команду “Subtract Selection”.

Перетин фігур (Intersect Selection)

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

Давайте спробуємо зробити просту іконку за допомогою булевої операції «Перетин». Для цього:

  1. Заздалегідь намалюйте векторні фігури.
  2. Повторюємо ті самі дії, що й з попередніми функціями. Щоб панель Boolean Groups з'явилася, потрібно затиснути Shift та мишкою вибрати фігури.
  3. Обираємо команду “Intersect Selection”.

Виключення фігур (Exclude Selection)

На відміну від перетину, Виключення працює протилежним чином. Видимими стають ті частини векторних шарів, які НЕ перетинаються один з одним.

Давайте спробуємо зробити просту іконку за допомогою булевої операції «Виняток». Для цього:

  1. Заздалегідь намалюйте дві векторні фігури.
  2. Затискаємо Shift та ЛКМ, щоб вибрати обидві одночасно.
  3. На панелі обираємо команду “Exclude Selection”.

Важливий момент: виключення працює лише з двома векторними шарами. Якщо ми додамо на перетин двох шарів третій, то він інвертує дію. Приклад:

Перетворення на криві (Flatten Selection)

Зазвичай цю операцію використовую в останню чергу для запікання результату перед експортом до SVG. Це дозволяє оптимізувати кількість точок. Адже чим менше місця займає іконка, тим швидше вона завантажиться під час перегляду сторінки, на якій буде використана.

В результаті виходить об'єднання усіх елементів в одну фігуру з подальшим переведенням об'єктів у криві. Тобто ми більше не зможемо змінювати вміст групи таким же чином як у “Union Selection”. Елементи нашої групи переведені в криві, і ми можемо редагувати їх форму лише за допомогою кривих. Приклад:

Домашнє завдання

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

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

Чат недоступний для громадян росії.

  1. А ви знали, що одні з найпопулярніших іконок, які дизайнери використовують на більшості сайтів – це соціальні мережі та різноманітні сервіси? Спробуймо намалювати іконки, які наведені нижче на картинці. Використовуйте для малювання булеві операції, про які дізналися у цьому уроці. Спробуйте самостійно зрозуміти, яка операція є актуальною для кожної з них. Для більш легкого і точного відображення перенесіть картинку в Figma. Пам'ятайте, що у фіналі кожна іконка має бути згрупована. Перше домашнє завдання до 8-ого уроку з UX/UI курсу
  2. Завдання підвищеної складності. Використовуйте булеві операції для того, щоб максимально точно повторити наступні чотири іконки. Зверніть особливу увагу на кольори та частинки, з яких вони складаються. Друге домашнє завдання до 8-ого уроку з UX/UI курсу

На перевірку надсилайте посилання на файл у Figma. Сподіваюся, ви пам'ятаєте, що готовим іконкам потрібно дати змістовні назви.

Висновки

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

Нам ще потрібно вивчити роботу з кривими на рівні точок і важелів, але про це в наступних уроках.

Підписуйтесь на мене в Instagram – @frusia.pro – будьте в курсі анонсів нових уроків, дивіться перевірки домашніх завдань у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.

Пройти тест

Щоб урок зарахувався, як пройдений, вам потрібно правильно відповісти на 80% питань з тесту. Щоб пройти тест і перевірити свої знання, вам треба увійти в систему та записатись на курс або зареєструватись, якщо ви ще цього не зробили.

Пройти тест

Залиште коментар

Поставте повзунок у фіолетову зону

Коментарі

Сергей14 грудня 2024 17:29  
Кратко и по существу. Спасибо!
скажена черепахаUkraine flag підтримує ЗСУ 5 березня 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 квітня 2023 21:08  
Доброго вечора, завдання чудове. https://www.figma.com/file/kSCP9cjGRVcpT0jsiKlPsO/6-8-lesson?node-id=66%3A34&t=mon99ScjDdAaOi63-1

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

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

ВарвараUkraine flag підтримує ЗСУ 22 січня 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 січня 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 вересня 2022 21:59  
Добрий вечір:)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

АннаUkraine flag підтримує ЗСУ 6 липня 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 липня 2022 18:54  
Костянтин, спеціального інструменту для ваших цілей немає, але достатньо зробити дублікат пар фігур і по черзі застосувати булеві операції Intersect Selection й Exclude Selection до кожної пари.
Костянтин2 липня 2022 15:29  
Підкажіть, а якщо я хочу щоб при перетинанні декількох фігур вони розбивались на окремі фігури. Наприклад коло перетинається з квадратом і я хочу щоб області перетинання і ті, що не перетинаються стали окремими фігурами. Щоб я наприклад міг змінити їх колір. Хоча я знаю як це зробити, але може є швидкий спосіб для великої кількості фігур, які накладаються одна на одну і на секторі перетинання мають інщі кольори.
Ірина С.Ukraine flag підтримує ЗСУ 29 червня 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 червня 2022 19:36  
Доброго дня, дякую за урок!
Ось виконане завдання https://www.figma.com/file/c3XSXKFGVDBEwCCFOF53FE/Lesson-8?node-id=2%3A107

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Виктория13 листопада 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 жовтня 2021 12:51  
something interesting
Люба Фурсеева4 жовтня 2021 11:25  

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

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

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

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

Щоб почати навчання, проходити тести і відслідкувати прогрес, треба записать на курс. Це безкоштовно.