Вывод линейки и направляющих

Линейку в Фигме можно вывести из пункта меню View в меню, которое расположено в верхнем левом углу, пункт, который отвечает за вывод пиксельной линейки, называется Pixel Grid, он самый верхний в выпадающем подменю. Также линейку можно вывести горячими клавишами Shift+R).

После вывода линейки можно вытягивать из неё направляющие, горизонтальные и вертикальные соответственно. Просто кликните по нижнему краю линейки и, удерживая нажатие, тяните внизу (или вбок, если это боковая линейка).

Вывод направляющих

Как вывести модульную сетку

Модульная сетка нужна, чтобы увидеть структуру макета. Она позволяет прочитать закономерности и увидеть общий принцип построения колонок и элементов в сетке будущего сайта. Использовать её считается хорошим тоном у дизайнеров.

Можно включить её в меню — Layout Grid или Ctrl+Shift+4 (Control+G на Mac), потом выбрать корневой фрейм (с #, выделенный жирным) и включить видимость в правой панели в блоке Layout Grid. Модульную сетку можно настроить под себя: сделать отступы по бокам, выбрать количества колонок и рядов, определить интервал между ними. Особенно это пригодится в работе с CSS Grid Layout.

 

Включённая функция Layout Grids позволяет вывести модульную сетку

 

Теория~ 5 минут

Глава 3.2.3. Панели инструментов, содержание, возможности

Панель слоёв — слева

Перечень слоёв, страниц и графических элементов находится в левой панели.

У левой панели есть своё верхнее меню, в нём 3 пункта: Layers (слои), Pages (страницы) и Assets (в данном случае — вложения). В Assets кладут многоразовые компоненты, которые после этого можно изменить прямо в Assets и везде, где они использовались, они изменятся автоматически. В Pages можно переключаться между страницами макета.

Панель со вкладками слоёв, страниц и вложений

На одной странице может располагаться весь макет: десктопная и мобильная версия, попапы и прочее. В панели слоёв корневые, самые крупные слои (фреймы) будут выделены жирным и решёткой — #, как и инструмент Frame, с помощью которого они созданы.

У слоёв есть иконки, обозначающие их содержание. Буква T показывает текстовые слои, рисунок — растровую графику, компоненты из Assets подсветятся фиолетовым, векторная графика получит иконку в виде кривой или в виде своей формы (как Ellipse на примере). Скрытые слои (с «закрытым глазиком») становятся серыми.

Во фрейме # 1920 есть группы и векторные элементы. Line 9 — векторный элемент, T — текстовый

Чтобы найти нужный слой, можно поискать его в перечне слоёв или кликнуть на объект и посмотреть в левой панели. Если слоёв много и они вложены один в другой, кликать придётся больше: двойной клик по объекту будет погружать вас на слой глубже. Раскрыть всё содержимое слоя можно зажав Ctrl/Cmd и кликнув на маленькую стрелочку слева от иконки слоя. Или можно кликнуть на область, а потом вызвать правой кнопкой мыши меню и в первом пункте выбрать нужный слой. Можно переключать слои с помощью Tab/Shift+Tab.

Найти нужный слой можно как в панели слоёв, так и вызвав меню правой кнопкой мыши

При выделении слоя данные о нём и его содержимом выводятся в правой панели.

В правой панели вывелись данные о выделенном объекте