8 и 9 апреля 2016 команда Precious Design Studio и Number Four AG организовала хакатон плагинов Sketch в Гамбурге, Германия. Событие было отлично организовано от начала и до конца. Очень приятно было встретиться всем вместе, общительным и способным дизайнерам и кодерам из сообщества плагинщиков. #SketcHHackday

Ale Muñoz из Bohemian Coding представляет Sketch API

Ale Muñoz из Bohemian Coding представляет Sketch API  —  Instagram swipestudio

Событие происходило в двух отдельных студиях: на открытой площадке и площадке для хакинга. Открытая площадка использовалась для презентаций Craft от InVision Labs,Framer, Facebook Design Tools Team, Open Color Tools и Avocode. Хак-площадка находилась в студии Precious. Здесь команды демонстрировали свои плагин-идеи при поддержке Ale Muñoz и Sam Deane от Bohemian Coding.

Florian поясняет свою задумку, как избежать конфликтов горячих клавиш
Florian поясняет свою задумку, как избежать конфликтов горячих клавиш — Instagram ginettateam
Некоторые команды были сформированы до начала ивента. Другие же искали руку помощи, чтобы реализовать свои плагины. Команда Sketch Runner состояла из 6 людей, которые пришли поодиночке. Мы никогда не встречались до этого ивента. После блиц-резюме мы объединили свои идеи и быстро организовали разношерстную команду мотивированных людей.

С самого начала мы были уверенны в мощности придуманного нами решения. Оно решает важную проблему, с которой постоянно сталкиваются дизайнеры при работе со Sketch.

Муки дизайнера

Работая в Sketch, вы часто делаете довольно рутинные операции для выполнения простых задач. По нашему мнению, такие действия замедляют рабочий процесс:

  • Навигация по страницам, артбордам и слоям в документе
  • Вставка символов и управление ими
  • Применение стилей к тексту и слоям
  • Позиционирование, выравнивание и распределение слоев

Помимо этих базовых, родных функций Sketch, многие дизайнеры активно используют кастомные плагины. Проблемой этих плагинов являются горячие клавиши: их надо запоминать практически для каждой опции, чтобы можно было быстро их применять. Кроме того, горячие клавиши могут повторяться в разных плагинах, что приводит к конфликтам.

Муки дизайнера: навигация, вставка символов и запуск плагинов.
Муки дизайнера: навигация, вставка символов и запуск плагинов.

Решение

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

Мы вдохновились рядом инструментов для поиска и обработчиков команд. Spotlight от OS X, Alfred, Quick Switcher (Slack), Goto Anything (Sublime Text) и Command Palette (Atom) — примеры отличных ускорителей продуктивности, которые нам нравятся. Они делают инструменты, которыми мы уже пользуемся, еще лучше.

И вот мы начали делать наброски, дизайн, разрабатывать и строить наш собственный обработчик команд для Sketch. Мы создали сайт для нашего плагина, доделали демо плагина, разработали бренд и запустили наш сайт за 30 часов. Как раз вовремя к презентациям демо. Вместе с 9 другими командами мы презентовали нашу работу жюри профессионалов Sketch, NumberFour и UberCreative. И как вишенка на торте — мы еще и выиграли первый приз!

Sketch Runner позволяет вам:

  • Запускать любое действие плагина или пункта меню;
  • Перемещаться по страницам, артбордам, группам и слоям;
  • Вставлять символы;
  • Применять общие стили и текстовые стили;
  • Создавать символы и стили.

Демо-видео плагина Runner

Вот несколько примеров, для чего можно использовать Runner:

  • Быстро выравнивать и распределять множество слоев. Прсото введите ‘left', ‘right', ‘horizontal' и т. д., и выберите опцию из результатов (Run).
  • Изменить регистр текста на заглавные или строчные буквы. Просто введите ‘upper' или ‘lower' и выберите Run.
  • Обновить слои в макете с помощью плагина Magic Mirror. Выберите экран с макетом, запустите Runner и введите ‘Refresh' (Run).
  • Добавить спецификации макета в свой документ и экспортировать их, используя плагин Measure (Run).
  • Создать символ, общий стиль слоя или текстовый стиль, просто введя название и выбрав опцию (Create).
    Посмотреть все символы и вставить тот, который нужно (Insert).
  • Соблюдать цвета бренда и интерфейса по всему документу, применяя общие стили (Apply).
    Разметить текст, применяя стили H1, H2 или Paragraph (Apply).

1-2VbezzFw6EjOnY6OKrTDhA

Команда хакерского марафона слева направо: Sergi, Nikolas, Moriah, Aby, Florian и Roy

Что дальше?!

Часть команды взяла на себя развитие плагина как параллельный проект. Мы планируем собрать отзывы пользователей и понемногу улучшать плагин. Если у вас есть свои впечатления о плагине, поделитесь им в Twitter или hello@sketchrunner.com

Скачайте плагин с sketchrunner.com!
Спасибо!
Мы поздравляем серебрянного и бронзового призеров Андрея и Бена! Посмотрите творение Бена — плагин Copy 2 All.

Спасибо precious design studio! Надеемся на скорую встречу!

1-4jsHjjyAJQH-fcouEOm53g

Таймлапс #SketcHHackday на хакерской площадке — Instagram preciousdesignstudio