В пятой части основ Figma мы узнаем о булевых операциях и научимся использовать их на практике. Это незаменимый инструмент для работы с векторной графикой, особенно с иконками и логотипами.
Про булеві операції
Булеві операції – поняття не нове. Вони прийшли до нас із такої науки як логіка, а математично можуть бути записані за допомогою теорії множин. Активно використовуються у програмуванні при побудові складних умов. Наприклад, відомі нам навіть із екселівських таблиць логічні оператори «і», «або» та «не».
Булеві операції потрібні для побудови складних векторних фігур із простих примітивів. Наприклад, кілька кругів можна об'єднати у хмару. У Figma є п'ять операцій:
- Объединение
- Вычитание
- Пересечение
- Исключение
- Преобразование в кривые
Для выполнения работы с этими инструментами нужно два или более векторных элементов (фигур, примитивов).
После применения одного из пяти инструментов булевых операций мы получим не просто готовую фигуру. Figma объединяет векторы в группу и позволяет редактировать каждый элемент (двигать, изменять форму, отменять действие булевой операции путем вынесения элемента из группы).
Объединение фигур (Union Selection)
Эту операцию следует применять, когда вы хотите получить одну сплошную фигуру из нескольких. В результате для всех частей этой фигуры будут действовать одинаковые правила заливки, обводки или других эффектов.
Параметры будущей единой фигуры будут взяты с верхнего слоя выбранных векторов.
Давайте попробуем создать простую иконку с помощью булевой операции «Объединение». Для этого:
- Заздалегідь намалюйте дві або більше (в моєму випадку – три) векторні фігури.
- За допомогою кнопки Shift та лівої кнопки миші – виділяємо необхідні об'єкти. У верхній панелі по центру у нас з'являється меню Boolean Groups з боковою стрілочкою, натиснувши на яку, ми побачимо перелік команд.
- Обираємо команду “Union Selection”.
Вычитание фигур (Subtract Selection)
Актуально, если вам нужно вырезать какую-то часть, сделать отверстие или изгиб в фигуре. В результате мы увидим самый нижний слой наших векторных объектов, за исключением тех его частей, которые были перекрыты слоями выше.
Давайте попробуем сделать простую иконку с помощью булевой операции «Вычитание». Для этого:
- Заранее нарисуйте векторные фигуры. Помните, что верхний слой мы вычитаем из нижнего.
- С помощью клавиши Shift и левой кнопки мыши – выделяем нужное. Вверху справа у нас появляется меню Boolean Groups с боковой стрелочкой, нажав на которую мы увидим перечень команд.
- Выбираем команду “Subtract Selection”.
Эту операцию нужно применить для того, чтобы видимой стала лишь та часть, на которой пересекаются наши векторные фигуры. Здесь параметры заливки, обводки и других эффектов будут взяты с верхнего слоя.
Давайте попробуем сделать простую иконку с помощью булевой операции «Пересечение». Для этого:
- Заздалегідь намалюйте векторные фигуры.
- Повторяем те же действия, что и с предыдущими функциями. Чтобы панель Boolean Groups появилась, нужно зажать Shift и мышкой выбрать фигуры.
- Выбираем команду “Intersect Selection”.
- Заранее нарисуйте две векторные фигуры.
- Удерживаем Shift и ЛКМ, чтобы выбрать обе одновременно.
- На панели выбираем команду “Exclude Selection”.
Важно: исключение работает только с двумя векторными слоями. Если мы добавим на пересечение двух слоев третий, то он инвертирует действие. Пример:
Обычно эту операцию использую в последнюю очередь для запекания результата перед экспортом в SVG. Это позволяет оптимизировать количество точек. Ведь чем меньше места занимает иконка, тем быстрее она загрузится во время просмотра страницы, на которой будет использована.
В результате получается объединение всех элементов в одну фигуру с последующим переводом объектов в кривые. То есть мы больше не сможем изменять содержимое группы таким же образом как в “Union Selection”. Элементы нашей группы переведены в кривые, и мы можем редактировать их форму лишь с помощью кривых. Пример:
Відтепер цей курс розрахований на самостійне вивчення та виконання домашніх завдань. Розумію, що деякі завдання можуть бути непростими для вас.
Для додаткової підтримки скористайтесь чатом у телеграмі. Тут ви зможете поставити запитання, що стосуються уроків або переглянути приклади правильного виконання від інших учнів.
Чат недоступний для громадян росії.
- А ви знали, що одні з найпопулярніших іконок, які дизайнери використовують на більшості сайтів – це соціальні мережі та різноманітні сервіси? Спробуймо намалювати іконки, які наведені нижче на картинці. Використовуйте для малювання булеві операції, про які дізналися у цьому уроці. Спробуйте самостійно зрозуміти, яка операція є актуальною для кожної з них.
Для більш легкого і точного відображення перенесіть картинку в Figma. Пам'ятайте, що у фіналі кожна іконка має бути згрупована.
![Перше домашнє завдання до 8-ого уроку з UX/UI курсу]( "Перше домашнє завдання до 8-ого уроку з UX/UI курсу")
- Завдання підвищеної складності. Використовуйте булеві операції для того, щоб максимально точно повторити наступні чотири іконки. Зверніть особливу увагу на кольори та частинки, з яких вони складаються.
![Друге домашнє завдання до 8-ого уроку з UX/UI курсу]( "Друге домашнє завдання до 8-ого уроку з UX/UI курсу")
Для проверки отправляйте ссылку на файл в Figma. Надеюсь, вы помните, что готовым иконкам нужно дать содержательные названия.
Сегодня вы познакомились с булевыми операциями, которые выручат вас при создании сложных элементов интерфейса, иконок, простых иллюстраций и даже частей инфографики. Если раньше мы объединяли примитивы в группы, то сейчас мы знакомы с более эффективными и удобными способами построения векторной графики.
Нам еще нужно изучить работу с кривыми на уровне точек и рычагов, но об этом в следующих уроках.
Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте вопросы, а также вас ждет множество полезных постов о дизайне.
Продолжить обучение
