Система отступов за 1 минуту

Привет, VC! Я дизайнер интерфейсов. Работая с чужими дизайн-системами, сталкиваюсь с удивительным разнообразием подходов от откровенно дилетантских до овер-инжиниринга.

Например, на Медиуме есть длинная статья, как сделать систему отступов. Автор статьи делает разухабистый компонент, и мой внутренний инженер ликует, когда это видит.

Изображение со статьи на medium

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

Просто сделайте фреймы нужных размеров и удалите у них фоновый цвет. Они будут вашим набором отступов.
Каждому фрейму добавьте Layout grid с одной колонкой, чтобы она заполняла весь фрейм.
Задайте разные цвета в настройках колонок, чтобы визуально проще было отличать отступы друг от друга.
Из фреймов сделайте компоненты и объедините их в вариант.

Теперь показать или скрыть отступы можно сочетанием клавиш ctrl+g (mac) и shift+g (win).

Ctrl+g

Ссылка на пример в фигме.