/ sketch

Как Sketch-плагины решают проблемы дизайнеров

Среди дизайнеров началась интересная тенденция: сравнивать между собой Figma и Sketch. Я считаю, что на данный момент Sketch выигрывает соревнование за счет плагинов. Другими словами — Sketch решает проблемы дизайнеров. С помощью плагинов мы можем быстро создавать компоненты, изменять вертикальный ритм, генерировать контент, и так далее. Посмотрим, как Sketch-плагины могут облегчить вашу жизнь. Это — лишь набор тех плагинов, которые использую лично я, и которые сильно помогают мне в решении повседневных дизайн-задач. Думаю, вы найдете в этом списке новое решение для себя.

Установка плагинов

Скачайте Sketch Runner по ссылке: sketchrunner.com с официального сайта и установите плагин, дважды кликнув на файл. Теперь с помощью сочетания клавиш «Ctrl+'» вы можете быстро устанавливать плагины. Я привожу ссылки к каждому плагинов, но большинство из них можно установить с помощью Runner.

Runner sketch плагин
Установка плагинов с помощью Sketch Runner
runner

Быстрое создание компонентов Google Material Design
Изначально у всех пользователей в Sketch по-умолчанию есть набор Material Design компонентов. Но вам стоит попробовать Sketch Material и оценить его простоту. С помощью этого плагина в два клика вы сможете генерировать каноничные кнопки, таблицы, карточки, иконки, и другое.
sketch_material

Быстрая установка вертикального/горизонтального ритма и перестановка элементов
AutoLayout, входящий в плагин Launchpad от Anima — настоящая находка для любителя точно выставлять вертикальный и горизонтальный ритмы. Autolayout помогает установить между компонентами одинаковое расстояние (формируя из них стек), изменять его, а также менять элементы стека местами. Кроме того, создатели Anima обещают возможность создавать целые сайты и выкладывать их сеть.
autolayout

Экспорт экранов в PDF
Нужно быстро выгрузить все или часть экранов в PDF? Используйте Artboards to PDF. Плагин не даёт настроить качество изображения при экспорте, но на данный момент из всех плагинов это самое приемлемое решение.

Нарисовать Bootstrap сетку
Авторы плагинов Sketch предлагают сразу два решения для создания Bootstrap сетки на лету — Bootstrap Grid и Bootstrap Guides. Разница плагинов в том, что Guides создает направляющие на артборде, а Grid создает новый объект поверх заданного. Лично я использую оба эти плагина.
bootstrap

Быстрое создание кнопок
Одна из самых тривиальных, и при этом частых задач — создать кнопку с определенными отступами. Быстро сгенерировать такие кнопки поможет Compo. Но созданием кнопок с заданными отступами плагин не ограничивается. Загляните на официальный сайт плагина, чтобы узнать о всех его возможностях.
compo

Быстрая генерация контента
При разработке дизайн-макета у нас не всегда имеются все элементы для подстановки в макет. Вместо этого я использую плагины для быстрой генерации контента.
В этом вопросе мне помогает целых 5 плагинов.
Day Player — генерация изображений и фото (низкого качества);
Content Generator — генерация текстов, фото и заголовков;
Craft от Invision — генерация заголовков, имен, адресов, статей, фото, и всего остального. Лучший плагин в данной подборке;
craft
Fetch omg-im icon — быстрая генерация иконок по названию. Плагин берет иконки из базы по адресу img.icons8.com/;
fetch-omg
Logo Fetcher — быстрая генерация логотипов. К сожалению, в базе плагина полностью отсутствуют логотипы российских компаний (кроме «Яндекс»). Набора логотипов из плагина достаточно для быстрой генерации секции «Наши спонсоры».
logo-fetcher

Автоматическая установка межстрочного интервала
Если вы сомневаетесь в своих способностях выставить межстрочный интервал в тексте, используйте плагин Perfecter. Плагин помогает установить межстрочный интервал исходя из «золотой» пропорции, «серебряной» пропорции, и даже числа Пи.
perfecter

Просмотр макета на устройствах
Для просмотра созданного макета можно использовать разные способы.
Для просмотра в браузере я использую плагин Preview in Browser. При нажатии горячей клавиши плагин отображает макет в окне вашего браузера.
Для просмотра дизайн-макета на вашем мобильном устройстве я использую нативный Mirror для iOS, или Crystal для Android-платформы. Crystal работает под api Mirror, поэтому проблем с его установкой и настройкой не будет.

Генерация карты
Для быстрой генерации карты я использую Map Generator. Он позволяет быстро создать карту по координатам, или адресу объекта. Приятное дополнение — Map Generator поддерживает Snazzy Maps, что даёт огромный контроль над внешним видом карты.
map_generator

Создание руководства по стилю
Sketch Measure помогает в пару кликов показать свойства объекта — его ширину, высоту, цвет, шрифт, и так далее. Он прекрасно подходит для создания дизайн-системы и руководств по стилю. При отправке проекта на дальнейшую вёрстку используйте Zeplin.
sketch_measure

Симуляция нарушения цветовосприятия и нарушение контрастности
Да, для Sketch есть даже такое. Плагин Stark помогает увидеть, как будет выглядеть ваш макет при нарушении восприятия цвета, а также проверить контрастность макета.

Оригинал поста изначально размещен на ресурсе sketchapp.me по адресу: http://sketchapp.me/kak-sketch-plaginy-reshayut-problemy-dizajnerov/#.WaZkJXzZZiE.facebook

Илья Дзенски

Илья Дзенски

Проектировщик интерфейсов, дизайнер. Пишу о продуктивности, инструментах, и дизайне. Веду канал и чат Perfect Pixel в Telegram http://t.me/pppixel