Слои в фигме
Уроки

Слои в фигме: подробный разбор панели «Layers» в Figma

В этой инструкции разберёмся с панелью слои (Layers) в фигме. Разберём неочевидные фишки и функции, которые помогут работать быстрее и проще.

Что такое слои в фигме и зачем они нужны?

Слои в фигме показывают содержимое вашего проекта. В панели «Layers» вы можете видеть созданные фигуры, фреймы, группы и т.д. С помощью панели слоёв, вы можете перемещать элементы наверх или вниз относительно друг друга.

Панель слоев в фигме. Отображение прямоугольников.

Например если вы создадите 3 прямоугольника, то они будут выглядеть в панели «Layers» следующим образом.

Фрейм в слоях

Фрейм будет обозначен следующим образом.

Как объединить слои в фигме?

Объединение слоев в группу

Если хотите объединить слои в фигме, то выберите нужные элементы. Нажмите на правую клавишу мыши и выберите пункт «Group selection». Также можно воспользоваться горячими клавишами «Ctrl + G».

Разгруппировка слоев

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

Объединение слоёв во фрейм

Также вы можете объединить слои с помощью инструмента «Frame». Для этого выберите нужные слои и нажмите на правую клавишу мыши, затем выберите «Frame selection». Также можно нажать на горячие клавиши «Alt + Ctrl + G». В слоях появится иконка фрейма, которая выглядит как 2 вертикальные и 2 горизотальные линии скрещенные между собой.

Просмотр слоев внутри фрейма

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

Преобразование фрейма в группу

Если хотите изменить фрейм на группу, то выберите его и справа из списка поставьте значение «Group» вместо «Frame».

Как заблокировать слой в Figma?

Заблокировать слой в фигме

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

Горячие клавиши для блокировки слоя

Также можно воспользоваться горячими клавишами «Ctrl + Shift + L» для блокировки слоя или его разблокировки.

Как скрыть слой в фигме?

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

Чтобы скрыть слой в фигме нажмите на иконку глаза напротив нужного элемента в панели «Layers» слева. Также для того, чтобы скрыть слой можно нажать на горячие клавиши «Ctrl + Shift + H».

Как выбрать заблокированный слой в Figma?

Выбор заблокированного слоя в фигме

Чтобы быстро выбрать слой, который вы заблокировали, наведите на нужный вам элемент курсор мыши, нажмите на клавишу «Ctrl» и на правую клавишу мыши. Перед вами появится список всех слоёв, которые есть в этой области. Выберите нужный элемент и разблокируйте в слоях при необходимости.

Как перемещать слои вверх и вниз в фигме?

Чтобы переместить слой в фигме вверх или вниз, просто наведите курсор на нужный слой в панели «Layers» и переместите его с зажатой левой клавишей мыши вверх или вниз.

Перемещение элемента вниз в слоях

Горячие клавиши для перемещения вверх на 1 слой «Ctrl + [»

Перемещение элемента в самый низ с панели слоев

Для перемещения элемента в самый низ группы нажмите «Ctrl + Alt + [»

Перемещение элмента наверх в слоях

Если нужно переместить элемент на 1 слой наверх, то воспользуйтесь клавишами «Ctrl +]»

Перемещение элемента в самых верх

Для перемещения элемента наверх группы на клавиатуре нажмите «Ctrl + Alt + ]» или «Ctrl + Alt + ъ».

Как быстро переименовать слои в фигме?

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

Чтобы переименовать слой в фигме, нажмите на него слева в панели «Layers» 2 раза левой клавишей мыши или нажмите на комбинацию горячих клавиш «Ctrl + R».

Переключение на нижний слой

Если после переименования нажать на клавишу «Tab», то вас переместит к нижнему слою, который можно переименовать сразу.

Переключение на верхний слой

Если нажмёте на «Shift + Tab», то переместитесь к верхнему слою.

Массовое переименование слоёв в Figma

Массовое переименование слоев

Если хотите массово переименовать слои в Figma, то выберите нужные элементы и нажмите «Ctrl + R». Перед вами появится всплывающее окно. Если в верхнее поле вписать какое-то имя выбранного слоя, а затем указать во второе поле новое имя, то будет изменено только это имя (лучше посмотрите видео выше, как это работает).

Как массово переименовать слои в фигме
  • Если верхнее поле не трогать и вписать какое-то название во второе поле, то все слои примут это название.
  • При нажатии кнопки «Current name» позволяет вставить в название существующее имя слоя.
  • Если нажать на кнопку «Number », то добавите к названию символы «$nn». В этом случае к названию прибавиться нумерация в убывающем порядке. Верхний слой будет называться 01, далее 02 и т.д. Если удалить одну букву «n», то будет «1», «2» и т.д. Внизу, рядом с надписью «Start ascending from» можно задать число с которого будет начинаться нумерация.
  • При нажатии кнопки «Number » добавите символы «$NN». Нумерация будет в убывающем порядке. Например если вы выделите 10 элементов, то верхний слой будет называться «10», слой ниже «09» и т.д. Внизу, рядом с надписью «Stop descending at» можно задать цифру, которая будет последняя.

Как скрыть панель слоёв в фигме?

Скрыть панель слоёв в figma

Чтобы скрыть (убрать) или открыть панель слоёв в фигме, нажмите на комбинацию горячих клавиш «Ctrl + \». В этом случае скроется панель слоев, а также панель справа (Design, Prototype, Inspect).

Если хотите скрыть только одну панель слоев «Layers» слева, то нажмите меню слева, сверху, выберите пункт «View», затем вкладку «Panels» и надпись «Show left sidebar» или нажмите на клавиши «Shift + Ctrl + \»

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

Свернуть все слои в фигме

Чтобы свернуть все слои в фигме нажмите на комбинацию горячих клавиш «Alt + L». В этом случае будут показаны только группы и фреймы, без их внутреннего содержимого.

Как выбрать дочерний элемент в группе?

Выбор дочернего элемента в группе

Если вы хотите переключиться на 1 слой в группе или фрейме и выбрать дочерние элементы или подгруппу, которая есть внутри, то нажмите на «Enter». В этом случае будут выбраны элементы внутри или подгруппы.

Как выбрать родительский элемент в группе?

Выбор родительского элемента в группе

Если вы выберите 1 элемент в группе, а затем нажмёте на клавиши «Shift + Enter», то поднимитесь на 1 слой в этой группе. Будет выбрана родительская группа в слоях.

Как удалить слой в фигме?

Чтобы удалить ненужный слой в фигме, просто выберите его и нажмите на клавиатуре на кнопку «Backspace».

Как дублировать слой в фигме?

Чтобы дублировать любой слой в фигме, нажмите на комбинацию горячих клавиш «Ctrl + D». Также можете более подробно прочитать о том, как копировать и дублировать по умному по этой ссылке.

Заключение

Итак, в этой инструкции мы разобрались с панелью слои (Layers) в фигме. Теперь вы знаете как переименовывать слои, перемещать, выбирать и т.д. Уверен, что это поможет вам работать быстрее.

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

Автор статьи: Владимир Чернышов

Дизайн генератор — комплект figma