Баннер
Технологии

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

Элина Кравец
/ 1 августа 12:00
578
9 мин.

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

как сделать сетку в Фигме
В Figma работают не только дизайнеры. Это удобный простой графический редактор со множеством функций. Источник: Shutterstock

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

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

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

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

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

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

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

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

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

как сделать сетку в Фигме
Типовая разметка появляется по умолчанию. Источник: figma.com

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

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

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

Типы сеток

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

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

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

Колоночная

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

  1. Создайте типовую сетку во фрейме. 
  2. Найдите кнопку Column.
  3. Настройте так, как считаете нужным: задайте количество колонок, ширину отступов и полей.
как включить линейки в Figma
Колонками удобно пользоваться при создании веб-страниц. Источник: figma.com  

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

  • Колонки 

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

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

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

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

  • Поля (Margin) 

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

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

Строчная 

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

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

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

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

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

Модульная

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

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

как включить линейки в Фигме
Модуль — геометрическая фигура на пересечении строк и колонок. Источник: figma.com

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

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

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

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

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

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

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

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

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

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

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

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

как включить линейки в Фигме
Направляющие в «Фигме» находятся во вкладке Rulers. Источник: figma.com

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

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

Получайте интересные статьи на почту

Что нового в мире технологий, как эффективно использовать инновации в жизни и какие устройства купить — расскажем в еженедельной email-рассылке.

E-mail
Хотите узнавать о новых публикациях не заходя на сайт?
Подписывайтесь на анонсы в Дзене и Телеграме
banner image
578
Элина Кравец
Элина Кравец
В конце любого задачника есть раздел с ответами. Пишу такие подсказки для решения жизненных задач.

Комментарии

Комментарии пользователей проходят модерацию, поэтому появляются не сразу

Баннер