Основи Figma. Булінові операції

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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