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

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

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

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

Быстрое создание компонентов Google Material Design

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

Sketch Material design плагин
Генерация таблицы в стиле Material Design

Sketch Material плагин - 1
Пример создания кнопки

Sketch Material плагин - 2
Генерация диалогового окна в стиле Material Design
Sketch Material

Autolayout

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

Launchpad от Anima sketch плагин
Демонстрация работы плагина AutoLayout
Launchpad от Anima

Экспорт экранов в PDF

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

Artboards to PDF

Нарисовать Bootstrap сетку

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

Bootstrap Grid

Bootstrap Guides sketch плагин
Демонстрация работы плагина Bootstrap Guides
Bootstrap Guides

Быстрое создание кнопок

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

Compo sketch плагин
Демонстрация работы плагина Compo
Compo

Быстрая генерация контента

При разработке дизайн-макета у нас не всегда имеются все элементы для подстановки в макет. Вместо этого я использую плагины для быстрой генерации контента.
В этом вопросе мне помогает целых 5 плагинов.
Day Player — генерация изображений и фото (низкого качества);
Content Generator — генерация текстов, фото и заголовков;
Craft от Invision — генерация заголовков, имен, адресов, статей, фото, и всего остального. Лучший плагин в данной подборке;

Craft от Invision
Демонстрация работы плагина Craft
Fetch omg-im icon — быстрая генерация иконок по названию. Плагин берет иконки из базы по адресу img.icons8.com/;
Fetch omg-im icon sketch плагин
Демонстрация работы плагина Fetch omg-im icon
Logo Fetcher — быстрая генерация логотипов. К сожалению, в базе плагина полностью отсутствуют логотипы российских компаний (кроме «Яндекс»). Набора логотипов из плагина достаточно для быстрой генерации секции «Наши спонсоры».
Logo Fetcher sketch плагин
Демонстрация работы плагина Logo Fetcher

Автоматическая установка межстрочного интервала

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

Perfecter sketch плагин
Демонстрация работы плагина Perfecter
Perfecter

Просмотр макета

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

Preview in Browser

Crystal

Генерация карты

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

Map Generator sketch плагин
Демонстрация работы плагина Map Generator
Map Generator

Создание руководства по стилю

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

Sketch Measure sketch плагин
Демонстрация работы плагина Sketch Measure
Sketch Measure

Симуляция нарушения цветовосприятия и нарушение контрастности

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

Stark

Подборка, gif и описание плагинов: Илья Дзенски.