Adobe XDのプラグイン開発に役立つサイトのまとめ #AdobeIO #XDPlugin #AdobeXD
こんにちは、研究開発本部の竹岡です。
今回はXDのプラグインを開発するにあたって必要になる開発者向けのサイトをご紹介します。
XDは初めての方でも簡単に使いこなせるツールで、アプリケーションやWEBサービスのUI/UXのデザインなどの現場で多く利用されています。
現在のデザインワークフローは、PhotoshopやIllustratorのようなクリエイティブ作成のアプリケーションで完結するものではなく、デザイナーを含めたチームのメンバーがツールやWEBサービスを用いてコミュニケーションをすることが主流になってきていると思います。
例えば、1) デザイナーがXDで作成、2) データをDropboxにアップロードし、3) アップロードの通知がSlackを通じてチームで共有され、 4)チーム内でコメントやフィードバックをする。といったフローが考えられます。
上記の例ではDropboxとSlackを挙げましたが、実際にはもっと多くのツールがデザインの現場で使われていることでしょう。アドビはこうしたクリエイティブやデザイナーのワークフローに対応するため、Microsoft Teams, Slack, Jira, Dropbox Paperなどのアプリケーション・サービスと連携するをリリースしました。また、 Adobe Fund for Design を通じて、デザイナーやクリエイティブのためのツールやサービスを開発する方を支援しています。
そして、MAX ではデザイナーの方々が日々使われているツールとXDとをよりスムーズに連携するために、プラグイン、UIキット、アプリ連携をはじめとしたXD Ecosystemを発表し、全てのデベロッパーがXDのプラグインを開発できるようになりました!
開発者向けのリソース
下記の記事では、プラグインの開発の最初の手順をわかりやすく解説しています。
CC道場でプラグイン開発を始める方へのチュートリアルと解説をしておりますので、合わせてご覧ください。
JavascriptとReactに慣れた方なら上記のチュートリアルの後に ui-hello-react でReactを用いたダイアログの表示を学習した後、
e2e-adobe-stock で実際にAdobe Stockの写真を表示するプラグインをチェックするのがわかりやすいと思います。
(Adobe Stock プラグインで必要な API Key の取得についてはこちらの記事をご覧ください。)
他にも、 (英語になりますが)XD Platfromのサイトにはデベロッパーのための多くの情報がまとめられています。
- Quick start
プラグインのファイル構成などを紹介しています。上記の記事の内容と似ています。 - Tutorials
XDに配置された図形やテキストなどのオブジェクトをScenegraphを通じて追加・削除・プロパティの変更を行います。 - AdobeXD/plugin-samples
Github で公開されたサンプルコードです。現在は45個のサンプルが公開されています。XDのDeveloper フォルダにそのままコピーすれば、動作を確認することができます。
コミュニティに参加しよう!
APIの使用方法やバグなど、困ったことがあれば、デベロッパーのオンラインコミュニティに参加して共有しましょう。
- Adobe XD Plugin Developers
APIのバグやAPIの機能リクエスト(Feature requests)はこちらのフォーラムへどうぞ
(APIやプラグイン開発に関係のないリクエストは Adobe XD Feedbackにお願いします)
質問を投稿する前に FAQ で同じような質問が他にないかチェックすると良いでしょう。 - Newest ‘adobe-xd’ Questions – Stack Overflow
StackOverflowに`adobe-xd` のタグをつけて投稿しましょう - プラグインを開発したら、#XDplugin のハッシュタグをつけてつぶやいたり、XD Plugin Manager で公開してください。
最新情報を入手するには?
ブログやtwitterを通じて最新の情報を発信しています。
今後は、日本のブログでも取り上げていく予定です。
プラグインの開発がメインではありませんが、日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。
有志の皆様によりアドベントカレンダーもできました!(なんとプラグイン開発のアドベントカレンダーもあります!)
関連ページなど
(日本語)
- Adobe XDプラグインの世界へようこそ! Adobe MAX 2018セッションレポート #XDPlugin #AdobeXD – Adobe Blog
- Adobe XD 10月アップデートリリース! 音声プロトタイプ、プラグイン対応などをAdobe MAXで発表 #AdobeMAX #AdobeXD – Adobe Blog
(英語)
- Adobe Launches XD Ecosystem at MAX – Adobe Tech Blog – Medium
- Adobe XD Plugin APIs are Here – Adobe Tech Blog – Medium
- Spinning Up Your First Adobe XD Plugin – Adobe Tech Blog – Medium
- Building a Party Plugin Inside Adobe XD with Confetti
(Stock プラグイン関連)