Сетка в Figma: виды, настройка и применение¶
Сетка в Figma — это вспомогательная структура верстальных направляющих, накладываемая на холст макета для выравнивания элементов и обеспечения консистентности композиции. Figma поддерживает три типа сеток: колоночные (columns), строковые (rows) и модульные (grid), каждая из которых настраивается отдельно для каждого фрейма. Сетки являются невизуальными при экспорте — они служат инструментом проектирования и не попадают в экспортные файлы.
¶Типы сеток в Figma
¶Колоночная сетка
Колоночная сетка делит фрейм на вертикальные полосы-колонки. Наиболее распространена в веб-дизайне, где типографические сетки обычно содержат 12 колонок для гибкой раскладки. Параметры колоночной сетки:
- Count — количество колонок;
- Gutter — расстояние между колонками;
- Margin — отступ от краёв фрейма до крайних колонок;
- Alignment — выравнивание (Center, Left, Right, Stretch).
При выравнивании «Stretch» колонки автоматически растягиваются при изменении ширины фрейма, что удобно для адаптивных макетов.
¶Строковая сетка
Строковая сетка работает аналогично колоночной, но горизонтально. Она задаёт ритм вертикальных отступов между блоками контента. Параметры те же: количество строк, отступ между ними, поля по краям. Строковые сетки полезны при проектировании длинных страниц и потокового контента.
¶Модульная сетка
Модульная сетка сочетает колонки и строки, образуя решётку из равных ячеек. Каждая ячейка может занимать одну или несколько колонок и строк. Такой подход используется в сложных интерфейсах, где элементы должны занимать фиксированные модули.
¶Как добавить сетку
- Выбрать фрейм на холсте (инструмент Frame, клавиша
F). - В панели справа (Design) найти блок Layout Grid.
- Нажать кнопку
+— по умолчанию добавится сетка из 10 колонок. - Нажать на иконку сетки, чтобы раскрыть параметры.
- В выпадающем списке переключить тип: Grid (модульная), Columns (колоночная) или Rows (строковая).
- Задать нужные значения Count, Gutter, Margin и цвет отображения.
Одновременно к одному фрейму можно применить несколько сеток — например, колоночную для горизонтального ритма и строковую для вертикального. Каждая добавляется отдельной кнопкой + и настраивается независимо.
¶Настройка отображения
Цвет сетки и её прозрачность настраиваются через пикер цвета в блоке Layout Grid. По умолчанию сетка отображается полупрозрачной красной заливкой. Практикуется использование разных оттенков для разных сеток, чтобы визуально различать их на холсте.
Скрыть/показать все сетки на холсте можно сочетанием клавиш Shift + G (в некоторых версиях — Ctrl + Shift + 4 для направляющих). Сетка не влияет на отображение макета при просмотре в режиме Present и не экспортируется.
¶Сетка и привязка (Snap)
Figma автоматически «примагничивает» объекты к границам колонок сетки при перетаскивании, если включена привязка. Это ускоряет выравнивание, но иногда мешает при точечной подстройке — в таком случае привязку можно временно отключить, удерживая клавишу Ctrl (Windows) или Cmd (macOS) во время перетаскивания.
¶Практические рекомендации
- Веб-дизайн: 12 колонок, gutter 16–24 px, margin 20–80 px в зависимости от ширины макета.
- Мобильные интерфейсы: 4 колонки, gutter 16 px, margin 16 px.
- Типографическая вертикаль: строковая сетка с шагом, кратным базовой линии текста (например, 8 px).
¶Сетки в библиотеках и шаблонах
Сетка задаётся на уровне фрейма, поэтому при создании компонентов-шаблонов (например, шаблонов страниц) сетка наследуется автоматически. В командной работе сетки помогают унифицировать макеты: если сетка описана в дизайн-системе, все дизайнеры используют одинаковые отступы и колонки.
¶Экспорт и разработчикам
Хотя сетка не экспортируется как графический объект, разработчики могут считать её параметры прямо из Figma — панель Inspect показывает значения колонок, gutter и margin. Это упрощает передачу верстальщикам точных значений сетки без дополнительной документации.
¶История и контекст
Поддержка сеток появилась в Figma на ранних этапах развития продукта и с тех пор оставалась функционально стабильной. Модульная сетка, колонки и строки покрывают базовые потребности вёрстки; более сложные сценарии (например, динамические сетки, реагирующие на контент) в стандартном инструменте не поддерживаются и реализуются вручную или через плагины.