Как работать с модульной сеткой в Figma

Рассказываем, как её настроить и использовать сразу в нескольких макетах.

Иллюстрация: Полина Честнова для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Сетка помогает выровнять макет, и в Figma ей пользоваться очень удобно. Читайте, как включить модульную сетку, определиться с её форматом и выбрать подходящие свойства.

Как включить сетку

Модульную сетку можно включить только у фрейма. Если ваш макет свёрстан в группе, её можно быстро превратить во фрейм:

Выделите свою группу на панели слоёв.
Нажмите на неё правой кнопкой мыши и выберите Frame Selection или нажмите Alt + Ctrl (⌘) + G на клавиатуре. Теперь на макет можно наложить модульную сетку.

Чтобы включить сетку, выделите фрейм и на панели настроек нажмите на плюсик в блоке Layout Grid.

Форматы сеток

Grid — простая пиксельная сетка в клетку. По умолчанию Figma включает именно её с шагом в десять пикселей:

Columns — колонки. Делит макет вертикально:

Rows — строки. Делит макет горизонтально:

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

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

Сетки можно комбинировать между собой. Чтобы это сделать, выделите ваш фрейм с макетом и нажмите несколько раз на плюсик напротив слов Layout Grid:

Свойства

Каждую сетку можно отдельно настроить:

Color — цвет и непрозрачность сетки. По умолчанию Figma делает её красной, но если этот цвет недостаточно контрастирует с макетом, его можно изменить.

Size — размер пиксельной сетки. Работает только в формате Grid.

Count — количество колонок или строк.

Gutter — отступы между колонками или строками.

Margin — отступ от сетки до края фрейма.

У Columns и Rows также есть настройка Type:

Stretch ― сетка будет автоматически подстраиваться под ширину фрейма. Этот тип используют чаще всего, так как работать с ним проще.

Center ― сетка выравнивается по центру. С этим свойством у сетки активируется параметр Width (ширина).

Left и Right ― сетка выравнивается по левому или правому краю. Активируется параметр Width (ширина) и Offset (смещение относительно края).

Стиль из сетки

Из сетки можно сделать шаблон стиля и использовать в других макетах. Это поможет выдержать единообразие всех страниц сайта или экранов приложений:

1. Создайте сетку под ваш макет: настройте шаг в пиксельной сетке, укажите количество колонок и отступы между ними.

2. Нажмите на иконку , а в появившемся меню — на плюс. Назовите свою сетку и нажмите Save.

3. Чтобы использовать стиль, выберите любой фрейм, нажмите на иконку и в появившемся меню выберите свою сетку.

Направляющие

Они помогут выровнять макет, если вам не хочется создавать для него модульную сетку. Как пользоваться направляющими:

1. Нажмите на иконку , перейдите в пункт View и нажмите Rulers.

2. Чтобы добавить направляющую, поставьте курсор над появившейся линейкой слева или сверху, зажмите правую кнопку и тяните её туда, где она должна встать.

3. Чтобы поменять положение линейки, поставьте курсор над ней, зажмите правую кнопку мыши и тяните её туда, где она должна встать.

У направляющих есть интересная особенность: если они оказались внутри фрейма, то за его границы они выходить не будут. Это помогает держать макет опрятным и понятным:

Как отключить сетку в Figma

В Figma можно работать с двумя типами сеток: сеткой фрейма (Layout Grid) и пиксельной сеткой. Они отключаются по-разному, поэтому важно понять, какая именно у вас включена.

Если речь о сетке фрейма, сначала выберите нужный фрейм. В правой панели найдите раздел Layout Grid — он находится в настройках фрейма. Рядом с названием сетки есть иконка глаза: нажмите на неё, чтобы скрыть сетку. Если сетка больше не нужна, её можно удалить — для этого нажмите на значок «минус».

Пиксельная сетка включается и отключается сразу для всего файла. Быстрее всего это сделать через горячие клавиши: Ctrl + ’ на Windows или Cmd + ’ на Mac. Также её можно найти в верхнем меню: View → Pixel Grid.

Если сетка появляется только при сильном увеличении, это как раз пиксельная сетка — она помогает выравнивать элементы по пикселям и автоматически включается при зуме.