Help us understand the problem. What is going on with this article?

Adobe XD Plugin 開発入門

こちらの記事はAdobe XD advent Calendar 2019年12月22日の記事です。
AdobeXDプラグイン開発の手順書のようなものを書いてみました。
プラグイン作ってみたい方の手助けになれば幸いです。

環境

  • Mac OS 10.15.1
  • Adobe XD バージョン25.1.12.7
  • VSCode バージョン1.40.2

参考

公式のドキュメント
https://adobexdplatform.com/plugin-docs/

準備

Adobe XD を起動
メニューバーからプラグイン > 開発版 > 開発フォルダーを表示
スクリーンショット-2019-12-19-21.54.22.jpg
表示されたdevelopフォルダで開発するので、この場所を…
開発ディレクトリ.jpg
VSCodeで開く
スクリーンショット 2019-12-19 20.26.52.jpg
まだ何もない

フォルダのアイコンをクリックしてディレクトリを作成、適当に名前をつける
フォルダ2.jpg
今作ったディレクトリにファイルを2枚追加 これは名前が決まっているので
片方にmanifest.jsonもう片方にmain.jsと名前をつける
スクリーンショット 2019-12-19 20.59.25.jpg
まだ中身は真っ白
これで準備は終わり

manifest.json を書く

ここにサンプルがあるので、コピペする
https://adobexdplatform.com/plugin-docs/reference/structure/manifest.html

manifest.json
{
  "id": "YOUR_ID_HERE",
  "name": "Name of Your Plugin",
  "version": "0.0.1",
  "icons": [
      { "width": 24, "height": 24, "path": "images/icon@1x.png" },
      { "width": 48, "height": 48, "path": "images/icon@2x.png" }
  ],
  "host": {
      "app": "XD",
      "minVersion": "21.0"
  },

  "uiEntryPoints": [
      {
          "type": "menu",
          "label": "Hello World Command",
          "commandId": "helloCommand"
      },
      {
          "type": "panel",
          "label": "Hello World Panel",
          "panelId": "helloPanel"
      }
  ]
}

アイコン画像を用意する

imagesディレクトリを作る
仮の画像を突っ込んでおく(↓ご自由にどうぞ)
images/icon@1x.png icon@1x.png
images/icon@2x.png icon@2x.png
今こんな感じ
スクリーンショット 2019-12-19 21.37.30.jpg

main.js を書く

ここに書いている
https://adobexdplatform.com/plugin-docs/reference/structure/handlers.html

これをコピペする

main.js
pconst commands = require("commands");

function sayHello(selection, documentRoot) {
  console.log("Hello, world!");
}
function show(event) {
  let dom = document.createElement("panel");
  dom.innerHTML = `
      <form method="dialog" id="main">
      </form>
  `;
  event.node.appendChild(dom);
}
function hide(event) {
  event.node.firstChild.remove();
}

module.exports = {
  commands: {
      helloCommand: sayHello
  },
  panels: {
    helloPanel: {
        show,
        hide
    }
  },
};

プラグインを再読み込み

AdobeXDを起動して
メニューバーからプラグイン > 開発版 > プラグインを再読み込み
スクリーンショット 2019-12-19 21.54.31.jpg
自作のプラグインが読み込まれてプラグインメニューに追加されました!
スクリーンショット 2019-12-19 21.54.54.jpg

プラグインを実行してみる

プラグインのメニューをアクティブにするため
適当にXDファイルの新規作成 をする

コピペで作成したプラグインはconsole.log("Hello, world!");という内容だったので、実行結果をみるためにコンソールを表示させる
メニューバーからプラグイン > 開発版 > Developer Console
スクリーンショット 2019-12-19 22.38.55.jpg
こういうウインドウが表示される
コンソール.jpg
早速 Hello World Command を実行!
スクリーンショット 2019-12-20 15.23.41.jpg
出た!
スクリーンショット 2019-12-20 15.24.52.jpg
ちなみに Hello World Panel はサイドパネルが表示されるだけ。何も書いてないから。

プラグインの動作を変更する : 線を描く

Hello, world!した後に線を描くコードを追加してみる
線の描画について詳しくはこちら
https://adobexdplatform.com/plugin-docs/tutorials/how-to-draw-lines/

変更するのはmain.js

追加するのは2つ
(1) 線を描画するためのモジュールの準備
const { Line, Color } = require("scenegraph");
(2) 線の描画
Lineインスタンスを作って選択中のアートボードに追加する

変更後のmain.js
const { Line, Color } = require("scenegraph"); // 線を描画するためのモジュール 追加
const commands = require("commands");

function sayHello(selection, documentRoot) {
  console.log("Hello, world!");

  //以下 線を描画
  const mycolor = "#000000"; //色
  const data = { startX: 100, startY: 110, endX: 210, endY: 233 }; //位置等
  const line = new Line();             //Lineクラスのインスタンスを作る
  line.setStartEnd(                    //設定
      data.startX,
      data.startY,
      data.endX,
      data.endY
  );
  line.strokeEnabled = true;            //ストロークを描画すっぞ!
  line.stroke = new Color(mycolor);     //色を指定
  line.strokeWidth = 3;                 //線幅
  selection.editContext.addChild(line); //選択中のアートボードに追加
}
function show(event) {
  let dom = document.createElement("panel");
  dom.innerHTML = `
      <form method="dialog" id="main">
      </form>
  `;
  event.node.appendChild(dom);
}
function hide(event) {
  event.node.firstChild.remove();
}

module.exports = {
  commands: {
      helloCommand: sayHello
  },
  panels: {
    helloPanel: {
        show,
        hide
    }
  },
};

プラグインの変更はプラグインを再読み込みしないと反映されないので
メニューバーからプラグイン > 開発版 > プラグインを再読み込みしてから
スクリーンショット 2019-12-22 0.56.15.jpg
Hello World Command を実行!
スクリーンショット 2019-12-20 15.23.41.jpg
出た!
スクリーンショット 2019-12-22 0.41.50.jpg

最後に

以下も書きたかったのですが間に合わなかったので、
別の機会に書けるといいなー!

  • プラグインのメニューを増やす
  • アートボードが選択されていなかったらアラート出す
  • 選択されているオブジェクトにテキストがあるかどうかを確認する
  • テキストのスタイルを変える

みなさま良いお年を!
2020年もよろしくお願いいたします。

aoisa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした