В пятой части основ 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. Пам'ятайте, що у фіналі кожна іконка має бути згрупована.
- Завдання підвищеної складності. Використовуйте булеві операції для того, щоб максимально точно повторити наступні чотири іконки. Зверніть особливу увагу на кольори та частинки, з яких вони складаються.
Для проверки отправляйте ссылку на файл в Figma. Надеюсь, вы помните, что готовым иконкам нужно дать содержательные названия.
Сегодня вы познакомились с булевыми операциями, которые выручат вас при создании сложных элементов интерфейса, иконок, простых иллюстраций и даже частей инфографики. Если раньше мы объединяли примитивы в группы, то сейчас мы знакомы с более эффективными и удобными способами построения векторной графики.
Нам еще нужно изучить работу с кривыми на уровне точек и рычагов, но об этом в следующих уроках.
Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте вопросы, а также вас ждет множество полезных постов о дизайне.
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение