Сетки: Микромодуль — что, зачем, как настроить и работать
Микромодуль или в дизайнерском обиходе «шаг», или среди разработки «суперпиксель», или в Фигме «nudge amount» — это всё одно и то же.
Понятия “микромодуль” в российском продуктовом дизайне не существует. Его популяризировал и продвигал Arnaud Mercier (— икона дизайна, графический и веб-дизайнер, основатель легендарной area17). В России микромодуль, как термин, популяризирует Сергей Гуров (и я).
В Area17 микромодуль был 5px. Позже микромодуль стали использовать в Material HIG: в начале использовали микромодуль 8px, но после нескольких лет практики сместились к более гибкой величине 4px, потому что малый “шаг” даёт больше гибкости при сборке как компонентов, так и UI в финальных макетах. Для сборки UI продуктов Apple разные дизайнеры ранее использовали микромодули 5px и 10px.
Я познакомилась с микромодулем в 2016-м году (спасибо, Олег). И это существенно облегчило мою жизнь в рамках технической сборки UI, потому что дало базис для переменных всех величин и упростило систематизацию этих величин.
Микромодуль — это минимальная единица измерения, от которой мы отталкиваемся, строя все величины (ширины, высоты, размеры, отступы, скругления и проч) в нашем дизайне.
Микромодуль строится по принципу арифметической прогрессии — каждое последующее значение отличается от предыдущего на одну и ту же константу (которая обозначается d). То есть, если наш микромодуль = 4, то мы используем арифметическую прогрессию, где d=4, и каждое следующее значение будет +4: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48 и тд.
Алгоритм настройки микромодуля в Фигме:
1. Открывай Фигму 2. Теперь нажимай в левой панели на строук-лого Фигмы, чтобы вызвать основное меню 3. В нём найди Preferences 4. Во вторичном меню найди в самом низу Nudge amount 5. Нажми на этот пункт меню, чтобы увидеть попап 6. В попапе есть два значения: small nudge и big nudge — в поле big у тебя по дефолту стоит 10ка, поменяй её на тот микромодуль, что ты планируешь использовать (4, 8, а может быть даже 5) 7. Готово. Теперь нажав на Layout guide, чтобы построить сетку, тебе по дефолту будет выходить гридовая сетка, построенная в Big nudge, который ты указал. А если ты зажимаешь Shift, чтобы быстрее перемещаться, то движение будет происходить через указанный микромодуль (поэтому я указываю в big nudge 8-ку).
Используй микромодуль для паддингов и гэпов в автолейаутах, для line height текстовых составляющих дизайна, для радиусов, для марджинов — в общем, применяй, чтобы получить perfect pixel в своих макетах, избавиться от «битков», а фронты радовались, как дети, и обожали тебя за предсказуемость и системность дизайна.
❤️ — использую микромодуль 🔥 — пригодится инфа, спасибо 🤡 — нахуй нужна твоя математика в дизайне
💜 Wassup, designer 💚 Wassup, lead
В этом посте были ссылки, но мы их удалили по правилам Сетки
