Модуль

Модуль в 8 пикселей — базовая размерная единица интерфейсов Контура. На основе модуля строятся типографика и контролы, выбираются размеры для иконок, высчитываются отступы между элементами.

Мы используем модуль везде, где это не нарушает эстетики и не противоречит здравому смыслу.

Использование модуля делает дизайн вычисляемым и более предсказуемым:

Модуль упрощает выбор размеров

Без модуля шагом становится 1 px и выбирать приходится из избыточного количества вариантов. Модуль ограничивает выбор и экономит время на рутинных задачах верстки.

Чтобы проще оперировать отступами, кратными модулю, измените дефолтный шаг для перемещения объектов клавишами Shift + → в Figma. Найдите в Figma настройку Nudge amount и установите Big nudge равным половине модуля — 4px или целому модулю — 8px.

После такой настройки можно будет поставить объекты вплотную друг к другу и отодвинуть их на нужное количество модуле.

Модуль делает решения объяснимыми

Когда дизайнеры Контура выбирали радиус скругления кнопок, потребовалось провести голосование. Если системы нет, остается руководствоваться мнением большинства — в ретроспективе результаты таких решений выглядят малопонятными. Когда есть система, принимать и объяснять решение становится проще.

Модуль ускоряет перенос дизайна в код

Если разработчик знает, что все размеры должны быть кратны 8 px, то отступ в 7 px в макете не вызовет вопросов. Разработчик сам примет правильное решение и исправит ошибку без обращения к дизайнеру.

Исторически интерфейсы Контура верстались с отступами, кратными 5 и 10 px, — стандартный выбор для небольших проектов, где удобство круглых цифр важнее системности. Но шаг 10 px проигрывает 8 px, когда речь заходит о построении на основе одного модуля всей дизайн-системы.

Модуль 8 пикселей:

• Можно более последовательно использовать во всех элементах дизайна: контролы, иконки, типографика.
• Имеет меньший шаг — больше вариативности.
• Имеет два подмодуля 4 px и 2 px, а не один, как у 10  px.
• Объекты с размером, кратным 0,5 m = 4 px, всегда можно разместить по центру, в отличие от 10 px сетки, в которой подмодуль нечетный.
• Это отраслевой стандарт.

Модуль 8 px — основной, обозначается «m». В размерах до 40 px допустимо использовать шаг в полмодуля: 0,5 m = 4 px.

Например, у шрифта размером 18 px предусмотрено две высоты строки: 24 px для коротких подписей, где нужна компактность и 28 px для основного набора:

В более мелких размерах этот шаг может быть и четверть модуля: 0,25 m = 2 px. Например, разница в высоте строки для шрифта 14 px − 0,25 m: 22 px для основного набора и 20 px для коротких подписей.

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

Подробнее о том, как использовать модуль в верстке, написано в гайде «Отступы и выравнивание».