Система отступов за 1 минуту
Привет, VC! Я дизайнер интерфейсов. Работая с чужими дизайн-системами, сталкиваюсь с удивительным разнообразием подходов от откровенно дилетантских до овер-инжиниринга.
Например, на Медиуме есть длинная статья, как сделать систему отступов. Автор статьи делает разухабистый компонент, и мой внутренний инженер ликует, когда это видит.
Изображение со статьи на medium
Но если вдруг вам лень так заморачиваться, есть другой способ:
- Просто сделайте фреймы нужных размеров и удалите у них фоновый цвет. Они будут вашим набором отступов.
- Каждому фрейму добавьте Layout grid с одной колонкой, чтобы она заполняла весь фрейм.
- Задайте разные цвета в настройках колонок, чтобы визуально проще было отличать отступы друг от друга.
- Из фреймов сделайте компоненты и объедините их в вариант.
Набор отступов
Теперь показать или скрыть отступы можно сочетанием клавиш ctrl+g (mac) и shift+g (win).
Ctrl+g
Ссылка на пример в фигме.
мой внутренний инженер ликует, когда это видит.осталось научиться правильно применять предлоги "с/из" и "в/на"
Изображение со статьи на mediumмой внутренний редактор плачет, когда это видит.
О, спасибо!) я буду присылать вам на вычитку все свои статьи.
Если честно, выглядит как какой-то ненужный геморрой. Начинающим дизайнерам проблема понять (почему-то) как работает система отступов и вот эти вот «хаки» отнюдь не позволяют им использовать отступы правильно.
А чтобы пользоваться нормально системой отступов достаточно использовать сетку и baseline.
Дмитрий, это нужно для интерфейсов, когда собираешь в auto layout все экраны приложения или веб интерфейса. Если есть система отступов это исключает ошибки ( где-то 36 поставишь, где-то 38) Разработчикам потом не нужно ломать голову какой в итоге в стили заводить.
Этот подход меня пугает тем, что для разработчика становится бессмысленным подход копирования CSS стилей из инспекта Фигмы. Если вручную прописывать отступы в автолейаутах, их легко оттуда скопировать. А так - везде будет 0. @Женя Жуланова интересен ваш опыт.
Комментарий недоступен
кстати, тоже об этом подумала. вроде же автолейаут он на то и лейаут, чтобы посмотреть в его настройках расстояние. а так там будет ноль, и придется проверять, какие я там компоненты пробелов поставила - 8рх или 12рх (если они изначально у меня скрыты, их нужно будет выискивать и включать отображение).