8px grid 1160x620 - Контролируйте отступы и размеры с помощью Sketch плагина Method

Бесплатный плагин для реализации системных процессов 🤓

Скачать плагин

1. Правило 8px

Как контролировать все отступы и размеры?

Уже несколько лет я использую методологию работы, основанную на 8px. Ее цель состоит в том, чтобы улучшить рабочий процесс, и чтобы не возникало таких мыслей, как «попробуйте сместить это немного вправо. Подождите, нет! Лучше влево! Давайте посмотрим на это издалека…» Теория довольно проста: все элементы в вашем дизайне кратны 8 по ширине и высоте, так же, как и расстояние между ними. Если вы хотите узнать больше прочтите эту статью на Medium.

1

2. Функциональность

Размер – это ключевой элемент

Итак, вы, вероятно, даже читали о интервалах кратных 8, но… разве это касается и размеров объектов? Когда вы начинаете проектировать с интервалами кратными 8, как это предлагает Material Design и другие руководства, вы понимаете, что, если размер контейнера слоя, который вы позиционируете, не кратен 8, он просто не подойдет! Однако, если все кратно 8… он всегда будет соответствующего размера; будь это 144, 1600… и т.д.

Я сторонник значений кратных 8, но, если у вас есть другие предпочтения, вы можете изменить значение.

2

2.1. Функция Round

Прощай, калькулятор! Используйте сочетание клавиш Ctrl + 8 и объект станет кратным 8 по высоте и ширине. Идея состоит в том, что, если все размеры объектов кратны 8, то все промежутки между объектами тоже будут кратны 8. Это было проблематично высчитывать для объектов больших размеров, но теперь с функцией «Round» все стало намного проще.

3

2.2. Изменение размера

«Чуть-чуть больше» или «чуть-чуть меньше», но с соотношением сторон 8 на 8. Когда слой уже кратен 8, но вы хотите увеличить или уменьшить его, функция «Resize» поможет вам сделать это быстро.

4

2.3. Перемещение

Перемещение на 8рх – это так просто! Иногда перемещение слоев по холсту довольно медленный процесс. Эта функция поможет, если вы хотите его ускорить, но Sketch’s Nudgeds вам не подходит…

5

2.4. Умные направляющие

Это всегда незавершенная работа с определенными техническими трудностями (я не программист-эмодзи), идея заключается в том, что эта методология мягко сочетается с умными направляющими. Если кто-то хочет попробовать это на GitHub, исходный код полностью изменяемый и бесплатный.

6

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

30 бесплатных плагинов Sketch, которые надо установить прямо сейчас

Вы с энтузиазмом работали в Sketch и за это вы заслужили только высший балл. Но теперь пришло время поднять уровень знаний и улучшить рабочий процесс. Поэтому встречайте.

Sketch Measure. Готовим макет для верстальщика в Sketch 3

Плагин для нанесения расстояний между объектами вашего дизайна, Sketch 3.0.2+ поддерживаемые версии.

Sketch + Craft: союз, созданный на цифровых небесах

В прошлом я был ярым поклонником парочки плагинов Sketch, которые сэкономили мне уйму времени при работе с живыми данными – Content Generator и Unsplash It. Но с Craft все эти возможности собраны в маленький, аккуратный и быстрый инструмент.