Сетка в Figma: назначение и настройка¶
Сетка в Figma — это вспомогательный инструмент вёрстки, отображаемый в виде вертикальных и горизонтальных направляющих линий поверх холста (артборда). Сетка помогает выравнивать элементы макета, соблюдать ритм отступов и выдерживать консистентность компоновки при проектировании интерфейсов. В Figma сетка реализована в двух основных формах: колоночная сетка (Layout Grid) и сетка-модуль (Grid), применяемая к отдельным фреймам.
¶Типы сеток в Figma
Figma поддерживает три типа сеток, которые добавляются к фреймам и компонентам:
| Тип | Назначение | Основные параметры |
|---|---|---|
| Columns (колонки) | Вертикальное разделение макета, адаптивная вёрстка | Количество колонок, ширина, отступ (gutter), поля (margin) |
| Rows (строки) | Горизонтальное выравнивание по базовой линии | Количество строк, высота, отступ, поля |
| Grid (модульная сетка) | Квадратная сетка для пиксельной точности | Размер ячейки (например, 8×8, 10×10) |
Колоночная сетка является наиболее востребованной при проектировании веб-интерфейсов: она задаёт структуру контейнера, в рамках которой размещаются карточки, блоки и навигационные элементы.
¶Как добавить сетку к фрейму
Сетка применяется только к фреймам (Frame) и компонентам — не к произвольным фигурам или группам. Порядок действий:
- Выбрать фрейм на холсте или в панели слоёв.
- В панели свойств справа найти блок Layout Grid и нажать знак «+».
- По умолчанию добавляется модульная сетка 10×10 пикселей с прозрачностью 10 %.
- Нажать на иконку сетки (九 точек) в строке свойства, чтобы открыть панель настроек.
В панели настроек доступны:
- Тип сетки: Grid, Columns, Rows.
- Count — количество колонок или строк.
- Section width / Gutter — ширина колонки и расстояние между ними.
- Margin — отступ от краёв фрейма до крайних колонок.
- Alignment: Left, Center, Right, Justified — выравнивание колонок внутри фрейма.
- Color и Opacity — цвет линий и прозрачность отображения.
¶Настройка колоночной сетки для веб-интерфейса
Типичный веб-макет строится по 12-колоночной сетке. Рекомендуемые параметры для десктопного разрешения:
- Count: 12
- Alignment: Center
- Margin: 80–120 px (в зависимости от ширины контейнера)
- Gutter: 24 px
Для мобильных макетов используется 4-колоночная сетка с полем 16 px и отступом 16 px. Figma позволяет задать разные сетки для разных фреймов (десктоп, планшет, смартфон), но не автоматизирует переключение сеток при изменении ширины фрейма — для этого сетку нужно настроить вручную на каждом фрейме.
¶Модульная сетка и базовая сетка (Baseline Grid)
Модульная сетка (тип Grid) задаётся размером ячейки и применяется преимущественно при работе с иконками, пиксельной графикой и компоновкой элементов, требующих строгого кратного выравнивания. Распространённые размеры модулей: 4×4, 5×5, 8×8 пикселей.
Сетка строк (Rows) используется для создания базовой сетки типографики: при высоте строки (line height) 24 px сетка строк с шагом 24 px позволяет выравнивать все текстовые блоки по единому вертикальному ритму.
¶Отображение и скрытие сетки
Сетка видна только в редакторе Figma и не экспортируется в макет. Управление отображением:
- Ctrl + Shift + ' (Windows) или Cmd + Shift + ' (macOS) — переключение видимости всех сеток.
- Ctrl + Y — режим «предпросмотр руля» (rulers), который показывает направляющие и сетки.
- Скрыть сетку конкретного фрейма можно, убрав галочку в блоке Layout Grid в панели свойств.
¶Практические рекомендации
- Сетка задаётся на фрейме верхнего уровня (десктоп-фрейм, мобильный фрейм) и наследуется всеми вложенными элементами визуально, но не является автоматическим ограничением позиционирования.
- Figma не «приклеивает» элементы к линиям сетки автоматически: выравнивание выполняется вручную или с помощью инструментов выравнивания (Align) и распределения (Tidy Up, Space Between).
- Для масштабируемой вёрстки рекомендуется использовать Constraints и Auto Layout совместно с сеткой: сетка задаёт структуру, Auto Layout — реальное поведение блоков при изменении ширины.
- Цвет сетки по умолчанию красный с прозрачностью 10 %; для тёмных макетов рекомендуется менять цвет на более контрастный.
¶История и развитие
Колоночная сетка появилась в Figma в 2016 году в ранних версиях продукта и изначально поддерживала только базовые параметры (количество, ширина, отступ). Позже добавлены выравнивание (Alignment), независимые настройки для строк и возможность задавать сетку для нескольких фреймов одновременно через выделение нескольких фреймов. На 2024 год сетка остаётся встроенным инструментом Figma и не требует плагинов, хотя для специфических задач (например, сетка с золотым сечением или модульная сетка на основе 8-пиксельной системы) используются сторонние плагины.
Источники:
- Документация Figma Help Center: Layout grids
- Figma Blog: Design systems and grid best practices
- Материалы конференции Config (Figma)