Layout guides в Figma: колонки, uniform grid, margin и gutter в макете
Сетка в макете — это не «красиво».
Это договорённость: где начинается контент, сколько между колонками воздуха и как всё это поведёт себя при смене ширины.
Что изменилось в названиях
Документация: в мае 2025 функция layout grid была переименована в layout guide.
Практика: поэтому в старых статьях и в разговорах команды вы услышите оба названия. Суть одна.
Три типа
Документация: layout guides бывают трёх типов — uniform grid, columns и rows.
Uniform grid — равномерная сетка из квадратов. Columns — вертикальные колонки. Rows — горизонтальные ряды.
Практика: для интерфейса почти всегда нужны колонки, для иконок и спейсинга — uniform grid, для плотных списков — ряды.
Внешний вид по умолчанию
Документация: по умолчанию направляющие красные, цвет #FF0000, непрозрачность 10 %.
Практика: цвет и прозрачность меняются в настройках направляющей. Единый цвет для всех сеток помогает не путать типы.
Count
Документация: параметр Count задаёт количество колонок. Значение можно ввести числом, задать переменной или оставить Auto.
Практика: Auto удобен для прототипа, конкретное число — для передачи в разработку: разработчику нужны точные значения.
Margin и Gutter
Документация: параметры Margin и Gutter доступны для типа Stretch.
Margin — внешний отступ от края фрейма, Gutter — расстояние между колонками.
Практика: если поле Margin неактивно, значит выбран не Stretch, а Left, Center или Right.
Типы колонок
Документация: колонки бывают Left, Center, Right и Stretch. Для рядов — Top, Center, Bottom и Stretch.
Практика: Stretch тянется вместе с фреймом, остальные привязаны к своей стороне. Отсюда и разное поведение макета при ресайзе.
Поле Width
Документация: при выборе Stretch поле Width недоступно.
Практика: логично — ширина колонки в этом режиме вычисляется из ширины фрейма, отступов и промежутков.
К чему крепится
Документация: направляющие добавляются к фреймам, а не к группам.
Практика: если кнопка Add layout guide неактивна, вы, скорее всего, выделили группу. Оберните её во фрейм.
Как добавить
Документация: направляющая добавляется кнопкой Add layout guide в панели справа.
Одна и та же направляющая может быть включена или выключена для разных фреймов, если применять её осознанно.
Практика: держите в макете один-два типа сеток. Пять разных сеток на экране означают, что договорённости нет.
Связь с constraints
Документация: constraints задают, как слой реагирует на изменение размера родительского фрейма. Типы: Left, Right, Left and Right, Center, Scale — по горизонтали и аналогично по вертикали.
По умолчанию у слоя стоит Top и Left.
Практика: сетка и constraints работают вместе: сетка задаёт геометрию, constraints — поведение.
Сетка и ресайз
Документация: если у фрейма есть layout guide, constraints дочерних слоёв считаются относительно ближайшей колонки.
Практика: это важная деталь. Слой, прижатый влево, будет держаться левой границы колонки, а не фрейма.
Обход правил
Документация: удерживая Cmd (macOS) или Ctrl (Windows) при ресайзе, можно игнорировать constraints.
Практика: полезно разово, вредно системно: именно так в макете появляются элементы «не по сетке».
Порядок работы
- Создайте фрейм под нужную ширину.
- Добавьте layout guide.
- Выберите тип: columns для интерфейса.
- Задайте Count, Margin и Gutter.
- Проверьте тип колонок — Stretch для адаптива.
- Расставьте элементы по колонкам.
- Проверьте ресайзом: что должно тянуться, что стоять.
Практика: шаг 7 — единственный, который показывает реальное поведение.
Где ломается
Margin и Gutter неактивны. Выбран не Stretch.
Нельзя добавить направляющую. Выделена группа, а не фрейм.
Width серый. Режим Stretch.
Элементы «плывут» при ресайзе. Constraints заданы неверно.
Слой не слушается сетки. Он вне фрейма с направляющей.
FAQ
Сколько типов направляющих?
Три: uniform grid, columns и rows.
Чем отличаются Margin и Gutter?
Внешний отступ и промежуток между колонками.
Почему не работает Width?
Колонки в режиме Stretch.
Можно ли привязать к группе?
Нет, только к фрейму.
Как игнорировать constraints?
Удерживать Cmd или Ctrl при ресайзе.
Зачем сетка дизайнеру и разработчику
Практика: сетка — это общий язык.
Дизайнер говорит «контент в двенадцати колонках с отступом 24», разработчик переносит это в CSS Grid и получает то же самое. Без сетки начинается «на глаз» — и расхождения.
Практика: сетка в макете экономит не время дизайнера, а время всей команды на приёмке.
Значения для мобильного и десктопа
Практика: наборы направляющих отличаются по ширине фрейма.
На узком фрейме колонок меньше, отступы короче; на широком — больше и шире. Это не «красивость», а следствие читаемости строки.
Практика: заведите по одной направляющей на каждый брейкпоинт, который есть в проекте, и назовите их одинаково.
Одинаковая сетка во всех фреймах
Практика: сетку удобно применять к нескольким фреймам сразу.
Выделите несколько фреймов и добавьте направляющую — она появится у всех выделенных. Дальше макет выглядит цельно без ручной сверки.
Практика: это же спасает при сборке экранов из чужих файлов.
Направляющая и Auto Layout
Практика: это разные инструменты, и путать их не стоит.
Направляющая — это разметка: она показывает, где что должно стоять, но ничего не расставляет. Auto Layout — это раскладка: он сам управляет расстояниями и порядком элементов.
Практика: в современном макете они работают вместе: направляющая задаёт общий ритм страницы, Auto Layout — внутреннюю жизнь компонента.
Когда сетка мешает
Практика: есть макеты, где жёсткая сетка вредна.
Полноэкранные изображения, лендинги с крупными акцентами, постеры — здесь сетка нужна как ориентир, но не как клетка.
Практика: держите её выключенной на таких фреймах, но не удаляйте: включить обратно быстрее, чем вспоминать значения.
Проверка перед передачей
Практика: пройдитесь по макету с включённой сеткой.
Все ли блоки стоят по колонкам? Нет ли элемента, который «на полпикселя» мимо? Одинаковы ли отступы у повторяющихся секций?
Практика: такие расхождения видно только на сетке — и именно они дороже всего стоят в вёрстке.