Adobe XD Plugin Meetup サンプルコード

開発環境のセットアップ

1. 適当な場所にリポジトリをチェックアウト

   git clone https://github.com/yoshikinoko/XDPluginMeetupJapan.git

   もしくは zipファイルをダウンロード

2. Adobe XD プラグイン開発フォルダー（developフォルダー）を開く

   Adobe XD を起動した後に下記のメニューよりフォルダーを開いてください

   プラグイン >開発版 > 開発フォルダーを表示

   開発フォルダーが表示されない場合は、下記の場所にフォルダーを作成してください

   • Mac: ~/Library/Application Support/Adobe/Adobe XD/develop

   • Win: %LOCALAPPDATA%\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\develop

3. 開発フォルダー（developフォルダー) にフォルダごとコピーしてください。

   例えば、「01-01-scenegraph-sample」のフォルダーを フォルダーごとコピー してください

4. Adobe XDを起動し、プラグインを再読み込みしてください。

   プラグイン > 開発版 > プラグインを再読み込み

   ショートカットキー

   • Mac: Command+Shift+R

   • Win: Ctrl+Shift+R

5. Adobe XD のメニューより、プラグインを起動

   プラグイン > プラグイン名

サンプルコードの概要

01-01 100pxの赤色の正方形を挿入する、もっとも簡単なプラグイン

01-01-scenegraph-sample

01-02 ショートカットキーを設定し、webpack, xdpm を用いたプロジェクトテンプレート

01-02-scenegraph-sample-webpack

01-01と01-02のプラグインのプレビュー

ダイアログを表示するプラグイン

02-01-dialog-sample

ダイアログを表示し、 webpack, xdpm を用いたプロジェクトテンプレート

02-02-dialog-sample-webpack

ダイアログを表示するプラグインのプレビュー

参考資料・サイト

日本語

• Adobe XDプラグインをつくってみよう (SlideShare)
• はじめてのAdobe XDプラグイン開発！定番のHello Worldを表示させてみよう #AdobeXD #AdobeMAX - Adobe Blog
• Adobe XDプラグインのソースコードの解説 #AdobeIO #XDPlugin #AdobeXD - Adobe Blog
• #Adobe XD のパネルに対応したプラグインの開発 - Adobe Blog
• Adobe XD Plugins Advent Calendar 2018 - Qiita
• Adobe XD User Group Japan facebook group
• Adobe XD official facebook page
• Adobe XD - Adobe Blog
• Creative Cloud 道場 - Adobe Blog #CCDojo
• Adobe XD CC体験版ダウンロード
• アドビ公式サイト

英語

• Adobe XD Platform
• Adobe XD Plugin Developers Forum
• Adobe XD Github
• Adobe I/O
• Adobe Tech Blog
• Twitter #XDPlugin

LICENSE

Apache 2.0

DISCLAIMER

You use this utility at your own risk. Under no circumstances shall Adobe be held liable for the use, misuse, or abuse of this utility.