Слои, группы, фреймы и секции в фигме — как их создать и объединить

Где находится панель слоев в фигме

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

Если левая панель у вас вообще не отображается, воспользуйтесь горячими клавишами Ctrl \ (на Windows) или Command \ (на Mac Os). Если левая панель показана в свернутом (минимальном) виде, нажмите Shift \

Этими же горячими клавишами потом можно свернуть панель обратно.

Как создать (добавить) новый слой в фигме

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

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

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

Удалить — просто нажав на клавиатуре кнопку Delete или Backspace. Также часто бывает удобно не удалять слой безвозвратно, а просто скрыть его и сделать невидимым. Для этого нужно навести на название слоя на левой панели и кликнуть на иконку с глазом. Повторным кликом можно снова сделать его видимым.

Скопировать слой можно стандартными клавишами Ctrl C (на Windows) или Cmd C (на Mac). Вставить скопированный — Ctrl V или Cmd V соответственно. Также часто бывает полезной комбинация горячих клавиш Ctrl D (Cmd D) — она сразу создает дубликат выделенного слоя.

Перемещать слои на рабочем пространстве можно просто просто выделив и потянув их мышкой в нужное место, или же стрелками на клавиатуре. По умолчанию одно нажатие стрелки будет перемещать слой на 1 пиксель, если зажать Shift — сразу на 10. Также можно задавать позицию слоя с помощью значений X и Y на панели Position в правой части интерфейса фигмы.

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

Если вам нужно перемещать слои не в пространстве, а поменять их порядок, вы можете это сделать простым перетаскиванием на панели Layers. Таким образом можно поднять или опустить слой по оси Z.

Как объединить слои в фигме в один, в группу, фрейм или секцию

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

Если вам нужно объединить несколько векторных объектов в один, например чтобы создать сложную фигуру, просто выделите все эти слои и выберите Union Selection. При этом все слои объединятся в один, а значит у них будет общая заливка (Fill), Обводка (Stroke) и другие параметры. Тем не менее, в этом варианте у вас останется возможность разделить эти слои в будущем. Если же воспользоваться функцией Flatten, выбранные фигуры безвозвратно объединятся в единый вектор.

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

Если вы просто хотите объединить слои для удобства, но не хотите при этом сливать их в единую фигуру, оптимальным вариантом будет использование Группы (Group selection). Эта функция никак не меняет свойства и внешний вид слоев, но позволяет работать с ними совместно — например выделять, перемещать или изменять размер. На панели слоев можно будет развернуть содержимое группы и в любой момент продолжить работать отдельно с каждым вложенным элементом. Также группу можно безболезненно удалить (кликнуть правой кнопкой мыши и нажать Ungroup).

Объединение слоев в единый фрейм (Frame selection в выпадающем меню при клике правой кнопкой мыши) открывает множество дополнительных возможностей. Например, в отличие от группы, границы фрейма могут не совпадать с границами вложенных в него слоев. Для фрейма можно задать собственный фон, рамку, скругления. Также фрейму можно добавить сетку, настроить Constraints и так далее. Чаще всего фреймы используются не просто для объединения слоев, но и для других целей, которые невозможно достичь с помощью групп. В частности, отдельные страницы вашего дизайна всегда рекомендуется делать именно в фреймах.

Но как понять, в конкретном случае вам нужна группа или фрейм? Я рекомендую следующий метод. Если вы можете достичь нужного вам результата просто за счет группы — делайте её. Если понимаете, что функционала группы недостаточно — делайте фрейм.

Функция объединения в секцию (Wrap in new section) позволяет для глобального объединения нескольких фреймов. Так например можно объединить адаптивы одной страницы сайта или рекламные макеты, относящиеся к ожной категории товаров. Эта функция никак не влияет на содержимое секции.

Секции, фреймы и группы можно разгруппировать с помощью горячих клавиш Ctrl Backspace (На windows) или Cmd Backspace (На mac). Вложенные в них элементы при этом никак не изменятся.