Сегодня расскажу как объединить в фигме (Figma). Вы узнаете 4 простых способа, как объединять элементы, слои, векторные фигуры, объекты и т.д. Рассмотрим как сгруппировать элементы с помощью инструмента группа «Group» и фрейм «Frame». Также поговорим про «Union selection» и «Flatten selection».
- Как объединить элементы в группу в фигме
- Объединение элементов в Figma с помощью фрейма
- Как разгруппировать в фигме
- Объединяем векторные фигуры с помощью «Union selection»
- Объединение элементов в фигме с помощью «Flatten seleciton»
- Отличия «Union selection» и «Flatten seleciton» в Figma
- Заключение
- Объединение объектов
- Методы комбинирования объектов
- Объединение объектов с помощью эффектов обработки контуров
- Перейдите к палитре «Обработка контуров»
- Укажите параметры обработки контуров
- Применение эффектов обработки контуров
- Применение эффектов обработки контуров с использованием меню «Эффекты»
- Применение эффектов обработки контуров с использованием палитры «Обработка контуров»
- Сводка эффектов обработки контуров
- Объединение объектов с помощью составных фигур
- Сложение и вычитание векторов
- Органы управления
- Union selection — объединение векторов
- Subtract selection — вычитание
- Intersect selection — пересечение
- Exclude selection — исключение
Как объединить элементы в группу в фигме
Чтобы объединить элементы в группу (сгруппировать их) нажмите на комбинацию горячих клавиш «Ctrl + G». В панели слоёв вы можете увидеть иконку группы у этих элементов. Если нажать на стрелку напротив группы в слоях, то сможете увидеть все элементы, которые есть внутри.
Объединение элементов в Figma с помощью фрейма
Вы можете объединить элементы с помощью фрейма. Для того, чтобы сделать фрейм вокруг элементов, выберите его в панели инструментов сверху и нарисуйте его вокруг нужных объектов. Также для создания фрейма можете воспользоваться горячими клавишами «Ctrl + Alt + G»
Как разгруппировать в фигме
Чтобы разгруппировать элементы из группы или фрейма в фигме нажмите на клавиатуре 3 клавиши «Ctrl + Shift + G». Также можно нажать на правую клавишу мыши и выбрать пункт «Ungroun selection».
Объединяем векторные фигуры с помощью «Union selection»
Чтобы объединить векторные фигуры и элементы с помощью функции Union selection, выберите 2 или более векторных элемента. Сверху где есть иконка «Boolean Groups» выберите пункт «Union selection».
Объединение элементов в фигме с помощью «Flatten seleciton»
Для объединения элементов можно воспользоваться функцией Flatten selection. Для этого выберите нужные элементы и выберите эту надпись из выпадающего списка сверху.
Отличия «Union selection» и «Flatten seleciton» в Figma
При группировке элементов с помощью функции «Union selection», вы сможете редактировать фигуры стандартным образом. Например если создадите прямоугольник с помощью стандартного инструмента «Rectangle», то его можно скруглять с помощью четырёх точек на углах.
Если будете редактировать векторные элементы в группе «Flatten selection», то будут появляться векторные точки. С их помощью можно изменять размеры элементов.
Заключение
В этой статье мы поговорили как объединить в фигме любые элементы слои, фигуры и т.д. Вы узнали о 4 методах как это сделать. Если у вас есть вопросы, то обязательно напишите их ниже в комментариях.
Объединение объектов
Методы комбинирования объектов
В программе Illustrator можно комбинировать векторные объекты, создавая фигуры разными способами. Полученные контуры или фигуры различаются в зависимости от выбранного способа комбинирования объектов.
Эффекты обработки контуров
Эффекты обработки контуров позволяют комбинировать различные объекты с помощью моделей взаимодействия. При использовании эффектов обработки контуров невозможно редактировать способы взаимодействия объектов. См. раздел Объединение объектов с помощью эффектов обработки контуров.
Составные фигуры позволяют комбинировать объекты и указывать, как каждый из них должен взаимодействовать с другими объектами. Составные фигуры являются более гибким средством, чем составные контуры, поскольку обеспечивают четыре способа взаимодействия: сложение, вычитание, пересечение и исключение. Кроме того, нижние объекты не меняются, что позволяет выбирать каждый объект в составной фигуре для редактирования или изменения его режима взаимодействия. См. раздел Объединение объектов с помощью составных фигур.
Составные контуры позволяют использовать объекты для создания отверстий в других объектах. Например, можно создать кольцо из двух вложенных кругов. После создания составного контура контуры ведут себя как сгруппированные объекты. Можно выбрать объекты и управлять ими по отдельности с помощью инструментов «Частичное выделение» или «Групповое выделение», а также выбрать и редактировать составной контур. См. раздел Объединение объектов с помощью составных контуров.
Также можно добавлять объект, используя инструмент «Кисть-клякса». При использовании этой кисти рисуемые контуры добавляются к соседним контурам, которые используют аналогичные атрибуты заливки См. разделы Рисование и объединение контуров с помощью инструмента «Кисть-клякса» и Создание новых фигур с помощью инструмента «Создание фигур».
Объединение объектов с помощью эффектов обработки контуров
Перейдите к палитре «Обработка контуров»
Палитра «Обработка контуров» («Окно» > «Обработка контуров») используется для объединения объектов в новые фигуры.
Используйте кнопки в верхней строке палитры, чтобы создать простые или составные контуры. Чтобы создать составные фигуры, используйте кнопки в этих строках, удерживая нажатой клавишу Alt или Option.
Выберите один из следующих режимов фигур:
Добавить к фигуре
Добавление области компонента к базовой геометрии.
Вычесть из фигуры
Исключение области компонента из базовой геометрии.
Область пересечения фигур
Использование областей компонентов для обрезания базовой геометрии в качестве маски.
Исключить область пересечения фигур
Использование областей компонентов для обращения базовой геометрии, заполненные зоны превращаются в отверстия и наоборот.
Кнопки в нижней строке палитры отвечают за эффекты обработки контуров и позволяют создавать готовые комбинации фигур одним щелчком. (см. Применение эффектов обработки контуров).
A. Все компоненты в режиме добавления B. К квадратам применяется режим вычитания C. К квадратам применяется режим пересечения D. К квадратам применяется режим исключения
Укажите параметры обработки контуров
Параметры обработки контуров можно задать с помощью меню палитры «Обработка контуров» или дважды щелкнув эффект обработки контуров в палитре «Оформление».
Влияет на точность вычисления контура объекта эффектами обработки контуров. Чем точнее вычисление, тем точнее будет рисунок и тем больше времени требуется на создание итогового контура.
Удалить лишние точки
Удаляет ненужные точки при нажатии кнопки обработки контуров.
При разделении и обводке удалять незакрашенные объекты
Удаляет все не имеющие заливки объекты в выбранном рисунке при нажатии на кнопку «Разделить» или «Преобразовать».
Применение эффектов обработки контуров
Эффекты обработки контуров позволяют создавать новые фигуры вне перекрывающихся объектов. Эффекты обработки контуров можно применить с помощью меню «Эффекты» палитры «Обработка контуров».
Эффекты обработки контуров в меню «Эффекты» могут применяться только для групп, слоев и текстовых объектов. После применения эффекта можно сохранить выделение и редактировать исходные объекты. Для изменения или удаления эффекта можно также воспользоваться палитрой «Отображение». См. раздел Применение эффектов обработки контуров с использованием меню «Эффекты».
Эффекты обработки контуров из палитры «Обработка контуров» можно использовать для любых сочетаний объектов, групп и слоев. Итоговое сочетание фигур создается после нажатия кнопки обработки контуров. После этого исходные объекты становятся недоступны для редактирования. Если эффект применяется к нескольким объектам, они автоматически группируются. См. раздел Применение эффектов обработки контуров с использованием палитры «Обработка контуров».
Применение эффектов обработки контуров с использованием меню «Эффекты»
Сгруппируйте объекты, которые следует использовать, и выберите полученную группу.
Переместите используемые объекты в отдельный слой и выберите его.
Чтобы быстро использовать тот же эффект повторно, выберите команду «Эффект» > «Применить [эффект]».
Применение эффектов обработки контуров с использованием палитры «Обработка контуров»
Для применения эффекта обработки контуров к группе или слою выберите группу или слой.
Сводка эффектов обработки контуров
Отслеживаются контуры всех объектов, как если бы они были одним объединенным объектом. Результирующая фигура примет атрибуты объекта, расположенного перед остальными.
Отслеживаются контуры области, перекрываемой всеми объектами.
Отслеживаются все неперекрывающиеся области объектов, перекрывающиеся области становятся прозрачными. Если перекрывается четное число объектов, область перекрытия становится прозрачной. Если перекрывается нечетное число объектов, область перекрытия заполняется заливкой.
Вычитает верхние объекты из нижнего объекта. Эту команду можно использовать для удаления областей иллюстрации путем настройки порядка наложения.
Вычитает нижние объекты из верхнего объекта. Эту команду можно использовать для удаления областей иллюстрации путем настройки порядка наложения.
Делит часть рисунка на фрагменты с заливкой (фрагмент — это область, не разделенная отрезком линии).
Примечание. При использовании кнопки «Разделение» в палитре «Обработка контуров» можно применить инструменты «Частичное выделение» или «Групповое выделение» для независимой работы с полученными фрагментами. Также можно указать, что делать с не имеющими заливки объектами при использовании команды «Разделение»: удалять или сохранять.
По меткам обреза
Удаляет скрытую часть объекта с заливкой. Удаляет все обводки без объединения объектов одного цвета.
Удаляет скрытую часть объекта с заливкой. Удаляет все обводки и объединяет соседние или перекрывающиеся объекты, залитые одинаковым цветом.
Кадрирование (по меткам обреза)
Делит иллюстрацию на отдельные фрагменты с заливкой, после чего удаляет все части иллюстрации, находящиеся за пределами верхнего объекта. Также удаляет все обводки.
Делит объект на отрезки линий, или края. Эта команда используется для подготовки иллюстрации, которая нуждается в треппинге для объектов с наложением цветов См. раздел Создание зоны треппинга.
Примечание. При использовании кнопки «Контур» в палитре «Обработка контуров» можно применить инструменты «Частичное выделение» или «Групповое выделение» для независимой работы с полученными фрагментами. Также можно указать, что делать с не имеющими заливки объектами при использовании команды «Контур»: удалять или сохранять.
Позволяет комбинировать цвета посредством выбора наиболее высокого значения каждого из компонентов цвета. Например, если цвет Color 1 = голубой 20 %, пурпурный 66 %, желтый 40 % и черный 0 %, а цвет Color 2 = голубой 40 %, пурпурный 20 %, желтый 30 % и черный 10 %, то цвет, полученный в результате жесткого смешения, будет представлять собой голубой 40 %, пурпурный 66 %, желтый 40 % и черный 10 %.
Делает основополагающие цвета видимыми через перекрывающую иллюстрацию, а затем делит изображение на составляющие фрагменты. Необходимо указать процентную долю видимости, которая должна быть установлена для перекрывающих цветов.
Компенсирует возможные зазоры между красками в иллюстрации путем создания малых областей перекрытия (называемого треппингом) между двумя граничащими цветами.
Объединение объектов с помощью составных фигур
Составная фигура представляет собой редактируемый объект, состоящий из двух или более объектов, каждый из которых назначает режим фигуры. Составные фигуры позволяют легко создавать сложные фигуры, поскольку можно точно манипулировать режимом фигуры, порядком наложения, фигурой, местоположением и внешним видом каждого включенного контура.
Составные фигуры действуют как сгруппированные объекты и выводятся в палитре «Слои» как . В палитре «Слои» можно просмотреть и выбрать содержимое составной фигуры, а также управлять им, например менять порядок наложения компонентов фигуры. Также для выбора компонентов составной фигуры можно использовать инструмент «Частичное выделение» или «Групповое выделение».
При создании составной фигуры в режимах добавления, пересечения и исключения она получает атрибуты цвета и прозрачности верхнего компонента. Позднее можно изменить атрибуты заливки, стиля и прозрачности составной фигуры. Illustrator облегчает этот процесс, автоматически указывая всю составную фигуру при выборе любой из ее частей, за исключением явного выбора компонента в палитре «Слои».
A. Исходный вариант объекты B. Созданная составная фигура C. Отдельные режимы фигур для каждого компонента D. Стили, применяемые к составной фигуре
Сложение и вычитание векторов
Для логического взаимодействия нескольких отдельных векторов в Фигме есть встроенные инструменты, такие как Объединение, Вычетание, Пересечение и Исключение.
Логические операции в Figma
В результате применения одного из этих инструментов Figma объединяет выбранные векторы в группу, в которой действуют определенные правила отображения.
Результат логической операции
Это значит, что фактически сами векторы не изменяются. Это также означает для нас то, что мы можем вынести слои за пределы этой группы и увидеть их в исходном виде.
Органы управления
Чтобы увидеть кнопки для применения этих инструментов, вам нужно выделить более одного вектора. Иконки взаимодействия находятся вверху экрана на черном фоне.
Инструменты логических операций
Union selection — объединение векторов
Результатом объединения векторов станет то, что для них будут действовать общие параметры заливки, обводки и эффектов.
Учитывайте, что параметры берутся от слоя, который находится выше в древе слоев.
Subtract selection — вычитание
В результате вычитания вы будете видеть всю область самого нижнего слоя, кроме тех ее частей, которые перекрывали остальные выбранные векторы.
Остатком всегда будет часть именно самого нижнего из выбранных слоев.
Intersect selection — пересечение
Пересечение оставляет видимой только ту часть, в которой есть наложение всех выбранных слоев.
При этом параметры заливки, обводки и эффектов будут взяты из верхнего слоя.
Exclude selection — исключение
Exclude показывает те области выбранных слоев, которые НЕ пересекаются.
Нюанс заключается в том, что это логическая операция, и очевидно она работает для двух слоев. Третий слой же инвертирует действие в области пересечения.
На примере хорошо видно, как треугольник делает невидимой видимую часть, и наоборот:
Exclude двух векторов
Exclude трёх векторов
Но если мы добавим еще один такой же треугольник, то он инвертирует действие предыдущего:
Exclude четырёх векторов
Играй бесплатно в браузере!
Заполните форму, мы сделаем иконку
и добави ее в коллекцию