Как группировать слои в фигме

Как в фигме соединить два вектора

Как объединить в фигме: элементы, слои, фигуры. 4 лучших способа.

Сегодня расскажу как объединить в фигме (Figma). Вы узнаете 4 простых способа, как объединять элементы, слои, векторные фигуры, объекты и т.д. Рассмотрим как сгруппировать элементы с помощью инструмента группа «Group» и фрейм «Frame». Также поговорим про «Union selection» и «Flatten 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 методах как это сделать. Если у вас есть вопросы, то обязательно напишите их ниже в комментариях.

Сложение и вычитание векторов

Для логического взаимодействия нескольких отдельных векторов в Фигме есть встроенные инструменты, такие как Объединение, Вычетание, Пересечение и Исключение.

Логические операции в Figma

В результате применения одного из этих инструментов Figma объединяет выбранные векторы в группу, в которой действуют определенные правила отображения.

Результат логической операции

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

Органы управления

Чтобы увидеть кнопки для применения этих инструментов, вам нужно выделить более одного вектора. Иконки взаимодействия находятся вверху экрана на черном фоне.

Инструменты логических операций

Union selection — объединение векторов

Результатом объединения векторов станет то, что для них будут действовать общие параметры заливки, обводки и эффектов.

Учитывайте, что параметры берутся от слоя, который находится выше в древе слоев.

Subtract selection — вычитание

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

Остатком всегда будет часть именно самого нижнего из выбранных слоев.

Intersect selection — пересечение

Пересечение оставляет видимой только ту часть, в которой есть наложение всех выбранных слоев.

При этом параметры заливки, обводки и эффектов будут взяты из верхнего слоя.

Exclude selection — исключение

Exclude показывает те области выбранных слоев, которые НЕ пересекаются.

Нюанс заключается в том, что это логическая операция, и очевидно она работает для двух слоев. Третий слой же инвертирует действие в области пересечения.

На примере хорошо видно, как треугольник делает невидимой видимую часть, и наоборот:

Exclude двух векторов

Exclude трёх векторов

Но если мы добавим еще один такой же треугольник, то он инвертирует действие предыдущего:

Exclude четырёх векторов

Играй бесплатно в браузере!

Заполните форму, мы сделаем иконку
и добави ее в коллекцию

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

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

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

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

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

Выводы

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

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

Как объединить в фигме: элементы, слои, фигуры. 4 лучших способа.

Сегодня расскажу как объединить в фигме (Figma). Вы узнаете 4 простых способа, как объединять элементы, слои, векторные фигуры, объекты и т.д. Рассмотрим как сгруппировать элементы с помощью инструмента группа «Group» и фрейм «Frame». Также поговорим про «Union selection» и «Flatten 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 методах как это сделать. Если у вас есть вопросы, то обязательно напишите их ниже в комментариях.

Как работают группы и фреймы в Figma

Работая в Figma, вы когда-нибудь сталкивались с проблемой выбора, что использовать фрейм или группу? Оба варианта – контейнеры для размещения объектов, но каждый имеет свои уникальные свойства и случаи использования. Не всегда очевидно, как они отличаются друг от друга, поэтому, чтобы помочь вам различать их, я написал эту статью.

Группы

Как и в других инструментах дизайна, группы в Figma позволяют объединять несколько элементов вместе в один слой верхнего уровня. Границы группы определяются ее дочерними элементами, поэтому изменение размера или перемещение этих элементов приведет к автоматическому изменению границ группы. Вы можете создать группу, выбрав объекты и нажав: ⌘ + G (Mac) или Ctrl + G (Win).

Границы группы автоматически корректируются при изменении размера или расположения дочерних элементов

Создание группы не является деструктивным действием – это означает, что она не навсегда выравнивает или объединяет слои вместе. В любой момент вы можете разгруппировать элементы, нажав: ⌘ + Shift + G (Mac) или Ctrl + Shift G (Win).

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

Также внутри группы вы можете использовать такую функцию, как Smart Selections, чтобы настроить расстояние между элементами. В приведенном ниже примере вы можете увидеть автоматическую настройку границ группы для соответствия общим размерам дочерних элементов при изменении интервала.

Когда вы изменяете размер группы, ее дочерние элементы будут масштабироваться, как векторные изображения. Однако эффекты, контуры и размеры шрифта не будут масштабироваться. Если вы хотите, чтобы эти свойства также масштабировались, используйте инструмент масштабирования (K). Если вы хотите применить ограничения, чтобы определить, как будут изменяться размеры элементов, рассмотрите возможность использования фрейма. Ограничения, применяемые к элементам, всегда будут относиться к ближайшему родительскому фрейму, а не к границам группы. Подробнее об этом в разделе, посвященном фреймам!

Сравнение масштабирования групп, содержащих векторные изображения и текст, с использованием нормального поведения при изменении размера и с помощью инструмента масштабирования (K)

Фреймы

Фрейм в Figma – это то, что мы называем «артборд» в других инструментах дизайна. Мы рассматриваем фреймы, как основополагающий элемент проектов, который может выступать в качестве контейнера верхнего уровня и / или представлять области или компоненты вашего дизайна. Фреймы и возможность их вложения являются неотъемлемой частью создания динамических макетов в Figma.

Прежде чем мы углубимся в поведение и свойства фреймов, давайте быстро рассмотрим три различных способа их создания.

1. Выберите инструмент «Фрейм» (F) и выберите предустановленный размер устройства на панели свойств справа. Это поместит новый фрейм на ваш холст с точными размерами любого устройства, которое вы выбрали.
2. Выбрав инструмент «Фрейм», кликните и перетащите, чтобы создать новый фрейм любого размера.
3. Подобно группированию, вы можете выбрать существующие элементы на холсте и поместить их во фрейм, нажав: ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).

Если вы хотите сделать наоборот и удалить контейнер родительского фрейма, сочетание клавиш будет таким же, как и при разгруппировке: ⌘ + Shift + G (Mac) или Ctrl + Shift + G (Win). Теперь давайте углубимся в уникальные возможности и варианты использования фреймов.

Размеры фреймов

Размеры фреймов устанавливаются независимо от их дочерних элементов. Если вы перемещаете или масштабируете дочерние элементы внутри фрейма, его границы не будут автоматически корректироваться. Если вы хотите, чтобы размеры фрейма подстраивались под содержимое, вы можете нажать кнопку «Resize to Fit» на панели свойств справа.

Границы фрейма не подстраиваются автоматически под содержимое. Если вам нужно сделать это, выберите параметр «Resize to Fit» на панели свойств

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

Изменение размера с ограничениями

При изменении размера фреймы и группы ведут себя по-разному. Как уже упоминалось ранее, размер групп будет изменяться подобно векторным изображениям. Размеры фрейма будут изменены независимо от дочерних элементов. Однако, вы можете задать ограничения, которые влияют на изменение размера этих дочерних элементов относительно их родительского фрейма. По умолчанию эти ограничения установлены на «Top» и «Left».

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

Совет: если вы хотите игнорировать ограничения при изменении размера фрейма, удерживайте клавишу ⌘ (Mac) или Ctrl (Win) при перетаскивании фрейма

Контент, выходящий за границу фрейма

Поскольку границы фрейма можно регулировать независимо от его дочерних элементов, функция «clip content» (доступная на правой панели свойств) может использоваться различными способами. Вот несколько распространенных примеров:

• Скрытие контента за пределами границ: Функция «clip content» (обрезать контент) позволяет скрыть любую часть элемента, выходящую за пределы фрейма.

• Отображение содержимого за пределами границ: Отключая функцию «clip content», вы можете включить отображение элементов, выходящих за границы ваших фреймов. Например, если вы хотите создать фрейм, содержащий цитату с кавычкой, вы можете изменить размер фрейма так, чтобы его границы были выровнены по левому краю текстового поля, оставляя кавычку за пределами фрейма. В подобных ситуациях, так гораздо проще выровнять объекты в вашем дизайне.

• Раскрытие дополнительного контента: Установив надлежащие ограничения и включив «clip content», вы сможете создавать фреймы и компоненты, которые раскрывают больше контента при расширении. Например, у вас есть выпадающее меню, которое используется в разных местах с различным количеством опций. Это дает вам простой способ показать больше пунктов меню, всего лишь изменив размер фрейма.

• Контент, выходящий за границу фрейма, в прототипе: Элементы, которые выходят за границы фрейма, можно настроить для прокрутки внутри прототипа. Например, вы используете фрейм для размещения прокручиваемой карусели. Вы можете настроить поведение выхода за границу таким образом, чтобы его можно было прокручивать при просмотре в режиме прототипа.

Сетки

Сетки макетов (Layout grids) являются уникальной функцией фреймов и могут применяться к любому фрейму или компоненту в вашем дизайне. Это действительно полезно, потому что иногда вы хотите, чтобы области вашего дизайна имели свои собственные независимые сетки. Ограничения изменения размера в Figma также могут работать в сочетании с сетками макетов. В приведенном ниже примере вы можете видеть, что на верхнем уровне есть сетка из 2 столбцов и вложенный вторичный фрейм для панели вкладок, который имеет собственную сетку из 3 столбцов. При установке ограничений, когда размер фрейма верхнего уровня изменяется, дочерние элементы изменяют размер относительно сетки макета.

Вывод

Вы можете по-разному использовать группы и фреймы (вместе или по отдельности) для достижения различных результатов.

Коротко о главном. Используйте группы, если:

• Вы хотите объединить несколько объектов в один управляемый слой
• Вы хотите сгруппировать элементы, которые будут поддерживать фиксированные отношения при масштабировании (например, логотип или символ, состоящий из нескольких фигур)
• Вы хотите, чтобы границы группы автоматически адаптировались к дочерним объектам при манипулировании с ними

Коротко о главном. Используйте фреймы, если:

• Вы хотите контролировать размер фрейма независимо от его содержимого
• Вы хотите определить поведение дочерних элементов при изменении размера
• Вы хотите, чтобы объекты были обрезаны по границам фрейма или находились вне его границ
• Вы хотите использовать вложенный скроллинг в своем прототипе (например, горизонтальная карусель или карта, которую вы можете перемещать по вертикали и горизонтали)
• Вы хотите использовать сетку макета внутри него

Подробнее об использовании фреймов и групп читайте в нашей статье.

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

Слои и маски в Figma

Сначала обратим внимание как работать со слоями в Фигме. Чтобы было более наглядно на иллюстрации представлен простой пример. Здесь создан фрейм, добавлена фоновая картинка, а также три иллюстрации в формате svg, и еще три слоя – это текст напротив картинок. Как видно все слои представлены в левой панели. Для удобства лучше переименовывать слои, чтобы было проще ориентироваться, особенно если их будет много.

Вы можете группировать слои. Например, на иллюстрации есть три файла в формате svg. При помощи клавиши «Ctrl» вы можете выделить эти файлы. Далее нажмите правой кнопкой мыши на данное выделение. Появится меню свойств, в котором необходимо выбрать пункт «Group selection» (горячие клавиши Ctrl+G). Выбрав его, вы сгруппируете эти слои.

Теперь при группировке вы можете взаимодействовать сразу со всеми картинками, которые в группе. То есть, перетаскивание или изменение размеров будет сразу со всеми картинками. Если вам нужен конкретный элемент из группы, например, верхняя картинка «статистика», то вы просто можете кликнуть на нее два раза левой кнопкой мыши, после чего этот элемент выделится, и вы будете взаимодействовать с ним отдельно от группы.

То же самое касается и текста. Можно выделить в правой панели клавишей «Ctrl» необходимые слои текста, после чего нажать правую клавишу мыши и выбрать пункт «Group selection».

Теперь и текст будет находится в одной группе, что упрощает взаимодействие с ним.

По умолчанию у созданной группы будет название «Group». Вы можете переименовывать группы. Например, в первой группе у нас находятся картинки в формате svg, а во второй текст. Кликнув два раза на группу в левой панели, у появится возможность переименовать на «Текст» и «Картинки в формате svg»

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

Кроме того, в Фигме можно группировать группы. Это делается по тому же принципу. Сначала выделяете группы, затем через функцию «Group selection» соединяете их в общую группу. Как видно на иллюстрации группы «Текст» и «Картинки в svg» соединены в группу «Главная страница».

Очень важно чтобы все элементы находились в границе фрейма. В том случае, если какой-то объект (текст или изображение) выйдет за границы фрейма, даже немного, при его экспорте данный элемент не будет присутствовать в макете. Такая ошибка часто возникает при загрузке больших изображений, часть которых может выходить за границы холста.

Кроме того, если вы помещаете элемент из фрейма за его границы, то он удалится из группы, в том случае если была привязка к другим элементам. Таким образом, его необходимо внести в группу заново.

Чтобы сделать обратную операцию – расформировать группу, необходимо выделить одну или несколько групп, после чего нажать на правую кнопку мыши и выбрать из списка свойств пункт «Frame selection» (горячие клавиши Ctrl+Alt+G). Так все содержимое группы распадется на отдельные слои.

Обратите внимание, что возле каждого слоя и группы в левой панели есть два значка в виде замка и глаза. «Глаз» — это функция, которая отключает просмотр слоя или группы, в результате чего на макете они видны не будут, но они будут выделяться при клике. «Замок» — это блокировка элемента, в результате которой слой не будет выделяться. Например, можно заблокировать нижний слой (фон), чтобы он оставался неизменным и не выделялся с остальными элементами.

Как происходит экспорт слоев? Важная особенность Фигмы в том, что экспорт происходит не только группой, но и отдельно по элементам. Например, если вам необходимо экспортировать всю группу, то вы просто кликаете на нее. Если вам необходимы отдельные элементы, то вы выделяете только их. Далее в правой панели меню выберите раздел «Экспорт». Здесь вы также можете определить формат, в котором сохранится ваш проект (PNG, JPG, SVG, PDF). Есть отдельная вкладка с сохранением слоя в формате SVG.

Теперь рассмотрим то как работает маска в слоях. Маски позволяют отображать определенные части других слоев под трафаретом. Для примера добавим в фрейм две фигуры – круг и звезду.

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

Поэтому выделим круг и звезду, объединив их в группу. Далее выделим круг в правой части круг, который будет отвечать за маску, и в верхней части панели меню выберем вкладку «Use as mask» (горячие клавиши Ctrl+Alt+M).

Как видно фигура «Круг» стала рамкой, из-за чего углы звезды обрезались. Теперь все что выходит за пределы этой рамки не будет видно.

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

Итак, мы рассмотрели, как создавать маски и группы слоев, а также экспортировать их в разных форматах.