Adobe XDでデザインシステムを開発する方法

これは、Design System アーキテクチャに関する 3 部構成のシリーズの最後です。最初の1回では、デザインシステム、それらが提供する利点、6つの簡単なステップでデザインシステムを構築する方法、そしてその過程でIndigo.Designが実際にどのように役立つかについて説明しました。2回目のブログ記事では、Sketchでデザインシステムを構築する方法と、それに含めるべき重要な側面について説明しました。3つ目は、Adobe XDでデザインシステムを開発して、デザインプロジェクト間の一貫性を保証し、出力をより迅速に作成し、簡単に再利用できる最新のアセットとコンポーネントを維持する方法に焦点を当てています。

Adobe XDとは何ですか?

Adobe XDは、プロトタイプの作成、インタラクションデザイン、優れたUXに使用される最も人気のあるベクターグラフィックデザインツールの1つです。また、ワイヤーフレームやアプリのデザイン、チーム間のコラボレーション、アニメーションの設定、フィードバックの収集、3Dデザインや再利用可能なデザインの構築も行うことができます。

Adobe XDの利点は何ですか?

• インタラクティブなプロトタイプとワイヤーフレーム
• Reusable design elements
• 豊富なレイアウト機能
• ソフトウェアは無料です
• ハンドオフを共有し、フィードバックを収集する機能

Adobe XDのデメリットは何ですか?

• プロトタイプやワイヤーフレームを公式デザインに転送することはできません
• コードを生成しない
• Few plugins 
• 無料版の多くの制限と制限

Adobe XDデザインシステムとは?

Adobe XDファイルを使用する際に、現在および将来のプロジェクトのUXおよびUIデザインの一貫性を確保するためには、デザインシステムを用意するのが最善です。Adobe XDデザインシステムは、信頼できる唯一の情報源として機能し、すべてのデザインパターンとベストデザインプラクティスを収集して、アイデアからデザインへの迅速な移行を実現します。

Adobe XDでデザインシステムを構築する方法は?

デザイナーの視点から、マクドナルドを世界で最も価値の高いブランドの1つと考えてみましょう。数年前にロゴを変更してより健康的なライフスタイルを伝えていますが、ブランドを定義する有名で認識しやすい赤と黄色の色を維持しています。しかし、デジタル製品のデザインには、単色の色合い以上のものが必要です。また、Adobe XDでデザインシステムを構築する場合、遅かれ早かれ、2色、3色、またはそれ以上の色で同じ基本色調の色合いのパレットが必要であることに気付くでしょう。

Color palettes

Adobe XDでカラーの厳密なアーキテクチャを実現するには、まず長方形を描画し、鮮やかな赤またはベースとして使用する他の色で塗りつぶし、そこからコンポーネントを作成します。次に、必要な数のインスタンスを作成します。Indigo.Designでは、各色には10のバリエーションがあり、ベースとなる色とそこから派生する色が9種類あります。次に、これらのインスタンスのいくつかをマスターの左側に広げて、暗いバリエーションを、右側に広げて明るい色調にします。左側のシンボルごとに、同じサイズのベース カラー レイヤーの上に 2 つの四角形を積み重ねます。それに近いレイヤーは飽和するために使用され、もう一方のレイヤーは半透明の黒い塗りつぶしで暗くするために使用されます。これら 2 つの長方形のプロパティを微調整して、ベース カラーの色調をますます暗くすることができます。

右側のインスタンスについても、同様のパターンに従い、各インスタンスの上に四角形を追加します。唯一の違いは、代わりに半透明の白い塗りつぶしで彩度を下げて明るくする必要があることです。すべての設定が完了したら、各バリアントをグループ化し、それに応じて名前を付けることができます(たとえば、暗いバリアントはプライマリ900から600まで、明るいバリアントは400から50まで、500はIndigo.Designのようにベースカラーの色相用に予約されています。黄色と緑の色合いについても同じことができるため、マクドナルドブランドの二次および三次色の色合いも作成できます。

色に関する2番目の重要なステップは、アセットパネルに移動して、これらを再利用可能な「色」として追加します。Adobe XDではカラーアセットに単純な16進数を使用する必要があるため、長方形を描画し、スポイトツールで色の配列を1つずつ選択し、パネル上部の[色]見出しの右側にあるプラスアイコンでカラーアセットに追加します。これは面倒なことかもしれませんが、長期的には報われます。

カラーアセットを共通のベースでグループ化し、それに応じてこれらのアセットパネルグループに名前を付けて、一貫性のあるよく整理されたAdobe XDデザインシステムを作成することをお勧めします。これは、デザインシステムが私たちのように約50色を含むように拡張する場合に必要になります。

グレーの色は他の色とは非常に異なり、デザイナーコミュニティの間では2つの反対の意見が広がっています。一部の人は、灰色は、中央にベースシェードがあり、暗い色調と明るい色調の派生物を持つ他のカラー配列と同じように扱うべきだと主張しています。他の人は、パレットの一方の端にベースを置き、不透明度で遊んで残りの色合いを実現します。どちらのアプローチも、1つのテーマについて考える場合に機能します。ただし、Adobe XDのデザインシステムで明るいテーマと暗いテーマの両方のバリエーションをサポートするには、最初のアプローチではなく2番目のアプローチを検討する必要があります。

実際には、900〜50のバリアントに対して10個の長方形を作成し、それらすべてを黒で塗りつぶし、一定の間隔で不透明度を下げ始める必要があります。900 バリアントの値は 87%、800 は 74% を使用し、50 までは 50 まで上昇し、わずか 2% になります。サーフェスに特別な色を追加することで、つまり、アプリの背景や、カードやリストなどの一部のコンポーネントの背景など、これらの追加色をアセットとして追加する準備が整いました。今回だけは、単純なhex値を表すため、描画した長方形から直接行うことができます。

これが整い、特別な検証ユースケースとデータの視覚化のためにさらに色を追加するオプションがあれば、すべての準備が整いました。Adobe XDで気に入っているのは、ターゲットレイヤーを選択し、アセットパネルで色を右クリックすることで、色を塗りつぶしまたは境界線として適用できることです。つまり、この時点で持っている 30+ 色の塗りつぶしと境界線のアセット バリアントを作成する必要がなく、時間と繰り返しを節約できます。色に関してそれを包むために、私は小さな色の秘密を共有したいと思います - 不透明度0%の透明なカラーアセットを1つ作成して、グラフィック要素をコンポーネントから視覚的に消すことができますが、レイアウトを維持したい場合はその場所とスペースを保持します。

タイポグラフィ

ブランドの次の柱はタイポグラフィです。マクドナルドの「M」について考えてみれば、その色が何であれ、ブランドを認識することができます。タイポグラフィは、スケーラブルなデザインシステムの主要な柱の1つでもあります。Adobe XDでは、最終的には色と同様のアプローチでアセットパネルに表示されます。しかし、Adobe XD Design Systemのタイポグラフィを設計するには、フォントプロパティを選択して、コンポーネントが必要とする数の書体スケールを作成し、デザインシステムのユーザーがブログ記事から複雑なUIまで、製品に関連するあらゆるものをデザインするために自由に使えるようにする必要があります。

そのことについて、注目すべき2つの主要なフォントプロパティがあります。明らかに、フォントサイズはテキストの塊に構造を与えるものですが、フォントサイズが大きいほど、表示したい部分が薄くなることがあります。また、テキストをより​ 目立たせて文の他の部分から目立たせるために、テキストを太くする必要があります。これらのプロパティを組み合わせると、見出し、字幕、本文テキストのセットを作成できます。コンポーネント固有の文字スタイルも追加したくなりますが、それには注意が必要です。たとえば、テキスト変換を使用してマテリアルのようにすべて大文字にするボタンタイポグラフィや、アバターのイニシャルに独自の特定のサイズと処理を使用することは理にかなっていますが、これらを多く導入しすぎると、デザインシステムの全体的な一貫性が低下する可能性があります。

文字のスタイルが爆発的に拡大したり、デザインシステムのユーザーがそれを悪用して現在のデザインガイドラインを破ったりすることを容易にするため、タイプスケールを追加することの影響を慎重に検討する必要があります。Indigo.Design for Adobe XDのチームが気に入っているのは、このプログラムで色とキャラクタースタイルを組み合わせることができる点です。つまり、定義したタイポグラフィにカラーベースのバリエーションを作成する必要がなくなり、時間と繰り返しを節約できます。

Adobe XDのもう一つの利点は、テキストの配置が文字スタイルの一部ではなく、各テキストの使用例に応じて選択できることです。次の図は、Indigo.Design for Adobe XDで定義された文字スタイルのシンプルさを示しており、使いやすさと柔軟性を犠牲にすることはありません。

Adobe XDでスケーラブルで剛性の高いデザインシステムを構築するためのヒントの後半は、XDのコンテキストで使用および再利用できるUI要素とアトミックピースの両方の観点から、コンポーネントに関連しています。

コンポーネントは、何かをスタンドアロン要素として使用するメカニズムであり、すべてのコンポーネントが単一の定義 (コンポーネントマスター) に接続されているため、兄弟要素と一貫性があります。アイコンのような小さくて基本的なものから始めてアイコンセットの組み立てを開始したり、影やイラストのコレクションから、より複雑な構造の例としてリストを作成するためのアイテムの繰り返しまで進んでください。

アイコン、影、イラストはコンポーネントとして来る必要はないと主張する人もいるかもしれません。ただし、Adobe XDでアイコンボタンコンポーネントを作成する場合は、それを広く定義する必要があります。特定のコンテキストで使用するため、通常はデフォルトのアイコンを別のアイコンに変更する必要があります。空の状態のイラストや、選択すると影が大きくなり、より近くに表示されるカードについても同じことが言えます。

カラーと文字スタイルが決まったら、Adobe XD Design System でアイコンにフィードするコンポーネントの作成に取り掛かります。マテリアルアイコン、フォントオーサム、独自のカスタムコレクションなど、サードパーティのセットを使用しているかどうかにかかわらず、デフォルトのサイズを選択し、アイコングリフを使用してコンポーネントを作成するだけです。Indigo.Design for Adobe XDは、アイコンのベースに24pxの正方形を使用しています。

ここで指摘しておきたいのは、アイコンについて最も重要なことの 1 つは、アイコンの代表的なコンポーネントに名前を付けることです。設定アイコンコンポーネントの名前が「_Overrides/Material Icons/action/settings」であるのを見て、Idngo.Design の例を挙げましょう。これは "_Overrides" で始まり、コンポーネントに配置されたアイコン インスタンスをオーバーライドするためにのみ要素を使用することを指定します。次に、アイコンセット名である「マテリアルアイコン」があります。名前の最後の 2 つの部分は、オプションのカテゴリ名とアイコン名自体を定義します。

カテゴリは、Material from Google やMaterial Extended by Infragistics など、アイコンの大きなファミリーで何らかの組織を作成するのに役立ちます。Adobe XDにはアセット検索の強力なメカニズムがあるため、アイコンに関連するキーワードを検討し、名前の最後に括弧で囲むことで、Adobe XDのデザインシステムのユーザーが検索をより柔軟に行うことができます。

これで、UI コンポーネントのアーキテクチャについてさらに深く掘り下げる準備が整いました。いくつか見ていきますが、シンプルで一般的な例としてボタンから始めましょう。

あるボタンを別のボタンと区別する最初のことは、その使用のコンテキストです。1回か2回、画面に目立つCTAが表示されます。次に、いくつかの重要なアクションがありますが、場合によってはセカンダリアクションも提示する必要があり、場合によってはフローティングコンテキストアクションが必要になることもあります。たとえば、リストにリスト項目を追加するボタンなどです。

これがAdobe XDのデザインシステムのアーキテクチャにとって意味することは、さまざまなタイプのコンポーネントを予測する必要があるということです。ボタンの場合、これらは包含され、輪郭が描かれ、平らで浮かんでいます。アイコンだけの超シンプルなユースケースにしたい場合は、5番目のバリアントを追加することができます。ボタンがアクションをトリガーするという事実以外にボタンを定義するのは、これらの各タイプが同様の内部構造(背景、境界線、影、アイコン、ラベル)を持っていることです。そして、これらの作品では、すでに築いた基盤を活用します。

• 背景と境界線はカラーアセットを使用します。
• 影とアイコンはプリミティブ コンポーネントになります。
• ラベルは、ボタンに典型的な文字スタイルを使用します。

ただし、ボタンはこれだけではなく、特定の条件が満たされるまで、ホバー、フォーカス、または無効な状態で表示されるなどのインタラクション状態も考慮する必要があります。幸いなことに、Adobe XDはコンポーネントの状態をサポートしており、それらは見事に機能します。Adobe XD Design System を使用しているデザイナーは、デザイン時にボタンの無効状態を選択できるだけでなく、有効なボタンの場合、ホバーはインタラクティブな状態になります。つまり、ユーザーがデザインを表示してボタンにカーソルを合わせると、ホバー状態が表示されるように調整されます。

ボタンは常にコンテンツの中央に表示され、その上にいくつかの間隔ルールがある場合があるため、自動レイアウト機能を使用して定義する必要があります。アイコンとラベルをグループに配置し、選択したレイアウトグリッドを尊重したマージンで水平スタックにします。たとえば、4px レイアウトグリッドを使用している場合は 4px または 8px です。ボタンの端からコンテンツを常にパディングしたい場合は、パディングを設定することもできます。自動レイアウトで覚えておくべきことの1つは、テキストが含まれている場合は、テキストの内容に応じて自動的に調整されるように幅を設定する必要があるということです。

ここで、入力フィールドについて見ていきましょう。デフォルトのテーマであるIndigo.Designには、線、ボックス、境界線の3種類の入力があるという事実を考えると、複雑さが高くなります。入力にはヒントがある場合とない場合があり、ヒントはアセットパネルにも表示されています。これにより、デザインシステムのユーザーは、合計12の挿入可能なオプションを選択できます。入力フィールドには、入力が予想される情報をユーザーにガイドするために使用できるプレフィックスやサフィックスなどを表すネストされたコンポーネントがある場合があります。

コンポーネント

最後に、ボタングループとカードの2つのコンポーネントを見てみましょう。ボタン グループには、水平コンポーネントと垂直コンポーネントがあり、7 つのボタンのセットに一致する配置を提供します。水平または垂直スタックをボタンコンポーネントのインスタンスに適用し、各コンポーネントにはコンテンツ用の内部水平スタックがあります。簡単に言えば、スタックのスタックとコンポーネントのコンポーネントを構築します。

下の画像では、スタックが定義されていることがわかります。

• マスクされているボタンの内部グループの場合
• 包括的なマスターコンポーネント

これにより、Indigo.Designのユーザーがボタンを削除した場合、ボタン グループの背景、境界線、影がそれに応じて調整されます。

カードは大きく異なるように見えるかもしれませんが、それは私たちがそれに含まれるコンテンツピースを見るときです。本質的に、アーキテクチャは垂直ボタン グループと非常によく似ています。

カードの特別なセクションは、異なるバリエーションを持つ別々のコンポーネントとして実現されます。アセットパネルから、オーバーライドしたいアイテムの上にアイテムをドラッグすると、簡単にオーバーライドできます。これにより、デフォルトのメディアピースを画像から定型化されたマップに変更したり、ヘッダーの自動レイアウトで遊んで要素を挿入および削除したりして、すべてがこれらの変更に適応することができます。全体として、このカードは特定のエリアを垂直に積み重ねたものに過ぎず、さまざまなアップデートに対応しています。

ここまでをまとめると、Adobe XDは、色や文字スタイルの強固な基盤を確立するだけでなく、それらを組み合わせて、スタックやパディングなどの基本コンポーネントを確立し、真に流動的なレイアウトを作成することを可能にします。その後、これらの基本原則を使用して、必要な数のレベルでより複雑なレイアウト組織を設計することができます。

複雑なコンポーネントやデザインパターンを組み立てることで、Adobe XDのデザインシステムのユーザーは、画面をより迅速にデザインすることができます。ブランドの色を変更したり、明るいUIから暗いUIに移行したりする必要がある場合は、アセットパネルに移動して、色とキャラクタースタイルを更新してください。Adobe XDのDesign Systemで作成されたアプリは、それに応じてテーマが設定されます。