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

• Что такое модульная сетка и для чего она нужна
• Как сделать сетку в Figma
• Типы сеток
• Колоночная 
• Строчная
• Модульная
• Вложенные структуры
• Направляющие в Figma: что это такое, для чего нужны, как построить

Что такое модульная сетка и для чего она нужна

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

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

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

Модульная сетка в Figma — это сочетание строчной и колоночной видов разметки. Разберем, что это такое и как их создать.

Включить сетку в Figma можно только во фреймах с помощью панели управления или через горячие клавиши. 

1. Задайте фрейм и его параметры. 
2. В панели инструментов Design (находится справа) найдите вкладку Layout grid и нажмите на «+». 

Появится стандартная разметка, похожая на страницу тетради в клетку, с размером ячейки 10×10 px. 

Эту же функцию выполняют горячие клавиши Ctrl + Shift + 4, если пользуетесь Windows, и Ctrl + G на MacOS.

Это типовой формат: с ним удобно размечать страницы, контролировать отступы, поля и высоту. Размер ячеек легко изменить во вкладке Size: сделать клеточки крупнее или уменьшить их. 

Прозрачность линий изначально составляет 10%, но можно настроить ее по своему усмотрению.

Убрать сетку в «Фигме» тоже просто: нажмите на знак «−» во вкладке Layout grid. Если в проекте несколько сеток, таким же образом удаляются ненужные.

Типы сеток

Есть три формата:

• Grid — включается по умолчанию, страница размечается решеткой в клеточку.
• Column — страница делится на колонки или столбцы.
• Row — страница разделена на строки.

В веб-дизайне используют колоночные сетки, так как разрешение экранов разных устройств меняется, а вместе с ним — высота элементов. Поэтому выравнивать построчно невозможно.

Колоночная

Она настраивается в несколько шагов:

1. Создайте типовую сетку во фрейме. 
2. Найдите кнопку Column.
3. Настройте так, как считаете нужным: задайте количество колонок, ширину отступов и полей.

Основные элементы этой разметки:

• Колонки 

Чем их больше, тем больше возможностей для дизайна. 

Обычно их число кратно четырем: 12 колонок для компьютеров или приложений, 8 — для планшета, 4 — для смартфона.

• Межколоночный пробел (Gutter) 

Если он слишком большой, страница выглядит негармонично; излишне узкий пробел даст ощущение тесноты. Как правило, используют пробел 20–32 px.

• Поля (Margin) 

Нужны, чтобы содержимое страницы умещалось на дисплее целиком.

Чтобы разместить колонки в центре страницы, используйте кнопку Center. С функцией Stretch разметка автоматически растянется или сожмется, подстраиваясь под ширину фрейма. Если надо сместить ее, нажмите Left или Right. В строчных сетках эти настройки работают так же.

Строчная 

Простой способ включить линейки в «Фигме»: 

1. Откройте типовую сетку. 
2. В выпадающем меню выберите Row. 
3. Задайте число строк, размеры межстрочного пробела и полей.

Научиться пользоваться сетками просто — это основа работы дизайнеров. Если проводите часы за рисованием — возможно, эта профессия для вас. 

Обучение стоит недешево, но вложение в себя окупится сполна: специальность востребованная. Кредит на образование от Совкомбанка позволит начать учебу и расплачиваться в удобном темпе. 

Модульная

Сделать в Figma модульную сетку легко из сочетания строчной и колоночной. 

Модуль — это геометрическая фигура, которая образуется на пересечении строк с отступами между ними. Чаще всего ее используют в полиграфии. В веб-дизайне ее тоже применяют, но сочетают с колоночной.

Чтобы ее построить:

1. Создайте колоночную сетку во вкладке Layout grid.
2. Настройте ее. 
3. Добавьте строчную: нажмите плюс в этой же вкладке, появится раздел с еще одним слоем. 
4. В выпадающем меню выберите Rows и настройте параметры строк, отступов и полей.

Вложенные структуры

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

Если делаете несколько вариантов для разных устройств, объедините их в один стиль кнопкой Grid styles. Пользуйтесь им сами или делитесь с командой. 

ИИ упростит работу над проектом. О пяти таких нейросетях рассказали в статье.

Направляющие в Figma: что это такое, для чего нужны, как построить

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

С сетками удобно структурировать контент, но если не хочется их строить — с задачей справятся направляющие. Вызвать их просто: 

1. С правой стороны рабочего стола нажмите на символ Figma.

2. В выпадающем меню — на View.

3. В следующем появившемся окне — на Rulers.

4. Наведите курсор на появившиеся слева и сверху линии, зажмите правую кнопку мышки и ставьте туда, где хотите выровнять объекты.

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