Хотите быстрее научиться создавать сайты? Рекомендую эти видеокурсы!

х
Наверх

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Полезные ссылки:


Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Пройдите, пожалуйста, защиту от спама.