Adobe XDプラグイン用のUIキットとUXガイドラインの公開

Adobe XDのプラグインを開発する人たちのために、UXパターンやベストプラクティスなどを含むデザインガイドライン、そしてUIキットが公開されました。目指したのは、デザイナーも開発者も含め、XDプラグインのアイデアを持っているすべての人々が、プラグインユーザーに対して最適な体験をつくり出すために必要なすべてのツールとリソースを手にすることができる状態です。

開発を素早く進められるように、XDプラグインのアイデアをデザインしてプロトタイプにする際に役立つガイドラインを執筆しました（既存のプラグインの再デザインにも役立ちます）。それが、Designing a plugin experienceのページです。このガイドラインは、いくつかのUXパターンや、プラグインが利用可能なUI要素を扱っています。また、UIキットには、MAC OS UI KITとUWP UI KITのステッカーシートも含まれています。詳細は実際にご覧になって確認してください。この記事ではガイドラインの概要を紹介します。

XDプラグイン開発者のためのデザインガイドライン

今回提供されたデザインガイドラインは、XDの中でプラグインが利用可能な見た目とインタラクションの概要を理解するのに有効な資料です。UX patternsのセクションには、ユーザー体験の概要と、デザイン要件、そしてベストプラクティスが記述されています。新規ユーザーが最初にプラグインを利用する時の体験や、ユーザーへのメッセージの提供についても学ぶことができます。

以下は、ガイドラインの各項目へのリンクです。

ユーザーインターフェースのデザインアセット

プラグインのデザインを始める前に、プラグインUIのために用意されたUIキットをGithubのリポジトリからダウンロードしましょう。

XDプラグインのパネルUI

XDプラグインのモーダルUI

Spectrumとの関連について

アドビのデザインシステムSpectrumについて聞いたことがあるでしょうか。アドビでどのように製品がデザインされているかを示すため、先月一般公開されました。

アドビの規模でのデザインシステムの実装には、何年にもわたる努力が必要でした。その間に、アドビの製品はデザインシステムへの適応の、次のステージに進みました。Adobe XDは、Spectrum（バージョン1）を使って構築された最初の製品のひとつです。つまり、XDのUIは、デザインシステムの更新を各プロジェクトに拡散する技術をアドビが持つ前に実装されました。XDのルック＆フィールはSpectrum（バージョン1）のように感じられますが、公式のSpectrumのUIのスペックやパターンは、XDの現在のUIと完全に一致してはいません。

これが、XDプラグインのデザインガイドラインの構築に時間を費やした理由です。このガイドラインは、XDプラグイン開発者専用のリソースです。ガイドラインに記述されているパターンがSpectrumの基本原理に沿っていて、かつXD固有の特徴が考慮されているものになっているよう、XDのデザインチームおよびSpectrumのチームの両者と緊密に連携して確認を行った成果です。

この記事はUI Kits and UX Guidelines for Your XD Plugin（著者:Daniela Caicedo）の抄訳です