Сетка 8pt: как выстроить систему отступов в интерфейсе

Что такое сетка 8pt и зачем она нужна

Сетка 8pt — это договорённость, что все отступы, поля и размеры элементов в интерфейсе кратны 8: 8, 16, 24, 32, 48, 64 и так далее. Для мелких деталей добавляют половинный шаг 4pt.

Зачем ограничивать себя:

• Визуальный ритм. Когда расстояния повторяются, макет выглядит собранным, даже если зритель не может объяснить почему.
• Меньше решений. Вместо выбора между 13, 14 и 15 пикселями дизайнер выбирает из короткой шкалы.
• Простая передача в разработку. Шкала превращается в несколько токенов, и в коде не появляются случайные margin: 13px.
• Масштабирование. Число 8 хорошо делится на 2 и 4, поэтому значения остаются целыми на экранах с разной плотностью пикселей.

Как устроена шкала отступов

На практике используют не все кратные 8, а ограниченный набор шагов. Пример типичной шкалы:

Правило близости: чем теснее связаны элементы, тем меньше отступ между ними. Заголовок карточки ближе к своему тексту, чем к соседней карточке.

Отступы, поля и межстрочный интервал

• Padding (внутренние поля). Кнопка высотой 48 с полями 16 по бокам — классический пример. Высоту задают кратной 8, а текст центрируют.
• Margin и gap (внешние отступы). Расстояние между элементами берут из шкалы, а не подбирают на глаз.
• Line height. Межстрочный интервал тоже делают кратным 4 или 8: для текста 16px подойдёт 24px, для 14px — 20px. Тогда строки ложатся на базовую сетку, и блоки текста выравниваются с соседними элементами.

Почему иногда нужен 4pt: мелкий текст, бейджи, иконки 16–20px и плотные таблицы не помещаются в шаг 8. Половинный шаг закрывает такие случаи, не ломая систему.

Как применить в Figma

1. Настройте nudge. В настройках Figma шаг перемещения с Shift можно задать равным 8 — объекты будут двигаться по сетке.
2. Добавьте layout grid. Квадратная сетка 8px на фрейме помогает на старте, потом её можно скрыть.
3. Используйте Auto Layout. Задавайте padding и gap только значениями из шкалы — так компоненты сами сохраняют ритм.
4. Заведите переменные. В Figma Variables создайте коллекцию space с числовыми значениями и привязывайте их к полям и отступам вместо ручного ввода.
5. Проверяйте компоненты. Высоты кнопок, полей ввода и строк таблиц тоже должны быть кратны 4 или 8.

Как передать систему разработчикам

Шкала отступов — это дизайн-токены. Их удобно описать один раз и использовать везде:

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}

.card {
  padding: var(--space-3);
  gap: var(--space-2);
}

Что важно согласовать с командой:

• Одни и те же имена токенов в Figma и в коде.
• Единицы. Часто в коде используют rem, тогда 8px = 0.5rem при базовом размере 16px.
• Запрет на произвольные значения. Линтер или ревью помогают ловить отступы вне шкалы.

Частые ошибки

• Слишком длинная шкала. Если шагов двадцать, система перестаёт упрощать выбор.
• Сетка только для отступов. Если высоты элементов и line height случайные, ритм всё равно ломается.
• Подгонка шрифта под сетку любой ценой. Размер шрифта не обязан быть кратным 8 — кратным делают межстрочный интервал.
• Исключения без правил. Оптические поправки нормальны, но их стоит фиксировать, а не множить.