Здесь, в Yummygum, мы любим использовать Adobe XD. Мы можем быстро создать прототип, каркас, построить и использовать библиотеку компонентов. Мы также религиозно используем Понятие. Это чрезвычайно удобное и универсальное рабочее пространство и инструмент для ведения заметок, упрощающий повседневную деятельность и управление проектами. Как здорово было бы, если бы мы могли каким-то образом объединить эти два инструмента; заполнить базу данных Notion реальными данными и синхронизировать их с нашими проектами?

Мы решили эту проблему, создав Linkit, плагин для Adobe XD. С помощью Linkit вы можете легко синхронизировать свои базы данных Notion с вашими проектами Adobe XD.

Как это работает

Решение, которое мы сделали, столь же изящно, сколь и просто. Linkit действует как мост между базами данных Adobe XD и Notion. После того, как вы добавили Linkit в качестве интеграции в Notion, вы можете начать привязывать столбцы базы данных к своему дизайну. Linkit сопоставляет имена слоев файла Adobe XD с содержимым в вашей базе данных Notion, обеспечивая полную синхронизацию содержимого. Когда вы вносите изменения в Notion, вы просто используете кнопку «Повторно синхронизировать с Notion» в плагине Linkit в Adobe XD. Все данные, связанные в Adobe XD, будут обновлены.

Интерфейс плагина прост в использовании. Но под капотом много чего происходит. И это именно то, что движет нами в Yummygum, прикладывать усилия, чтобы сделать вещи суперудобными. Давайте немного углубимся в технические детали и посмотрим, как это работает.

Пользовательский интерфейс Adobe

UXP (Unified Extensibility Platform) позволяет создавать подключаемые модули для XD и других приложений Creative Cloud с использованием HTML, CSS и JavaScript! То, что он работает в Интернете, — это здорово, потому что это означает, что мы можем использовать React для разработки нашего плагина! В основном мы используем API UXP для взаимодействия с холстом Adobe XD. Мы также храним некоторые данные, такие как ключ API Notion и какие элементы синхронизируются с Notion с помощью API LocalStorage. Этот API работает так же, как в Notion, так и в вашем браузере.

UXP позволяет разработчикам плагинов использовать несколько разных типов интерфейсов. Для Linkit мы использовали комбинацию Panel и Modals в качестве пользовательского интерфейса. Ознакомьтесь с обширной документацией по жизненному циклу подключаемого модуля Adobe XD, чтобы узнать больше о различных типах интерфейсов, которые вы можете использовать для своего подключаемого модуля.

Панель

Панели расположены на левой боковой панели Adobe XD. Они простираются полностью вверх и вниз и могут изменять размер по горизонтали. Мы используем панель для Linkit для размещения основного интерфейса плагина.

Хорошо иметь панель, но как мы можем создать ее программно? Инженеры Adobe создали что-то очень полезное для всех разработчиков плагинов. Используя конструктор PanelController UXP, мы можем определить нашу пользовательскую панель. Он принимает два параметра: первый — пользовательский (React) компонент, в данном случае <App />, и второй объектный параметр, содержащий конфигурацию панели. Помимо идентификатора панели здесь также можно указать любые пункты меню, которые будут отображаться в меню плагина.

Модальные

Помимо панелей, вы можете создавать модальные окна с помощью UXP. Модальные окна — это настраиваемые всплывающие окна, которые содержат некоторую логику приложения. Для Linkit мы используем несколько разных модальных окон, чтобы провести пользователя через процесс установки и настройки. Modal может взаимодействовать с любым из API-интерфейсов UXP, например, хранить токен в LocalStorage.

Создание модального окна работает аналогично тому, как вы создаете панель. Вы используете конструктор CommandController, которому вы передаете компонент и некоторые дополнительные конфигурации. Как заголовок окна и размер окна. Чтобы открыть Modal, вы просто вызываете свойство .run() на контроллере.

Создание UXP-плагина

Внутри панелей и модальных окон можно размещать любые компоненты HTML или React, но рекомендуется максимально использовать компоненты Spectrum UXP. Spectrum — это система дизайна Adobe, предоставляющая единый набор компонентов, которые имеют одинаковый стиль во всех приложениях Adobe. Использовать компонент Spectrum UXP в плагине UXP довольно просто. Нет библиотек или таблиц стилей для включения. Просто используйте их, как любой другой HTML-тег.

Объедините компоненты Spectrum с некоторой логикой приложения, и вы быстро разработаете подключаемый модуль. Теперь давайте посмотрим, как еще больше расширить функциональность вашего плагина, подключившись к внешнему API. Мы будем использовать Linkit в качестве примера, показав вам, как он подключается к Notion API.

Подключение к внешнему API

Одна из причин, по которой мы так любим Adobe XD, заключается в том, что он поставляется с множеством невероятных функций. Что касается Linkit, мы чувствовали, что одним из немногих возможных способов сделать Adobe XD еще более ценным для нас было использование сильных сторон внешнего инструмента/источника данных. Подключение к внешнему API — отличный способ расширить функциональность вашего плагина. Это будет работать немного по-разному в зависимости от того, к какому API вы подключаетесь, но общие шаги одинаковы. Вы инициализируете клиент, а затем используете его для выполнения вызовов API. К счастью для Linkit, у Notion есть простой и удобный клиент для Notion API.

Мы настроили клиент в кодовой базе Linkit в отдельном файле. Для инициализации клиента и выполнения вызовов Notion API нам нужен только токен. Пользователь вводит токен из Notion в интерфейс плагина Linkit, который мы описали ранее. Модальное окно использует метод setNotionToken() для установки токена.

Затем мы можем выполнять вызовы API к Notion из разных компонентов, вызывая методы, представленные в клиентском объекте notion.

Использование данных API в Adobe XD

Каждый API будет взаимодействовать с данными и управлять одними и теми же данными по-разному. Для большинства кодовых баз это означает, что вам нужно будет разработать какой-то метод преобразования, который будет форматировать данные во что-то, что можно использовать во второй части программного обеспечения. В случае с Linkit это означало, что нам нужно было преобразовать данные стиля текста, полученные из Notion, во что-то, что понимает Adobe XD UXP API.

Преобразование стилей текста в Adobe XD

Допустим, вы хотите использовать внешний API в качестве источника для создания стилизованного текста в Adobe XD. Как это работает с использованием UXP:

  1. Создайте или запросите текстовый объект (слой)
  2. Задайте для свойства Text объекта нужную строку
  3. Используйте такие свойства, как styleRanges, подчеркивание и зачеркивание, чтобы применить стили текста к (частям) текста.

Вот пример.

Довольно легко, верно? То, как одни и те же данные представляются за пределами Adobe XD, вероятно, будет отличаться для используемого вами API. Вполне вероятно, что мы не можем просто вслепую получить данные из API и применить их к элементу Adobe XD, ожидая, что он заработает. В нашем случае нам пришлось добавить небольшой шаг преобразования. Notion в основном использует логические значения для всех различных свойств стиля. Вот пример столбца из Notion API:

Как видите, объект Description содержит значение массива rich_text, в котором есть объекты, содержащие аннотации о том, как должны быть оформлены части текста. Чтобы преобразовать это во что-то, что выглядит так же в Adobe XD, мы написали собственный метод. Метод берет массив объектов Notion rich_text и преобразует его в свойства, которые можно задать для элемента Adobe XD.

Теперь мы можем использовать этот метод в любом месте нашего приложения для рендеринга стилизованного текста из Notion в Adobe XD!

Если вы знакомы с веб-разработкой, создание плагина UXP — это весело, легко и просто. UXP очень удобен, а API очень хорошо оснащен для создания любого типа плагина, который вы хотите. Единственное, что требуется, это ваше собственное воображение, чтобы это произошло.

И сейчас…

Это вызвало у вас интерес к разработке плагина для Adobe UXP? Начать очень просто. Вы можете следовать краткому руководству по Документации для разработчиков Adobe UXP.

Мы хотели бы узнать, что вы думаете о нашем плагине Linkit. Но еще больше нам любопытно посмотреть, какие плагины вы будете создавать сами! Не забудьте подтолкнуть нас, если вы готовы поделиться своими результатами. Потому что нам нравятся все эти плагины Adobe XD!

Подпишитесь на нашу Информационную рассылку Creative Cloud Developer, чтобы получать больше подобных статей.