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

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

Если вкратце: я создал плагин для 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, скринсейверы и другие продукты (Об этом я, скорее всего, тоже как-нибудь напишу). Начните разрабатывать свои продукты!

1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Подробнее

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

Всегда можно обойтись без мышки, применяя горячие клавиши, экономя тем самым свое время. Это одна из многих привычек, которая превращает хорошего дизайнера в первоклассного дизайнера, и в этом она очень полезна!
Git для дизайнеров
Подробнее

Git для новичков и дизайнеров интерфейсов

Этот урок научит вас базовым концептам Git с небольшими практическими советами в конце. Вы не станете мастером Git, но сможете использовать этот сервис самостоятельно вместе с Github и его десктопным приложением.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share