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

§Модуль

В нашей дизайн-системе для формирования и измерения пространства мы используем модуль 4x4 px. На основе данного размера пространства рассчитываются все отступы контейнеров и компонентов. Для исключительных случаев мы используем микромодуль 2x2 px.

§Система отступов

Мы используем ограниченное количество токенизированных отступов, помогающих создавать чистые и консистентные макеты. Используйте преднастронные Figmа-токены при создании интерфейсов и конструировании компонентов в дизайн-системе.

§Виды отступов

Внутренний и внешний отступ

Внутренний и внешний симметричный или ассимметричный отступ от всех 4 границ контейнера до контента.

Горизонтальный и вертикальный стек

В горизонтальном и вертикальном стеке отступы определяют вертикальные и горизонтальные отношения между элементами внутри контейнера.