Adobe XDのプラグイン開発に役立つサイトのまとめ #AdobeIO #XDPlugin #AdobeXD

Adobe I/O Corporate Creative Cloud UI/UX & Web

こんにちは、研究開発本部の竹岡です。

今回は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などの情報共有など、積極的な活動をおこなっています。

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

関連ページなど

(日本語)

(英語)

(Stock プラグイン関連)

POSTED ON 2019.01.16