Я создал плагин для Sketch. И у вас получится

Если вкратце: я создал плагин для Sketch. Это оказалось несложно. Вам тоже стоит попробовать.

Я интересуюсь инструментами для дизайна. Меня очень вдохновили и впечатлили Джош Пикетт и Матей Хрескак, так что и у меня самого зачесались руки сделать нечто подобное.

Демо:

Вот как все произошло:

  • Все начинается с идеи: Я много вожусь с цифрами в дизайне (например, таблицы данных). В Sketch я создавал такие таблицы, рисуя одну строку или одну ячейку, а затем копировать-вставить N-ное количество раз. Проблема в том, что все числа получаются одинаковыми, в итоге мой дизайн выглядит нереалистично. Но если я начну вручную вбивать каждое число, работа затянется надолго. Мне нужно было как-то автоматизировать этот процесс.
  • Анализ имеющихся решений: У меня уже есть плагин Content Generator, но он не решает мою специфическую задачу. Я искал на Github подходящее расширение, но ничего так и не нашел. Решил, что это хороший знак. Так что пришел к тому, что мне нужно научиться писать плагины под Sketch. Я изучил код Content Generator. Структура файла довольно проста (спасибо команде Sketch). Я просмотрел документацию по плагинам для Sketch. Она написана довольно хорошо, но мне хотелось изучить все до мельчайших деталей.
  • Первая попытка: Я посмотрел на то, как Content Generator генерирует такой контент, как названия городов. Это просто JSON-файл. Так что сначала я сделал первый прототип: вручную создал файл JSON с набором форматированных чисел (по типу $20.50 или 4.50%). Угадайте что? Это и в самом деле сработало, но не так умно, как мне бы хотелось.
  • Доработка: теперь я хотел 1) произвольно генерировать числа в заданном диапазоне и 2) форматировать их. Мои познания в Javascript не так хороши, чтобы взять нужный код прямо из головы, но я хорошо владею искусством гуглить. После открытия 10+ вкладок Stack Overflow, я таки добился своего.
  • Поделитесь с сообществом: Я выслал результат своих трудов своей команде, и людям действительно это понравилось! Я также разместил код на Github, позже обнаружил, что мой плагин появился в директории полуофициальных плагинов для Sketch, а также на сайте Sketch App Sources. И что самое приятное – люди уже начали использовать его для создания собственных расширений! Проверьте эту вилку от RayPS по быстрым наброскам календаря.

Создание плагинов для Sketch

 

Самый важный урок в этом всем – не дайте себя обмануть воображаемым препятствиям в своей голове и просто сделайте это! Я дизайнер. У меня нет компьютерного образования. Я знаю только немного HTML, CSS и Javascript, но и с этим можно уйди довольно далеко. Я создал мобильные приложения, расширения для chrome, скринсейверы и другие продукты (Об этом я, скорее всего, тоже как-нибудь напишу). Начните разрабатывать свои продукты!

Похожие записи

Каллиграфия и леттеринг для начинающих

Изучение каллиграфии – непростой процесс, но с правильными методическими материалами это может занять меньше времени, чем вы думаете.

Zeplin.io – способ подружить дизайнера и верстальщика

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

Руководство дизайнера по DPI и PPI

Этот лонг-рид создан для продвинутых дизайнеров, которые хотят узнать больше о кросс DPI и кросс-платформенном дизайне с самых азов. Никакой сложной математики и нечитаемых графиков, только простые объяснения, разбитые на короткие разделы для лучшего понимания и быстрого применения в вашем дизайн-процессе.