By Dani Beaumont
Adobe XDでは、多くのプロジェクトにわたって何千もの画面をデザインできます。しかし、プロジェクトの拡大とともに整理ができなくなってくると、生産性に大きく影響する恐れがあります。実はAdobe XDのライブラリパネルには、アセットを整理するためのパワフルな機能が多数含まれています。このビデオでは、簡単な手順でその機能を活用する方法をご紹介します。
アプリの左下にあるアイコンをクリックしてライブラリパネルを開くと、カラー、文字スタイル、コンポーネントのセットがすでに定められていることがわかります。コンポーネントのリストは非常に長くなっていますが、UIキットの場合はこれがごく一般的です。上の方に戻ると、カラーや文字スタイルには、すでにわかりやすい名前が付けられています。デフォルトの16進数値でのカラー名称は、ダブルクリックして使いたい名前を入力すれば変更できます。
デフォルトのリストでは、パネル内のすべての項目はそれらが追加された順に表示されていますが、コンテンツを簡単に整理するには、「並べ替え順序」のドロップダウンから「名前順で並べ替え」を選ぶという方法があります。そうすると、パネル内のすべての項目がアルファベット順に並べ替えられます。このように、文字スタイルをアルファベット順にすることができました。カラーとコンポーネントについても同様です。覚えておくと役立つでしょう。
まだまだ整理すべきコンポーネントが残っていますね。では、もう少しそちらを見ていきましょう。長々としたアイテムリストを素早く整理するには、サブグループにまとめるという方法があります。まず検索フィールドを使い、その後フィルターフィールドも組み合わせて使用します。「ドキュメントアセットを検索」を選択すると、ドロップダウンが表示されます。ここでは、現在のドキュメントを検索するか、「ライブラリマネージャー」パネルで開いているライブラリ全体を検索することができます。現在のドキュメントに限定し、アイコンを検索します。名前を入力すると、ドキュメント内のすべてのアイコンのリストが表示されます。ここで左に表示されているのがフィルターオプションです。ワードアイコンがカラーや文字スタイルに表示された場合は、ここでフィルタを適用することもできます。今はコンポーネントだけに絞ります。オフにすると、コンポーネントのアイコンのみが表示されます。
次は、これらをまとめてサブグループを実際に作ってみたいと思います。上にスクロールして最初のアイコンを選択し、Shiftキーを押しながら下に移動して最後のアイコンも選択します。右側のメニューで選択したこちらのセットに対して、「選択から新規グループ作成」を選び、「Icons」と名前を付けます。スクロールしたり内部のコンテンツを非表示にしたりして、残っているコンポーネントを確認できます。ボタンに対しても同じように整理したいと思うので、選択します。フィルターを変える必要はありません。新しいグループを作成し、「Buttons」と名付けます。残りのものは、ここではそのまま置いておきます。さらにロゴ用のフォルダーを作成してみます。ここでは、仮にロゴの1つを加えるのを忘れてしまったとしましょう。3つだけ選択して新しいグループを作成し、「Logos」と名付けます。その後の作業で他のロゴを追加したり、まとめるのを忘れたことに気付いたりした場合は、作成済みのフォルダーにいつでもドラッグして移すことができます。XDでは、互いにネストできるサブグループのセットを無制限に作成できます。つまり、好きなだけ細かく整理することができます。
作業を進める中で、グループを取り消すこともできます。すべてのロゴをサブフォルダーに置くのをやめる場合は、「Logos」をクリックし、右側のメニューから「グループ解除」を選択します。そうするとロゴが元のレベルに戻り、サブグループは解除されます。「削除」をクリックすると、サブグループだけでなく、サブグループ内のすべてのコンテンツも削除されます。意図しない操作とならないように注意しましょう。「グループ解除」を選択して、元のレベルに戻します。操作をキャンセルしたい場合は、確認メッセージが表示されたときに「取り消し」を選んでもよいですし、通常のキーボードショートカット（MacならCommandキー、WindowsならControlキーを押しながら「Z」）でも取り消すことができます。
ほかにも個人的に気に入っている整理機能があります。例えば、このアートボード上のアイコンセットの構造を反映したい場合があります。これを簡単に行うには、デザインキャンバス上で、ここにあるすべてのコンポーネントを選択します。選択したコンポーネントに対し、右側のメニューから「アセットのコンポーネントを表示」を選択します。XDの中で先ほどとは異なるセットが選択されていることに注目してください。複数のサブグループにまたがる場合もありますが、問題ありません。ここで選択された箇所を右クリックすると、ヘッダー用に新規グループを作成できます。アプリバーに対しても、同様の操作を行うことができます。右側のメニューから選択し、アセット内で表示します。この右側のメニュー内で選択した項目から新しくサブグループを作成し、「App Bar」と名付けます。
ライブラリパネルの中に、数多くの便利な整理機能が組み込まれていることがわかると思います。ぜひ、試してみてください。
こちらで紹介するベストプラクティスを活用して、プロジェクトアセットを整理しましょう。このチュートリアルでは、カラーや文字スタイル、コンポーネントを並べ替えて、グループ化し、名前を付ける手順を学べます。ダブルクリックして文字スタイルやコンポーネントの名前をわかりやすいものに変えましょう。デフォルトの16進数値でのカラー名称を一般的な名前に変更することもできます。アイテムをアルファベット順に並べ替えることも可能です。ドキュメントアセット内のアイテムセットを手作業で選ぶか、または検索とフィルター機能を使って選択し、サブグループを作成しましょう。サブグループは好きなだけ作れますし、さらにその内部にサブグループをネストして、アセットコレクションを作成することもできます。
