Что такое модульная сетка и для чего она нужна
Любой сайт, приложение или журнал сверстаны так, чтобы главная информация бросалась в глаза сразу, а читать текст было легко и удобно. При этом у зрителя не должно возникать ощущение хаоса — для этого содержание структурируют определенным образом.
Перед созданием макета дизайнеры строят сетку — каркас, который затем обрастет красивыми картинками, статьями, кнопками, пушами и другими элементами. Она состоит из одинаковых элементов-модулей. С их помощью легко настроить нужный вид, рассчитать отступы и ширину строк.
Как сделать сетку в Figma
Модульная сетка в Figma — это сочетание строчной и колоночной видов разметки. Разберем, что это такое и как их создать.
Включить сетку в Figma можно только во фреймах с помощью панели управления или через горячие клавиши.
- Задайте фрейм и его параметры.
- В панели инструментов Design (находится справа) найдите вкладку Layout grid и нажмите на «+».
Появится стандартная разметка, похожая на страницу тетради в клетку, с размером ячейки 10×10 px.
Эту же функцию выполняют горячие клавиши Ctrl + Shift + 4, если пользуетесь Windows, и Ctrl + G на MacOS.
Это типовой формат: с ним удобно размечать страницы, контролировать отступы, поля и высоту. Размер ячеек легко изменить во вкладке Size: сделать клеточки крупнее или уменьшить их.
Прозрачность линий изначально составляет 10%, но можно настроить ее по своему усмотрению.
Убрать сетку в «Фигме» тоже просто: нажмите на знак «−» во вкладке Layout grid. Если в проекте несколько сеток, таким же образом удаляются ненужные.
Типы сеток
Есть три формата:
- Grid — включается по умолчанию, страница размечается решеткой в клеточку.
- Column — страница делится на колонки или столбцы.
- Row — страница разделена на строки.
В веб-дизайне используют колоночные сетки, так как разрешение экранов разных устройств меняется, а вместе с ним — высота элементов. Поэтому выравнивать построчно невозможно.
Колоночная
Она настраивается в несколько шагов:
- Создайте типовую сетку во фрейме.
- Найдите кнопку Column.
- Настройте так, как считаете нужным: задайте количество колонок, ширину отступов и полей.
Основные элементы этой разметки:
- Колонки
Чем их больше, тем больше возможностей для дизайна.
Обычно их число кратно четырем: 12 колонок для компьютеров или приложений, 8 — для планшета, 4 — для смартфона.
- Межколоночный пробел (Gutter)
Если он слишком большой, страница выглядит негармонично; излишне узкий пробел даст ощущение тесноты. Как правило, используют пробел 20–32 px.
- Поля (Margin)
Нужны, чтобы содержимое страницы умещалось на дисплее целиком.
Чтобы разместить колонки в центре страницы, используйте кнопку Center. С функцией Stretch разметка автоматически растянется или сожмется, подстраиваясь под ширину фрейма. Если надо сместить ее, нажмите Left или Right. В строчных сетках эти настройки работают так же.
Строчная
Простой способ включить линейки в «Фигме»:
- Откройте типовую сетку.
- В выпадающем меню выберите Row.
- Задайте число строк, размеры межстрочного пробела и полей.
Научиться пользоваться сетками просто — это основа работы дизайнеров. Если проводите часы за рисованием — возможно, эта профессия для вас.
Обучение стоит недешево, но вложение в себя окупится сполна: специальность востребованная. Кредит на образование от Совкомбанка позволит начать учебу и расплачиваться в удобном темпе.
Обучение — одна из самых выгодных инвестиций в себя и свои знания. Если не хотите откладывать обучение, воспользуйтесь образовательным кредитом от Совкомбанка. Выгодные условия займа до 5 млн рублей помогут подобрать тариф для максимально комфортной учебы без большой нагрузки на бюджет.
Модульная
Сделать в Figma модульную сетку легко из сочетания строчной и колоночной.
Модуль — это геометрическая фигура, которая образуется на пересечении строк с отступами между ними. Чаще всего ее используют в полиграфии. В веб-дизайне ее тоже применяют, но сочетают с колоночной.
Чтобы ее построить:
- Создайте колоночную сетку во вкладке Layout grid.
- Настройте ее.
- Добавьте строчную: нажмите плюс в этой же вкладке, появится раздел с еще одним слоем.
- В выпадающем меню выберите Rows и настройте параметры строк, отступов и полей.
Вложенные структуры
Сетки помогают визуализировать будущий проект и разметить страницы. Сочетая их, легко представить, как будет выглядеть работа. Используйте разные цвета и непрозрачность, перемещайте блоки, задавайте свои параметры.
Если делаете несколько вариантов для разных устройств, объедините их в один стиль кнопкой Grid styles. Пользуйтесь им сами или делитесь с командой.
ИИ упростит работу над проектом. О пяти таких нейросетях рассказали в статье.
Направляющие в Figma: что это такое, для чего нужны, как построить
Направляющие — это линии, по которым выравнивают строки текста, границы изображений и кнопок. Так страницы выглядят аккуратно, и читатель не теряется в беспорядочном нагромождении знаков.
С сетками удобно структурировать контент, но если не хочется их строить — с задачей справятся направляющие. Вызвать их просто:
1. С правой стороны рабочего стола нажмите на символ Figma.
2. В выпадающем меню — на View.
3. В следующем появившемся окне — на Rulers.
4. Наведите курсор на появившиеся слева и сверху линии, зажмите правую кнопку мышки и ставьте туда, где хотите выровнять объекты.
Сетки не волшебная таблетка, они не создадут дизайн-проект, но помогут сделать его красивым и упорядоченным. Поэтому начинайте работу не с чистого листа, а с построения структуры, на которой потом будете размещать содержание.
