2025-12-08 16:47:43

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

Модульная сетка - мощный инструмент для создания структурированных и визуально сбалансированных интерфейсов. Вот основные действия, как правильно ее настроить в Figma.

Быстрый старт через панель дизайна

Модульную сетку в Figma можно создать буквально в пару кликов, используя панель свойств справа. Сначала выберите нужный фрейм или создайте новый с помощью горячей клавиши F. Затем в правом меню найдите раздел «Layout grid» и нажмите на плюсик, чтобы добавить новую сетку.

По умолчанию активируется точечная сетка (Grid), но для модульного проектирования её тип нужно сменить. Нажмите на иконку рядом с названием и выберите в выпадающем списке вариант «Columns» для вертикального каркаса или «Rows» для горизонтального. Это станет вашей отправной точкой для построения адаптивного и структурированного макета.

Выберите фрейм (Frame) или создайте новый (F или F).
В правой панели найдите раздел «Layout grid» и нажмите «+».
По умолчанию создастся сетка «Grid». Нажмите на иконку с четырьмя точками, чтобы сменить тип на «Columns» (для вертикальной сетки) или «Rows» (для горизонтальной).

Настройка столбцов как основа модульной сетки

Это самый частый вариант для веб/интерфейсов. Именно колонки формируют вертикальную структуру и композицию вашего интерфейса. Ключевым параметром является тип сетки: «Stretch» позволяет колонкам гибко растягиваться вместе с фреймом, что идеально для адаптивного дизайна, а «Left» или «Center» фиксируют их положение.

Классическим выбором является двенадцать колонок, так как это число удобно делится, но вы можете экспериментировать. Не забывайте задавать поля (Margin) по краям фрейма и промежутки (Gutter) между самими колонками - эти «воздушные» отступы критически важны для читаемости. В итоге вы получите чёткий направляющий каркас, к которому будете привязывать все элементы.

Тип (Type): Оставьте «Stretch» (растягивающаяся) для адаптивных сеток или «Left»/«Center» для фиксированных.
Количество (Count): Стандарт - 12 (делится на 2, 3, 4, 6), но можно использовать 8, 10, 16.
Отступ (Margin): Поля слева и справа от контента. Для десктопа обычно 24-120px.
Желоб (Gutter): Расстояние между колонками. Часто 20-32px. Определяет "воздух".
Ширина колонки (Width): При типе «Stretch» рассчитывается автоматически. При «Left» можно задать фиксированную.

Пример для desktop (1280px):

Type: Stretch.
Count: 12.
Margin: 160px (по 80px с каждой стороны),
Gutter: 32px.

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

Тип макета	Кол-во колонок (Count)	Поля (Margin)	Желоб (Gutter)	Тип (Type)	Лучше всего подходит для
Desktop (широкий)	12	120 - 200 px	32 - 40 px	Stretch	Сложные SaaS-панели, маркетплейсы, редакторы
Desktop (стандарт)	12	80 - 120 px	24 - 32 px	Stretch	Корпоративные сайты, блоги, новостные порталы
Планшет	8	32 - 48 px	20 - 24 px	Stretch	Адаптивные лендинги, интернет-магазины
Мобильный	4	16 - 20 px	16 - 20 px	Stretch	Мобильные приложения и мобильная версия сайтов
Фиксированная	Любое (напр., 10)	0 px	20 px	Left/Center	Дашборды, инструменты с точным выравниванием (например, графики)
Макет печати	6 или 12	48 - 72 px	20 - 24 px	Left	Брошюры, буклеты, PDF-документы, проектируемые в Figma

Поля (Margin) задают «воздух» по бокам макета, защищая контент от прилипания к краям экрана. Желоб (Gutter) обеспечивает комфортное расстояние между элементами внутри сетки. Выбор 12 колонок для десктопа считается классическим из-за максимальной гибкости, а меньшее количество колонок для мобильных устройств упрощает вёрстку и делает интерфейс менее перегруженным.

Настройка строк

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

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

Тип (Type): «Top» (сверху вниз) или «Bottom» (снизу вверх).
Высота (Height): Фиксированная высота строки. Например, 8px для базового модуля.

Советы и лучшие практики

Чтобы работа с сеткой была максимально эффективной, превратите её в стиль. Нажмите на иконку с четырьмя точками в настройках сетки и выберите «Create style» - это позволит мгновенно применять один шаблон ко множеству фреймов в проекте.

Продумайте и зафиксируйте базовый модуль, например, 4 или 8 пикселей, и старайтесь, чтобы все размеры и отступы были ему кратны.

Для наглядности давайте вашим сеткам осмысленные имена вроде «Desktop / 12 cols», особенно если вы работаете в команде или создаёте библиотеку компонентов. Не бойтесь создавать вложенные сетки внутри крупных колонок для проработки сложных компонентов, таких как навигация или карточки товаров.

Именуйте сетки: Нажмите на иконку рядом с «Layout grid», чтобы дать имя (например, «Desktop / 12 cols»). Это полезно в библиотеках.
Создайте Style: Кликните на иконку с четырьмя точками в меню сетки и выберите «Create style». Теперь вы можете применять эту сетку к любым фреймам в проекте.
Базовый модуль: Задайте минимальный модуль (например, 4px или 8px). Делайте отступы, размеры кнопок и типографику кратными ему.
Вложенные сетки: Внутри колонки можно создать свой фрейм с новой сеткой для сложных компонентов.
Гайдлайны из сетки: Нажмите Shift + R, чтобы включить линейки. Перетаскивайте направляющие из линеек, чтобы зафиксировать границы колонок для точного выравнивания объектов.

Вывод

Модульная сетка в Figma - это инструмент для проектирования, а не разработки. Она помогает вам, дизайнеру, принимать решения. Разработчик будет реализовывать ее уже на основе технических требований (например, с помощью CSS Grid или Flexbox), но ваша сетка станет отличным визуальным руководством.