UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как Sketch-плагины решают проблемы дизайнеров
Редакція
Редакція

Опубліковано • Оновлено

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

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

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

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

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

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

Autolayout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Найновіші коментарі (0)