В пятой части по основам 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”. Элементы нашей группы переведены в кривые, и мы можем редактировать их форму только с помощью кривых. Пример:

Домашнее задание

Домашние задания больше не проверяются для граждан россии. Чтобы убедиться, что вы не из россии, после того как оставите комментарий с домашним заданием в конце урока на сайте, напишите мне в директ Инстаграмм @frusia.pro

  1. А вы знали, что одни из самых популярных иконок, которые дизайнеры использують на большинстве сайтов – это социальные сети и сервисы? Давайте попробуем нарисовать иконки, которые приведены ниже на картинке. Используйте для отрисовки булевые операции, о которых узнали в этом уроке. Попробуйте самостоятельно понять, какая операция актуальна для каждой из них. Для более легкого и точного отображения, перенесите картинку в Figma. Помните, что в финале каждая иконка должна быть сгрупирирована. Первое домашнее задание к уроку 8, frusia.pro
  2. Задание повышенной сложности. Используйте булевые операции для того, чтобы как можно точнее повторить следующие четыре иконки. Обратите особое внимание на цвета и частички из которых они состоят. Второе домашнее задание к уроку 8, frusia.pro

На проверку присылайте ссылку на файл в Figma. Надеюсь вы помните, что готовым иконкам нужно дать осмысленные названия.

Выводы

Сегодня вы познакомились с булевыми операциями, которые сильно выручат вас при создании сложных элементов интерфейса, иконок, простых иллюстраций и даже частей инфографики. Если раньше мы объединяли примитивы в группы, то сейчас мы знакомы с более эффективными и удобными способами построения векторной графики.

Нам еще предстоит поближе изучить работу с кривыми на уровне точек и рычагов, но об этом в следующих уроках.

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

Stay tuned!