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のサイトにはデベロッパーのための多くの情報がまとめられています。

コミュニティに参加しよう!

APIの使用方法やバグなど、困ったことがあれば、デベロッパーのオンラインコミュニティに参加して共有しましょう。

最新情報を入手するには?

ブログやtwitterを通じて最新の情報を発信しています。

今後は、日本のブログでも取り上げていく予定です。

プラグインの開発がメインではありませんが、日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。

有志の皆様によりアドベントカレンダーもできました!(なんとプラグイン開発のアドベントカレンダーもあります!)

関連ページなど

(日本語)

(英語)

(Stock プラグイン関連)