Шкала отступов в Figma: как проверить согласованность одного экрана

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

Удобно проверять экран в Figma не по компонентам, а по таблице расстояний. Тогда вы не спорите с собой в духе «кажется, здесь нормально», а сводите экран к нескольким повторяемым значениям. Если после аудита каждый отступ можно отнести к роли — внутренний, групповой или секционный, — экран становится предсказуемым и его проще редактировать дальше.

Что именно нужно проверить на одном экране

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

Практически это значит, что перед измерением стоит разложить экран на три уровня. Первый — микросвязи внутри одного элемента: подпись и пояснение, иконка и текст, заголовок и вторичная строка. Второй — расстояния внутри группы: элементы списка, поля формы, строки в карточке. Третий — расстояния между самостоятельными группами: между карточками, секциями, подвалом и контентом. Когда эти уровни смешиваются, на экране появляется много случайных чисел.

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

Выберите шаг шкалы до аудита

Для одного экрана удобнее сначала выбрать базовый шаг, а уже потом приводить к нему реальные расстояния. На плотных интерфейсах, особенно мобильных, часто удобно мыслить шагом 4 px: он дает и компактные значения, и достаточную свободу для группировки. Это не универсальный закон, а рабочее ограничение, которое помогает не плодить лишние размеры.

Важно не делать шкалу слишком широкой. Если на одном экране вы регулярно используете 5, 7, 11, 13, 18, 22 и 29 px, формально все можно обосновать, но поддерживать такой экран неудобно. Гораздо проще, когда есть короткий набор значений и понятная зона их применения.

Такой набор уже полезен сам по себе: когда вы измеряете экран, вы сравниваете расстояние не с интуицией, а с ролью из таблицы. Если число не попадает ни в одну строку, значит, его придется либо заменить, либо оформить как исключение.

Как провести аудит расстояний в Figma

Начните с одного направления, обычно с вертикали. Выпишите все заметные промежутки сверху вниз: отступ от края контента, расстояние между заголовком и подзаголовком, между блоками, между строками внутри карточек. Не пытайтесь сразу исправлять. Сначала соберите список фактических значений, иначе вы быстро начнете подгонять экран «на глаз» и потеряете исходную картину.

После вертикали проверьте горизонталь: внешние поля, внутренние паддинги карточек, расстояния между текстом и управляющими элементами. На одном экране достаточно 10–15 измерений, чтобы понять, есть ли система. Дальше сгруппируйте повторяющиеся случаи и решите, к какому значению шкалы они должны относиться.

Учебный пример. Возьмем мобильный экран «Настройки уведомлений» шириной 390 px. На нем есть заголовок, короткое описание, две карточки с переключателями и отдельный блок «Выключить все уведомления». При первом проходе получились такие расстояния: 26 px от верха контента до заголовка, 10 px между заголовком и описанием, 23 px до первой карточки, 15 px внутренний паддинг карточек, 11 px между строками внутри карточек, 27 px между двумя карточками, 34 px до опасного действия и 19 px нижний отступ.

Проверяемый результат после такого аудита простой: вместо восьми разных значений на экране осталось пять — 8, 12, 16, 24 и 32 px. Это не делает макет автоматически «лучше», но делает его объяснимым. Другой дизайнер сможет добавить третью карточку и почти без сомнений поставить между карточками те же 24 px, а перед опасным действием сохранить 32 px.

Какие исключения допустимы и как их объяснять

Хорошая шкала не запрещает исключения, а заставляет их назвать. Чаще всего исключение появляется не из-за красоты, а из-за смысла. Например, заголовок и короткое пояснение логично сдвинуть ближе друг к другу, чем пояснение и следующую карточку. Эти расстояния не равны, потому что отношения элементов не равны. Такое исключение не разрушает систему, а поддерживает ее.

На практике полезно оставить не больше двух-трех типов исключений на экран. Первый тип — усиленная связка, когда два элемента должны читаться как единый блок. В учебном примере это 8 px между заголовком и описанием. Второй тип — усиленное разделение, когда вы специально отделяете новую секцию или потенциально рискованное действие. В примере это 32 px перед блоком отключения всех уведомлений.

Есть и третья ситуация — оптическая компенсация. Она бывает, когда формально равные расстояния выглядят неравными из-за крупной иконки, тяжелой тени или нестандартной формы контейнера. Но здесь важно не превратить компенсацию в универсальное оправдание. Если вы оставляете число только потому, что «так приятнее», лучше сначала проверить, нельзя ли решить задачу стандартным значением и более аккуратной композицией.

Полезное правило: исключение должно быть записано теми же словами, что и шкала. Не «здесь 32, потому что красиво», а «здесь 32, потому что начинается отдельная зона с более сильным предупреждающим смыслом». После такой формулировки вы сможете повторить решение на похожем экране без новой ручной подгонки.

Как проверить экран после правок и зафиксировать результат

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

Потом сделайте короткий стресс-тест. Добавьте еще одну строку текста в описание, вставьте третью карточку между существующими и посмотрите, понятно ли по системе, какие отступы ставить. Если для каждого нового места у вас находится значение из шкалы или заранее описанное исключение, экран выдержал проверку. Если сразу хочется «чуть подвинуть вот тут отдельно», значит, система пока не закрыла все сценарии.

В учебном примере итоговая запись может быть такой: внешний ритм экрана — 24 px, внутренний паддинг карточек — 16 px, плотные промежутки внутри карточек — 12 px, текстовые пары — 8 px, перед опасным действием — 32 px. Это уже не просто красивый кадр, а рабочая спецификация для одного экрана. Практически полезный результат в том, что вы можете быстро проверить следующие экраны того же потока: сначала сравнить их с этой таблицей, а уже потом искать новые значения.

Где потренировать такой разбор

Если хочется отработать этот навык не на абстрактном примере, а в учебной программе, посмотрите внутреннюю карточку курса по веб-дизайну. В сохраненном описании каталога есть темы про композицию сетки, отступы, сетки и адаптивный дизайн, а на официальной странице курса отдельно указаны вебинарный формат и практические домашние задания с проверкой. Для задачи со шкалой отступов это полезно именно как сочетание темы программы, самостоятельной практики и внешней проверки макета.