WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利

Post on:2020年8月4日

はじめに

アドビのデザインシステムであるSpectrumは、5年前に社内で導入されて以来、社内のすべてのデザインチームに欠かせないものとなっています。そして本日、Adobe XDのプラグインとして利用できるようになりました。コミュニティにプラグインを公開し、Spectrumが提供するすべての機能が誰でも簡単に利用できます。

また、ワークフローを合理化するためのデザインシステムのツールのモデルを共有したいと考えているため、Spectrumを広く利用できるようにしています。このプラグインはきっと、あなたにも役立つでしょう。

あなたの組織でデザインシステムを使用しているなら、このプラグインはデザインシステムの作成・メンテナンスに良い影響を与えると思います。

Spectrumのインターフェイス

Spectrumの機能と開発した経緯

アドビのプロダクトエコシステムは非常に多様性に富んでおり、プロダクトデザインチームにとって一貫性を保つことが長年の課題となっていました。Spectrumを導入する前は、チームはデザインにコンポーネントを追加するためにステッカーシートをダウンロードするためにSpectrumのドキュメントサイトを使用していました。しかし、デザイナーが異なるバージョンのステッカーシートで作業することがあり、デザインと実装に一貫性の問題が生じていました。

また、さまざまなプラットフォーム、カラーテーマ、コンポーネントのバリエーション、スケール、ステータスの中から適切なコンポーネントを見つけることは時間がかかり、デザイナーにとって大きな問題でした。当社のデザインシステムでは、テキストフィールドやボタンのようなシンプルなコンポーネントは、何百・何千ものバリエーションがあります。異なるスケース、プラットフォーム、テーマに合わせてインターフェイスを再設計するには、かなりの重複作業が必要になります。

大規模な設計をするためにより良いソリューションが必要でした。不必要な作業や矛盾するリソースを軽減するためです。ライブラリとXDのクラウドドキュメントはステッカーシートの問題の多くを解決することができましたが、わたし達の目標は不要なものを一切排除し、Spectrumの進化に合わせて常に最新の状態に保つことです。

プラグインはシンボルやレンディションに依存せずに構築し、代わりにSpectrumの階層的なトークンデザインシステムに基づいてコンポーネントを動的に描画します。実際のデザインに合わせてステッカーシートから提供される表現を手動で調整するのではなく、基本的なコンポーネントをプログラムで設計するためのツールを提供しています。また、このトークンシステムは、SpectrumのCSSやその他のリソースを生成し、エンジニアチームがSpectrumを最新の状態に保つために使用しています。このシステムはデザイナーがチームの仕事をサポートすることを確信できるようにしてくれます。

つまり、デザインの調整に多くの時間を費やす必要がなくなりました。

ダークモードのデザインも簡単

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

ホバー、クワイエット、ダークカラーテーマ、アイコンなどの特定のプロパティを使用したコンポーネントを作成する場合、もはやピクセルのプッシュは不要になり、コンポーネントのインスペクタで簡単に変更できます。

変更は、コンポーネントのインスペクタで簡単

私はこのプラグインが大好きです。ドロップダウンの「ピッカーメニューコンポーネント」を使用すると、時間を大幅に節約できます。これにより、プロセスが大幅にスピードアップします。
Shannon Rhodes -Adobe社シニアエクスペリエンスデザイナー

Adobe XDでSpectrumを使用することで、デベロッパーをはじめ、プロジェクトマネージャー、プロトタイプ作成者などチームのメンバーがデザインシステムの使用方法を理解しやすくなり、デザインシステムの仕組みを把握できるようになります。

Spectrumを使用した結果

このプラグインがアドビすべての人々にどのように役立つかを見てきました。Spectrumを導入したことで、新しく入ったデザイナーも実践的な方法ですぐにデザインシステムを使い始めることができるようになりました。また、他のデザインやデベロッパーのロールのための新しいワークフローもオープンになりました。

私はUXライティングとプロダクトコンテンツストラテジーの仕事で常にSpectrumを使用しています。実際のUIコンポーネントで文字列がどのように表示されるかを簡単に確認でき、どのように機能するのか自由に確認できるので、このプラグインを使うことをとても気に入っています。
Jess Sattell -Adobe社シニアエクスペリエンスコンテンツストラテジスト

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

さまざまなコンポーネントを簡単に利用できる

私のワークフローは劇的に変わりました。Spectrumのおかげで、最新のWebサイトに遅れずについていく必要がなくなり、ダウンロードするテンプレートを把握する必要もありません。間違いなく時間を節約できます。Spectrumのチームが、すべてのコンポーネントが正しく同期されていることを確認できるので、負担はかなり軽減されます。
Micheal Lin -Adobe社シニアエクスペリエンスデザイナー

最後に、このプラグインはデザインチーム全体がより良いコラボレーションとコミュニケーションを行うための標準的なツールとして言語を提供してくれます。Adobe XDにSpectrumをインストールすることで、デザインプロセスのツールがさらに民主化され、人々がより良く、よりアクセスしやすいデザインを作成できるようになることを期待しています。