В этой инструкции разберёмся с панелью слои (Layers) в фигме. Разберём неочевидные фишки и функции, которые помогут работать быстрее и проще.
Что такое слои в фигме и зачем они нужны?
Слои в фигме показывают содержимое вашего проекта. В панели «Layers» вы можете видеть созданные фигуры, фреймы, группы и т.д. С помощью панели слоёв, вы можете перемещать элементы наверх или вниз относительно друг друга.
![Панель слоев в фигме. Отображение прямоугольников.](https://web-design.center/wp-content/uploads/2021/04/01-sloi-1024x601.jpg)
Например если вы создадите 3 прямоугольника, то они будут выглядеть в панели «Layers» следующим образом.
![Фрейм в слоях](https://web-design.center/wp-content/uploads/2021/04/02-sloi-1024x601.jpg)
Фрейм будет обозначен следующим образом.
Как объединить слои в фигме?
![Объединение слоев в группу](https://web-design.center/wp-content/uploads/2021/04/03-sloi-1024x601.jpg)
Если хотите объединить слои в фигме, то выберите нужные элементы. Нажмите на правую клавишу мыши и выберите пункт «Group selection». Также можно воспользоваться горячими клавишами «Ctrl + G».
![Разгруппировка слоев](https://web-design.center/wp-content/uploads/2021/04/04-sloi-1024x601.jpg)
В панели слоев появится группа. Если вы её переместите, то все содержимое будет также перемещаться. Её можете раскрыть, чтобы посмотреть что есть внутри нажав на стрелку рядом с иконкой группы в слоях.
![Объединение слоёв во фрейм](https://web-design.center/wp-content/uploads/2021/04/05-sloi-1024x601.jpg)
Также вы можете объединить слои с помощью инструмента «Frame». Для этого выберите нужные слои и нажмите на правую клавишу мыши, затем выберите «Frame selection». Также можно нажать на горячие клавиши «Alt + Ctrl + G». В слоях появится иконка фрейма, которая выглядит как 2 вертикальные и 2 горизотальные линии скрещенные между собой.
![Просмотр слоев внутри фрейма](https://web-design.center/wp-content/uploads/2021/04/06-sloi-1024x596.jpg)
Если нажать на стрелку в слоях напротив созданного фрейма, то можно посмотреть его содержимое.
![Преобразование фрейма в группу](https://web-design.center/wp-content/uploads/2021/04/07-sloi-1024x600.jpg)
Если хотите изменить фрейм на группу, то выберите его и справа из списка поставьте значение «Group» вместо «Frame».
Как заблокировать слой в Figma?
![Заблокировать слой в фигме](https://web-design.center/wp-content/uploads/2021/04/08-sloi-1024x603.jpg)
Чтобы заблокировать любой слой в фигме, нажмите на иконку замка напротив нужного слоя. В этом случае вы не сможете его перемещать или выбирать по клику мыши. Это может пригодится, если вы временно не хотите его выделять. Аналогично можно разблокировать слой.
![Горячие клавиши для блокировки слоя](https://web-design.center/wp-content/uploads/2021/04/09-sloi-1024x600.jpg)
Также можно воспользоваться горячими клавишами «Ctrl + Shift + L» для блокировки слоя или его разблокировки.
Как скрыть слой в фигме?
![Как скрывать слои в фигме](https://web-design.center/wp-content/uploads/2021/04/10-sloi-1024x602.jpg)
Чтобы скрыть слой в фигме нажмите на иконку глаза напротив нужного элемента в панели «Layers» слева. Также для того, чтобы скрыть слой можно нажать на горячие клавиши «Ctrl + Shift + H».
Как выбрать заблокированный слой в Figma?
![Выбор заблокированного слоя в фигме](https://web-design.center/wp-content/uploads/2021/04/11-sloi-1024x603.jpg)
Чтобы быстро выбрать слой, который вы заблокировали, наведите на нужный вам элемент курсор мыши, нажмите на клавишу «Ctrl» и на правую клавишу мыши. Перед вами появится список всех слоёв, которые есть в этой области. Выберите нужный элемент и разблокируйте в слоях при необходимости.
Как перемещать слои вверх и вниз в фигме?
Чтобы переместить слой в фигме вверх или вниз, просто наведите курсор на нужный слой в панели «Layers» и переместите его с зажатой левой клавишей мыши вверх или вниз.
![Перемещение элемента вниз в слоях](https://web-design.center/wp-content/uploads/2021/04/12-sloi-1024x601.jpg)
Горячие клавиши для перемещения вверх на 1 слой «Ctrl + [»
![Перемещение элемента в самый низ с панели слоев](https://web-design.center/wp-content/uploads/2021/04/14-sloi-1024x602.jpg)
Для перемещения элемента в самый низ группы нажмите «Ctrl + Alt + [»
![Перемещение элмента наверх в слоях](https://web-design.center/wp-content/uploads/2021/04/13-sloi-1024x600.jpg)
Если нужно переместить элемент на 1 слой наверх, то воспользуйтесь клавишами «Ctrl +]»
![Перемещение элемента в самых верх](https://web-design.center/wp-content/uploads/2021/04/15-sloi-1024x600.jpg)
Для перемещения элемента наверх группы на клавиатуре нажмите «Ctrl + Alt + ]» или «Ctrl + Alt + ъ».
Как быстро переименовать слои в фигме?
![Как переименовать слои в фигме](https://web-design.center/wp-content/uploads/2021/04/16-sloi-1024x600.jpg)
Чтобы переименовать слой в фигме, нажмите на него слева в панели «Layers» 2 раза левой клавишей мыши или нажмите на комбинацию горячих клавиш «Ctrl + R».
![Переключение на нижний слой](https://web-design.center/wp-content/uploads/2021/04/17-sloi-1024x600.jpg)
Если после переименования нажать на клавишу «Tab», то вас переместит к нижнему слою, который можно переименовать сразу.
![Переключение на верхний слой](https://web-design.center/wp-content/uploads/2021/04/18-sloi-1024x598.jpg)
Если нажмёте на «Shift + Tab», то переместитесь к верхнему слою.
Массовое переименование слоёв в Figma
![Массовое переименование слоев](https://web-design.center/wp-content/uploads/2021/04/19-sloi-1024x602.jpg)
Если хотите массово переименовать слои в Figma, то выберите нужные элементы и нажмите «Ctrl + R». Перед вами появится всплывающее окно. Если в верхнее поле вписать какое-то имя выбранного слоя, а затем указать во второе поле новое имя, то будет изменено только это имя (лучше посмотрите видео выше, как это работает).
![Как массово переименовать слои в фигме](https://web-design.center/wp-content/uploads/2021/04/20-sloi-1024x599.jpg)
- Если верхнее поле не трогать и вписать какое-то название во второе поле, то все слои примут это название.
- При нажатии кнопки «Current name» позволяет вставить в название существующее имя слоя.
- Если нажать на кнопку «Number ↑», то добавите к названию символы «$nn». В этом случае к названию прибавиться нумерация в убывающем порядке. Верхний слой будет называться 01, далее 02 и т.д. Если удалить одну букву «n», то будет «1», «2» и т.д. Внизу, рядом с надписью «Start ascending from» можно задать число с которого будет начинаться нумерация.
- При нажатии кнопки «Number ↓» добавите символы «$NN». Нумерация будет в убывающем порядке. Например если вы выделите 10 элементов, то верхний слой будет называться «10», слой ниже «09» и т.д. Внизу, рядом с надписью «Stop descending at» можно задать цифру, которая будет последняя.
Как скрыть панель слоёв в фигме?
![Скрыть панель слоёв в figma](https://web-design.center/wp-content/uploads/2021/04/21-sloi-1024x603.jpg)
Чтобы скрыть (убрать) или открыть панель слоёв в фигме, нажмите на комбинацию горячих клавиш «Ctrl + \». В этом случае скроется панель слоев, а также панель справа (Design, Prototype, Inspect).
![](https://web-design.center/wp-content/uploads/2021/04/image-13.png)
Если хотите скрыть только одну панель слоев «Layers» слева, то нажмите меню слева, сверху, выберите пункт «View», затем вкладку «Panels» и надпись «Show left sidebar» или нажмите на клавиши «Shift + Ctrl + \»
Как свернуть все слои в фигме?
![Свернуть все слои в фигме](https://web-design.center/wp-content/uploads/2021/04/22-sloi-1024x602.jpg)
Чтобы свернуть все слои в фигме нажмите на комбинацию горячих клавиш «Alt + L». В этом случае будут показаны только группы и фреймы, без их внутреннего содержимого.
Как выбрать дочерний элемент в группе?
![Выбор дочернего элемента в группе](https://web-design.center/wp-content/uploads/2021/04/23-sloi-1024x601.jpg)
Если вы хотите переключиться на 1 слой в группе или фрейме и выбрать дочерние элементы или подгруппу, которая есть внутри, то нажмите на «Enter». В этом случае будут выбраны элементы внутри или подгруппы.
Как выбрать родительский элемент в группе?
![Выбор родительского элемента в группе](https://web-design.center/wp-content/uploads/2021/04/24-sloi-1024x601.jpg)
Если вы выберите 1 элемент в группе, а затем нажмёте на клавиши «Shift + Enter», то поднимитесь на 1 слой в этой группе. Будет выбрана родительская группа в слоях.
Как удалить слой в фигме?
Чтобы удалить ненужный слой в фигме, просто выберите его и нажмите на клавиатуре на кнопку «Backspace».
Как дублировать слой в фигме?
Чтобы дублировать любой слой в фигме, нажмите на комбинацию горячих клавиш «Ctrl + D». Также можете более подробно прочитать о том, как копировать и дублировать по умному по этой ссылке.
Заключение
Итак, в этой инструкции мы разобрались с панелью слои (Layers) в фигме. Теперь вы знаете как переименовывать слои, перемещать, выбирать и т.д. Уверен, что это поможет вам работать быстрее.
P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.
Автор статьи: Владимир Чернышов
![Дизайн генератор — комплект figma](https://web-design.center/wp-content/uploads/2021/09/banner-design-generator.png)
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).