アドビ製品のデザイン作業が体験できるプラグイン、Spectrum for Adobe XDの一般公開

5年前に社内公開されて以来、アドビのデザインシステムSpectrumは、社内のすべてのデザインチームに欠かせないものとななりました。また、昨年末から、製品デザイナーは、Spectrumにツール内からアクセスできるAdobe XDプラグインを使うようになりました。今回、このプラグインを開発者コミュニティに向けて公開します。これにより、Spectrumが提供するすべての機能を利用して、アドビ製品に統合するプラグインや新しい体験を開発することが可能になります。

また、ワークフローを合理化するためのデザインシステムとツールの統合モデルとして、より広くデザインに関わる方々と共有するために、このXDプラグインを一般公開することになりました。社内で大いに役立ってきたプラグインは、同様の環境で働く人々の参考になると思います。もし独自のデザインシステムを所有している組織で働いているのであれば、このプラグインはその構築方法や、運用体制へのインスピレーションになることでしょう。

このプラグインを開発した背景

アドビの製品エコシステムは非常に多様であることから、アドビのデザインチームにとって、製品デザインにおける一貫性の確立は長年の課題となっていました。Spectrumプラグインが利用可能になる前は、SpectrumのドキュメントサイトからUIキットをダウンロードして、デザインにSpectrumのコンポーネントを追加していました。しかし、デザイナーが異なるバージョンのキットを使って作業していたために、デザインと実装に一貫性の問題が発生したこともありました。

また、さまざまなプラットフォーム、カラーテーマ、解像度、コンポーネントのバリエーションや状態などに応じて適切なコンポーネントを探すのは、かなりの時間がかかる、デザイナーにとっては面倒な作業でした。アドビのデザインシステムでは、テキストフィールドやボタンのようなシンプルなコンポーネントでも、何百、何千ものバリエーションが存在する場合があります。そのため、異なるプラットフォームやテーマに合わせてインターフェースの再デザインを行うときには、かなりの重複作業が発生することになります。

チームは、大規模で多様なデザインに対応できるより良い手段を求めていました。不必要な作業を減らし、バージョン管理の複雑さを軽減することが目的です。ライブラリとXDのクラウドドキュメントを採用したことで、リソースをダウンロードすることにより起きていた多くの問題を解決することができました。しかし、あくまで達成したかった目標は、不必要な検索を一切排除して、Spectrumの進化に合わせて常に最新の状態が確保されるようにすることです。

このプラグインでできること

プラグインは、Spectrumの階層型デザイントークンに基づいてコンポーネントを動的に描画するよう構築されました。UIキットにより提供されるシンボルを実際のデザインに合うよう手作業で調整するのではなく、基本コンポーネントがプログラムにより自動的に構成されるツールです。デザイントークンからは、Spectrum CSSやその他のリソースも生成され、それらは、エンジニアリングチームによって、コードをSpectrumの最新状態に保つために使用されます。その際、デザイナーは唯一の参照先としてプラグインを使用することで、自身の仕事とエンジニアリングチームとの一貫性を保ちます。

言い換えるなら、多くの面倒な時間が省かれたということです。

プラグインを使用すると、特定のコンポーネントのすべてのバリエーションとプロパティを調べたり、そのコンポーネントのドキュメントに直接アクセスすることもできます。また、個々のコンポーネントやデザイン全体の、ハイレベルな設定を簡単に変更できます。

ある属性を持つコンポーネント、たとえば、ホバーステートが存在し、ラベル無しで、ダークテーマで、アイコンを持つコンポーネントを作成するのは、コンポーネントのインスペクターをいくつか変更するだけの簡単な作業になりました。ピクセルを扱う必要はありません。

「このドロップダウンメニュー（_picker_コンポーネント）は私のお気に入りです。時間を大幅に節約できるんです.. 私の作業プロセスを大幅にスピードアップしてくれます」

— アドビのシニアエクスペリエンスデザイナー、シャノン・ローズ

XDでSpectrumを使用する製品デザイナーの体験が向上した波及効果として、コンテンツストラテジスト、プロジェクトマネージャ、プロとタイピング担当、エンジニアなどにとっても、デザインシステムの使用方法を理解し、その仕組みと働きをより明確に理解することが容易になりました。

社内の成果

このプラグインがアドビのデザインチーム全体にどれほど有益であるかは明らかでした。今では、チームに参加したばかりの新しい製品デザイナーが、すぐにデザインシステムを実践的に使い始められます。また、その他のデザイナーや、エンジニアリングチームにも、新しいワークフローの道を開きました。

「私はSpectrumプラグインを、コピーライティングや製品向けコンテンツ戦略の仕事でいつも使用しています。これは、テキストが実際のUIコンポーネントでどのように見えるかを素早く検証するための非常に簡単な方法です…私が考えている言語が実際に製品でどのように機能するのかを自由に探れるのがとても気に入っています」

— アドビのシニアエクスペリエンスコンテンツストラテジスト、ジェス・サーテル

階層型デザイントークンのシステムにより、ユーザーはすべてが最新の状態であることを確信できます。また、このプラグインは、事前に構築された検証済みのオプションやコンポーネントを利用可能にします。それにより、堅牢なアクセシビリティ標準がインターフェイスに確実に組み込まれることも保証します。

「Spectrumのウェブサイトを確認する必要がなくなり、どのテンプレートをダウンロードすればよいか探さなくても良いという点で、私のワークフローは劇的に変化しました…間違いなく時間の節約になっています…Spectrumのチームがすべてのコンポーネントをうまく同期してくれることで、多くの負担が軽減されます」

— アドビのシニアエクスペリエンスデザイナー、ミシェル・リン

最後に、このプラグインは、デザインチーム全体の協業とコミュニケーションを改善するための標準ツールと言語を提供します。Adobe XD内からSpectrumを直接利用できることにより、デザインプロセスにおけるツールの使用がさらに広まって、より良く、よりアクセシブルなデザインをつくる人々の力になれると期待しています。

プラグインの入手方法

Spectrum for Adobe XDプラグインを入手するには、まずAdobe XDの最新バージョンをインストールします。

続けて、プラグインを入手します。以下のいずれかの方法によりインストールできます。

プラグインのダウンロードと使用方法の詳細については、SpectrumのWebサイト（英語）もご覧ください。

次のステップ

Spectrum for Adobe XDは、一連のツール群の一部として構想されました。作業の自動化のために、確認プロセスや、コンポーネントの実装情報のエンジニアへの提示のステップへの統合などが検討されています。

Spectrumプラグインの機能の開発は継続中で、Spectrumデザインシステム自体の成長にも適応させてきます。コンポーネントの追加はもちろん、今後予定されている機能には、コンポーネントのコンテンツのスワップ、検索、グループワークフローなどが含まれています。

Spectrum for Adobe XDはいかがでしたか？フィードバックがあれば何でも気軽にメールでお知らせください。

この記事はSpectrum for Adobe XD: Adobe’s Design Language in its Experience Design Tool（著者:Jacob Frank）の抄訳です