Как настроить сетку в Figma

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

Как сделать сетку в Figma

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

Дальше открываем раздел Layout guide в правом меню.

Автоматически появляется сетка с ячейками в 10 пикселей. 

Типы сеток

Пиксельная сетка. Такие сетки подходят для максимально точного выравнивания: можно буквально передвигать элементы по клеточкам. Это удобно при работе с текстом или небольшими фигурами, иконками. 

Колонки. Чтобы самостоятельно изменять тип сетки в Figma, нажимаем на значок решетки в разделе Layout Grid. Во всплывающем окне находим открывающийся список и выбираем Columns или Rows — колонки или ряды.

Колоночная сетка делит фрейм на вертикальные области Именно такая сетка почти всегда применяется в интерфейсах. Колонки позволяют выравнивать контент по горизонтали: например, разместить 5 карточек товаров в ряд так, чтобы между ними было одинаковое расстояние.

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

Сочетание сеток. К одному фрейму можно применить сразу несколько сеток. Для добавления сеток нажимаем на значок «плюс» в разделе Layout Grid. 

В нашем примере используются одновременно ряды и колонны.

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

Как настроить сетку в Figma

Для всех типов сетки можем поменять визуальное оформление: цвет и прозрачность.

Можно сделать сетку темной и едва заметной — так удобнее выравнивать элементы на светлом фоне. 

Если сам фрейм будет темный, то сетку лучше сделать светлой. Для изменения цвета находим поле Color и выбираем любой оттенок в палитре. Справа — поле для настройки прозрачности. Чтобы сетка не отвлекала от основной работы, можем сделать ее почти прозрачной — 10-20%. 

Также можно поменять шаг сетки и сопутствующие размеры.

Для пиксельной сетки можем поменять размер одного квадрата: например, иногда для очень маленьких элементов могут потребоваться клетки по 5px. 

Для колоночной сетки и рядов есть больше опций. Можно менять само количество колонок/рядов, их расположение (растянуть на всю ширину, разместить по центру, слева/справа), настроить ширину, отступы сбоку или сверху/снизу, а также расстояние между колонками/рядами.

Пример:

Как выравнивать контент по сетке

Пиксельная. В этой сетке есть вертикальные и горизонтальные линии. Можем выровнять элементы прямо по квадратикам:

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

Колонны. Как мы уже отметили, они нужны для выравнивания элементов по вертикали. 

Для примера установим сетку в 8 колонок. Сейчас элементы в нашем дизайне располагаются произвольно, бессистемно.

А теперь расставим тексты и картинки так, чтобы слева и справа осталось расстояние размером в одну колонку.

Так мы выровняли дизайн по колоночной сетке:

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

Колонки можно использовать для построения однотипных элементов в один ряд: при создании плиток, галерей с изображениями. 

К примеру, установим размер объекта в две колонки и расстояние между ними — 15px. Получим вот такой ряд:

Ряды. Горизонтальная сетка пригодится, если нужно расставить много элементов в несколько рядов — проконтролировать расстояние между ними и сделать так, чтобы ряды были ровными. Среди элементов могут быть надписи, логотипы, иллюстрации.

Сетка из рядов помогает сделать так, чтобы стоящие рядом иллюстрации и тексты начинались по одной линии. Чтобы настроить интервалы между ними по горизонтали, необязательно добавлять колонки, можно сделать проще. Выделяем объекты, нажимаем Shift, поочередно кликаем на нужные объекты, находим раздел Layout, поле Spacing. Указываем нужное расстояние числом. Этот лайфхак помогает решать простые задачи по выравниванию и не перегружать макет дополнительными сетками.

Сочетание сеток. При большом количестве мелких и/ли разнообразных элементов есть смысл использовать комбинированные сетки: например, пиксельная + колоночная.

Выше мы уже выравнивали текстовые блоки по колонкам. Теперь можем подровнять их еще по клеточкам:

Как убрать сетку в Figma

Иногда сетка мешает восприятию дизайна. Чтобы временно ее скрыть, находим значок в виде глаза в разделе Layout Grid и кликаем по нему. 

Глаз можно открыть в любой момент, и сетка вновь отобразится с теми же настройками.

Если сетку нужно убрать — нажимаем на значок «минус» рядом с глазом.

Обратите внимание: при скачивании фрейма сетка не отображается, ее видно только внутри Figma. То есть перед экспортом скрывать/удалять сетку не нужно. 

Как добавить линейки и направляющие

Вместо сетки или в дополнение к ней можно использовать линейку и направляющие.

Чтобы включить линейку, открываем главное меню — нажимаем на значок с логотипом Figma в левом верхнем углу. Переходим в раздел View и выбираем пункт Rulers.

Чтобы быстрее работать, можно вызвать линейку горячими клавишами Shift + R. Чтобы убрать линейку, нажмите то же самое сочетание повторно.

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

Подводим курсор к линейке. Когда появляется двойная стрелочка, начинаем тянуть направляющую, отмеряя расстояние внутри фрейма.

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

По направляющим также можно выравнивать остальные элементы. А еще — строить собственные сетки.

Сетки, линейки и направляющие — базовые инструменты, которые сильно упрощают работу с композицией. Они нужны для поддержания единого стиля в рамках проекта, продуманного расположения элементов и экономии времени. 

В Figma есть бесплатные плагины для автоматического создания сеток под разные задачи:

• (Easy) Grid — генерирует сетки по заданным параметрам.
• Perspective Grid & Tunnel Generator — создает сетки в перспективе, под углом, с 3D-эффектом. 
• Grid for Tilda Publishing — генерирует сетки как в Тильде.