Понравился этот пост? Возможно, вам понравится и BentoBlox » - попробуйте игру здесь, в App Store .

Adobe XD - это настольное приложение, используемое мобильными / веб-дизайнерами для создания каркасов и прототипов приложений и веб-сайтов (если вы знакомы с Sketch, он служит аналогичному варианту использования).

Как разработчик, вы можете писать сторонние плагины для использования inXD, но с оговоркой: вы будете использовать JavaScript. Если вы похожи на меня и на протяжении многих лет наслаждаетесь тонкостями надежной системы типов, перспектива написания программного обеспечения без нее является препятствием.

К счастью, есть TypeScript.

TypeScript - это именно то, на что похоже: типизированный Javascript. Он поддерживает стандартные типы JavaScript (string, number и т. Д.), А также любые пользовательские типы, которые вы можете написать.

Расширяемость TypeScript - разработчики могут расширять базовую систему типов за счет собственных типов - имеет решающее значение. С его помощью система типов может быть расширена для включения типов, уникальных для Adobe XD API (Point, Matrix, Rectangle и т. Д.).



Learn TypeScript - Лучшие учебники по TypeScript (2018) | gitconnected
18 лучших руководств по TypeScript. Курсы отправляются разработчиками и голосуются за них, что позволяет вам находить лучшие… gitconnected.com



В этой статье я расскажу, как создать супер-простой XD плагин с помощью TypeScript.

Прежде чем двигаться дальше, ознакомьтесь с Руководством Adobe по быстрому запуску, чтобы у вас был рабочий проект javascript для начала. К концу у вас должен быть проект, который выглядит как этот (* также не забудьте заменить значение id в manifest.json уникальным идентификатором плагина из Adobe I/O Console).

После изучения руководства по быстрому запуску у вас должен быть проект с двумя файлами: main.js иmanifest.json. В том же каталоге создайте файл main.ts. Здесь вы поместите свой TypeScript код.

Но прежде чем вы начнете писать код, вам нужно будет определить Adobe XD типы, чтобы вы могли их использовать. К счастью, Пабло написал типы для XD, и вы можете их извлечь, создав файлpackage.json в корневом каталоге и добавив его репо в качестве зависимости:

Просто запуститеnpm install из командной строки, чтобы получить типы.

Теперь вы можете начать писать свой плагин. Ниже представлена ​​простая TypeScript программа, которая импортирует пару Adobe типов и рисует фиолетовый эллипс:

Указание типов (const newElement: Ellipse = new Ellipse()) позволяет в полной мере использовать преимущества компилятора и обнаруживать связанные с типами ошибки во время компиляции. Например, указание const newElement: Ellipse = New Color() приведет к тому, что ваш код не будет компилироваться - и избавит вас от кошмара обнаружения ошибки во время выполнения.

Следующее, что вам понадобится, это способ Adobe XD доступа к вашему коду.

Перейдите к файлу manifest.json в корневом каталоге. Этот файл содержит основные метаданные о вашем плагине, включая имена всех команд, которые должны быть доступны пользователю в XD. Добавьте вашу createEllipse команду в коллекцию uiEntryPoints:

Последний шаг, который вам нужно сделать перед компиляцией вашей TypeScript программы и запуском плагина, - это создать tsconfig.json файл. Этот файл определяет исходный код, содержащий определения вашего типа и любые параметры компилятора, которые вы можете выбрать:

На этом этапе вы можете скомпилировать свой TypeScript код. Из командной строки перейдите в корневой каталог вашего плагина и вызовите компилятор с помощью tsc. После этого ваш main.js файл будет содержать javascript, скомпилированный из кода, который вы написали в main.ts.

И теперь вы, наконец, можете запустить свой плагин. Откройте Adobe XD, перейдите к Plugins и щелкните Create Ellipse.

Альт. Это все, ребята. Ознакомьтесь с завершенным плагином здесь и прокомментируйте все свои отзывы об этом небольшом исследовании TypeScript для AdobeXD.

Понравился этот пост? Возможно, вам понравится и BentoBlox » - попробуйте игру здесь, в App Store .