Итак, вы, возможно, слышали, что Adobe XD теперь поддерживает плагины, и вам интересно, как начать создавать свои собственные. Что ж, отличные новости - создать плагин очень просто. В этом посте я расскажу вам о процессе, шаг за шагом.

Вы слышали? Мы проводим семинары по плагинам Adobe XD в Лондоне (25 февраля), Амстердаме (27 февраля) и Мангейме (1 марта). Посетите http://bit.ly/helloxdplugin для получения более подробной информации! Будем рады видеть вас там!

Установить / обновить Adobe XD

Первое, что вам нужно сделать, это убедиться, что на вашем компьютере установлена ​​самая последняя версия Adobe XD. Если вы ранее устанавливали XD, откройте приложение Adobe Creative Cloud и нажмите кнопку «Обновить» рядом с приложением XD.

Если вы ранее не устанавливали XD, вместо кнопки выше будет указано «Установить» - просто нажмите ее, и XD установится на ваш компьютер.

Почувствуйте, что возможно

XD запустила несколько замечательных плагинов, от служебных плагинов, которые упрощают повторяющиеся задачи, до плагинов, которые интегрируются с облачным хранилищем и другими сервисами. Чтобы понять, на что способны плагины, вам обязательно стоит попробовать несколько из них.

  1. Запустить XD
  2. Создать новый документ
  3. Откройте меню Плагины и нажмите Обнаружить плагины.

Установить плагин так же просто, как нажать кнопку «Установить». Вам даже не нужно перезапускать XD, чтобы начать их использовать.

Спланируйте свой плагин

Теперь, когда вы знаете, что возможно, пора подумать, какой плагин вы хотите создать. Давайте разберемся с версией в Документации по быстрому запуску и добавим наш собственный вариант этого плагина. Но сначала немного контекста!

Представим, что вы дизайнер, создающий баннер для конференции. Эта конференция посвящена спирали в дизайне. Сама конференция называется «ConSpiralator ’19».

У вас есть простой баннер, но ваш менеджер настаивает на том, чтобы он был более привлекательным. «Может быть, что-нибудь со спиралями», - говорит она.

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

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

Откройте папку разработки плагина

В XD есть «режим разработки», который позволяет очень легко начать сборку и тестирование вашего плагина. Это папка с именем «develop», которую XD создает для вас. Любые плагины в этой папке могут быть перезагружены с помощью сочетания клавиш, что позволяет выполнять быструю итерацию во время игры с вашим плагином. Лучше всего то, что вам не нужно перезапускать XD каждый раз, когда вы хотите протестировать новую версию своего плагина!

XD позволяет легко открыть эту папку без необходимости углубляться в файловую систему с помощью Finder или Explorer. Все, что вам нужно сделать, это использовать команду меню Плагины ›Разработка› Показать папку разработки, и откроется новое окно Finder или Explorer, открывающее папку «Develop».

Создайте папку с плагином

Поскольку у вас может одновременно быть много плагинов в разработке, вы не собираете свой плагин непосредственно в папке «develop». Вместо этого XD ожидает, что вы создадите папку для каждого плагина, который хотите создать. Имя самой папки не имеет значения, но оно должно быть тем, что вы узнаете.

Давайте создадим папку для нашего первого плагина. Мы можем назвать его «мой-первый-плагин» или как угодно (только обязательно назовите его так, как вы его узнаете).

Создайте манифест вашего плагина

Все плагины XD должны иметь «манифест». Манифест - это просто список фактов о вашем плагине, включая такие вещи, как имя плагина и пункт меню, который вы хотите использовать. Манифесты действительно легко создать, и, как правило, вам придется копировать и вставлять те, которые вы создали ранее. Фактически, вы можете использовать приведенный ниже:

{
   "name": "Draw Lots of Rectangles",
   "id": "00000000",
   "version":"1.0.0",
   "description":"Sample plugin for Adobe XD...",
   "icons":[
      {
         "width":96,
         "height":96,
         "path":"images/icon.png"
      }
   ],
   "host":{
      "app":"XD",
      "minVersion":"13.0.0"
   },
   "uiEntryPoints":[
      {
         "type":"menu",
         "label":"Draw lots of rects",
         "commandId":"myPluginCommand"
      }
   ]
}

При сохранении убедитесь, что файл называется manifest.json, иначе ваш плагин не загрузится правильно.

Здесь я хочу отметить два основных момента:

  1. Метка внутри uiEntryPoints - это то, что будет отображаться пользователю в меню Plugins.
  2. CommandId сообщает XD, какую функцию вызывать, когда пользователь вызывает наш пункт меню.

Для получения дополнительной информации о том, что делает каждая часть, см. Документацию по структуре плагина.

Создайте код своего плагина

Плагины XD нуждаются как минимум в еще одном файле для работы: логика или код плагина. Он находится в файле с именем main.js. (Обратите внимание, что вы не ограничены только этим файлом, но все плагины должны иметь хотя бы один файл с этим именем.)

Код вашего плагина должен делать следующее:

  • Объявите, какие API-интерфейсы необходимы вашему плагину. В случае XD это может быть признаком того, что вашему плагину нужно рисовать прямоугольники или другие формы.
  • Реализуйте обработчики меню вашего плагина. Сейчас ваш плагин можно вызвать только через меню Плагины. XD необходимо знать, как «обрабатывать» ваши пункты меню, когда они вызываются.
  • Экспортируйте обработчики меню в XD. Думайте об этом как о подключении обработчиков меню к идентификаторам команд, используемым в манифесте.

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

const { Rectangle, Color } = require("scenegraph");  // [1]
const commands = require("commands");                // [2]
function myPluginCommand(selection) {                // [3]
  /* all the code we talk about in the next section will 
     go in here */
}
module.exports = {                                   // [4]
  commands: {
    myPluginCommand
  }
};

Давайте начнем сверху, не так ли?

Во-первых, в верхней части файла нам нужно объявить, какие API нам нужны. То есть нам потребуются определенные модули от XD. Это легко сделать с помощью пары строк кода ([1] и [2]). В первой строке мы просим предоставить возможность создавать прямоугольники и использовать цвета - достаточно просто, не так ли? Вы можете запросить и другие конкретные типы фигур и классов, и все они доступны в нашей исчерпывающей документации.

[2] запрашивает возможность выполнять определенные виды команд в документе XD - в нашем случае нам нужно иметь возможность дублировать фигуры, но есть и другие команды, такие как возможность отправлять фигуры на задний план или на передний план, группировать формы и многое другое.

[3] - это функция, которую мы будем использовать для хранения логики нашего плагина. Для упрощения назовем его myPluginCommand, то же самое, что и manifest.json. Мы закончим заполнять это через секунду.

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

[4] экспортирует обработчик меню в XD. Обратите внимание, что мы повторно используем myPluginCommand из manifest.json. Он должен соответствовать манифесту, иначе ваш плагин не будет работать правильно.

Круто - убрав шаблон, мы можем приступить к написанию кода. Обязательно поместите все внутрь функции myPluginCommand.

И еще одно: одна из самых крутых особенностей разработки плагинов с XD - это то, что вам даже не нужно выходить и перезапускать XD всякий раз, когда вы меняете код плагина. Вам просто нужно сообщить XD, что он должен снова загрузить ваш плагин. Это делается с помощью пункта меню Плагины ›Разработка› Обновить плагины. Для еще более быстрой перезагрузки есть соответствующее сочетание клавиш (Cmd + Shift + R в macOS и Ctrl + Shift + R в Windows).

После перезагрузки плагинов вы должны увидеть свой плагин в меню Плагины. Если вы его не видите, проверьте консоль разработчика на наличие сообщений об ошибках (Плагины ›Разработка› Консоль разработчика).

Теперь, в конце каждого шага ниже, вы сможете перезагрузить плагин и щелкнуть Плагины ›Нарисовать множество прямоугольников, чтобы увидеть последние изменения.

Примечание. Возможно, вы захотите создать новый документ в XD и изменить цвет фона монтажной области на темный (например, черный или синий). Мы будем работать с белыми объектами, иначе их будет сложно увидеть.

Реализуйте свою логику плагина

Здесь и происходит настоящая работа; мы должны определить логику нашего плагина. К счастью, при автоматизации утомительного рабочего процесса шаги обычно довольно очевидны. Давайте пройдемся по каждому.

Создайте прямоугольник

Создавать формы в XD действительно просто - все, что нам нужно сделать, это запросить новую форму и предоставить некоторую базовую информацию (например, размер).

const rect = new Rectangle();
rect.width = 320;
rect.height = 320;

Конечно, на самом деле мы создаем здесь квадрат (поскольку ширина и высота равны).

Измените стиль прямоугольника

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

rect.fill = null;
rect.stroke = new Color("white");
rect.opacity = 0.5;

В строке 1 мы установили нулевую заливку - это гарантирует, что сплошная белая заливка будет удалена. Затем в строке 2 мы просим цвет (white). Этот цвет может быть именованным цветом CSS, шестнадцатеричным цветом (например, #FFFFFF) или даже значением RGB / RGBA или HSL / HSLA.

Добавьте прямоугольник на холст

Если бы мы остановились на этом, то фактически ничего не увидели бы на холсте. Мы должны добавить это в сам документ.

selection.insertionParent.addChild(rect);

Все, что указано в приведенной выше строке, - это добавление прямоугольника рядом с тем, что пользователь выбрал при запуске плагина.

Выберите прямоугольник

Затем мы хотим выбрать новый прямоугольник, как если бы мы щелкнули по нему в интерфейсе XD с помощью мыши.

selection.items = [rect];

Дублировать выделенный фрагмент

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

commands.duplicate();

Хм, на самом деле это не будет выглядеть по-другому. commands.duplicate скопирует все о форме, включая ее положение. Это означает, что мы создали прямоугольник прямо поверх предыдущего прямоугольника!

Поверните

Если бы мы повернули прямоугольник, мы четко увидели бы два разных прямоугольника. Это просто!

const node = selection.items[0]; 
node.rotateAround(5, node.localCenterPoint);

Первое, что мы делаем (строка 1), это получаем первый выбранный элемент. узел будет ссылаться на дублированный прямоугольник. Затем мы поворачиваем его (линия 2) на 5 градусов вокруг центра прямоугольника. Стоит пробовать разные значения, пока вы не получите то, что вам нравится.

Примечание. Единственная причина, по которой мы назначили первый выбранный элемент для node, заключается в том, что мы собираемся повторить это несколько раз. Каждый раз набирать node легче, чем selection.items[0]!

Переместите

Если бы мы много раз вращали квадрат на одном месте, это дало бы нам отличный результат, но он не был бы достаточно широким, чтобы заполнить наш баннер. Давайте вместо этого сдвинем дубликат немного вправо.

node.moveInParentCoordinates(5, 0);

Ах, это работает! Это переместит новый прямоугольник на пять пикселей вправо. Первое число - это горизонтальное движение, а второе - вертикальное движение. Конечный результат частично зависит от того, какие два числа вы здесь используете! Тренировка - экспериментируйте!

Повторите!

Отлично - мы построили два прямоугольника. Это не спираль. Нам нужно все это повторить. Мы можем сделать это с помощью цикла for или цикла while. (Подойдет любой механизм зацикливания!)

Итак, давайте сделаем шаги 6–9 и добавим цикл:

let times = 0;
while (times < 179) {
  // steps 6 - 9
  commands.duplicate();
  const node = selection.items[0];
  node.rotateAround(5, node.localCenterPoint);
  node.moveInParentCoordinates(5, 0);
  // end of steps 6 - 9
  
  times += 1;
}

Теперь, когда вы запустите свой плагин на монтажной области темного цвета (потому что мы строим белые прямоугольники), вы увидите следующее:

Вау, разве не круто? Довольно здорово для 32 строк кода, не так ли?

Куда пойти отсюда

Еще не взволнованы? Плагины могут делать довольно удивительные вещи, и их тоже нетрудно написать. Обязательно ознакомьтесь со следующими ресурсами, чтобы получить дополнительную полезную информацию, образцы и руководства.

Нам не терпится увидеть, что вы построите!

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

Следите за блогом Adobe Tech Blog, чтобы получить больше историй и ресурсов для разработчиков, и посетите Adobe I / O в Твиттере, чтобы узнать о последних новостях и продуктах для разработчиков.