fbpx
8px-grid

Контролируйте отступы и размеры с помощью 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
6 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Плагин Place Linked Bitmap для использования растра в Sketch
Подробнее

Плагин Place Linked Bitmap для использования растра в Sketch

Place Linked Bitmap - позволяет вам взять растровый файл (JPG, PNG, PSDи т.д.) и поместить его внутри Sketch. «Но Sketch итак позволяет использовать растровые изображения» – вот первое, что приходит на ум. Действительно, может, но плагин позволяет легко и быстро обновить растр уже после размещения, без необходимости его удаления.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
31
Share