【AdobeXD】プラグイン開発1

目標

プラグイン作成，実行までの流れを掴む

console.adobe.ioでStarterProjectを作る(IDを生成)

console.adobe.ioを開く
新しく作成し，名前をつけると以下のような画面が表示される

サンプルと同様にmyhelloworldという名前にしました．

Download Starter Projectする．

StarterProjectをプラグイン開発のフォルダに配置

メニューから
プラグイン > 開発版 > 開発フォルダーを表示でdevelopフォルダを開き，
ダウンロードしたStarterProjectをそこにコピペする．

manifest.jsonはプラグイン自体の設定ファイルです．

manifest.json

{
   "name": "myhelloworld",
   "id": "ここに自動生成されたIDが入る",
   "version":"1.0.0",
   "description":"Sample plugin for Adobe XD, providing starter project scaffolding.",
   "icons":[
      {
         "width":96,
         "height":96,
         "path":"images/icon.png"
      }
   ],
   "host":{
      "app":"XD",
      "minVersion":"13.0.0"
   },
   "uiEntryPoints":[
      {
         "type":"menu",
         "label":"My Plugin",
         "commandId":"myPluginCommand"
      }
   ]
}

main.jsがプラグインの実行内容です．

main.js

/*
 * Sample plugin scaffolding for Adobe XD.
 *
 * Visit http://adobexdplatform.com/ for API docs and more sample code.
 */

var {Rectangle, Color} = require("scenegraph");

function myPluginCommand(selection) {
    // Go to Plugins > Development > Developer Console to see this log output
    console.log("Plugin command is running!");

    // Insert a red square at (0, 0) in the current artboard or group/container
    var shape = new Rectangle();
    shape.width = 100;
    shape.height = 100;
    shape.fill = new Color("#f00");
    selection.insertionParent.addChild(shape);
}

module.exports = {
    commands: {
        myPluginCommand: myPluginCommand
    }
};

実行する

プログインの再読み込みを行う

すると，プラグイン以下にMy Pluginというプラグイン名が追加されます．
この名前はmanifest.json > uiEntryPoints > labelで定義されています．

実行すると赤い長方形が生成されます

まとめ

Adobeのプラグインの作成ができた．
次はプラグインの中身の解析をします．