みなさんはXDのコンポーネント機能、使っていますか？以前はXDもsketchと同様にシンボルという名称でしたが、これがとても使いづらかったんですね...。(シンボル内のテキストしかoverrideができない、使い回しが効かない)

しかし、2019年5月に大型アップデートがあり、シンボル機能もコンポーネントと名前を変え仕様を大きく変えました。

このタイミングで僕は「おっ、XD使いやすくなってる！」となり、将来性も考えてメインのデザインツールをsketchからAdobe XDにスイッチしました！(シーンによってはsketchのシンボルの方が使いやすいというタイミングはありますが、総合的に考えると僕はXDの方が使いやすいと思っています)

このコンポーネント機能、当たり前ですがイテレーション(反復)があるデザインをするときにもっとも効果を発揮します。(個人的に例外はあるものの、LPやイテレーションがない要素のデザインではほとんど使わないでしょう)

アプリデザインでは特に力を発揮してくれます。僕はコンポーネントを使わないアプリデザインは考えられません。というわけで今回はアプリの一般的なUIを題材に、僕のコンポーネントの使い方をご紹介します。

0. 基本的な使い方

基本的な使い方は至って簡単です。わかる人は読み飛ばしましょう。

コンポーネントにしたいレイヤー群を選択して、⌘ + Kです。
これで下図のように緑色の線で囲まれたら完成です。

これを試しにコピーしてみましょう。
同じく緑色の線で囲まれているので、これもコンポーネントです。

ただしコピー元のほうは左上にダイヤマークがついていますね。こちらの方をマスターコンポーネントと呼びます。逆にコピーしてできたコンポーネントをインスタンスと呼びます。(誤解を恐れずに言うと「親」と「子」の関係です。)

このインスタンス(子)はマスターコンポーネント(親)の変更を反映します。
ただし、インスタンス(子)に個別に変更を加えた箇所はマスターコンポーネント(親)の影響を無視します。

逆に言うと変更を加えた箇所以外は、マスターコンポーネント(親)と同じになります。

これの何がいいかというと、XDは「バージョン違いのUI」を作りやすいという点です。例えばボタンのUIに対して

・色が違うバージョン
・ゴーストになるバージョン(塗りではなく線になり、フォントカラーも変わる)
・角丸が変わるバージョン
・アイコンが入るバージョン(ダウンロードボタンなど)

など一つのコンポーネントでバージョン違いを作ることができます。
sketchだとそれぞれのシンボルやカラーシンボルを作る必要があります。
(ゴーストボタンなどはデザインシステムによっては違うコンポーネントとして扱うべきかもしれませんが。)

いずれにしろコンポーネントは、エンジニアやユーザーに最終的に渡ることを考えると「1つのコンポーネントで1つの用途」を決めるべきと考えます。
それを考えるとコンポーネントのバージョン違いを作り汎用性がある運用ができるほうがよさそうです。

1. ヘッダー

まずはヘッダーの雛形を作ります。余談ですがアプリのUIはサイズも厳しく見ていきたいところです。
AppleのHIG(Human Interface Guideline)に目を通して適切なUIをデザインしましょう。

ここでプロダクト内で一番使われそうなヘッダー要素をマスターコンポーネントにしておくと後々作業が楽です。(Backの矢印、キャンセルなどのテキスト、プロフィール画像など)

そしてこのマスターコンポーネントをコピーして各アートボードにインスタンスを配置していきます。アートボードに応じてタイトルを変えたり、backの矢印を配置したりします。いろいろなパターンがありますよね、アプリって。

ちなみに新しい要素をインスタンスに加えたいときに注意なのですが、
しっかりインスタンスのコンポーネント内のレイヤーに加えましょう。
ヘッダー移動したら矢印がついてこなかった、とかになってしまいます。

もしヘッダーレスのページを作ることになったとしても、インスタンスのヘッダーの下地を消せばいいだけです。ボタンの位置はほかのヘッダーと変わりません。

デザイン展開した後に「矢印の位置を5pxずらしたい」となったらどうしましょう？マスターコンポーネントの矢印をずらせばいいだけです！コンポーネント使ってなかったらと考えると恐ろしいですね。gkbr！

2. タブ

次にタブです。ヘッダーと同じようにマスターコンポーネントを作ります。
ちなみに僕はアイコンもコンポーネント化します。このとき全て同サイズの透明な四角形と一緒にコンポーネント化すると以下のメリットがあります。

・マージンの取り方が統一化される
・小数点マージンがなくなる
・遷移を作るときにタップ領域が広くなる

あとはコピーしてインスタンスをアートボードに配置していきます。
そしてカレントに合わせて色を変えれば完成ですね。

もしこのタブを展開したあとに「タブの色を変えたい」となったらどうしましょう？マスターコンポーネントのタブの色を変えるだけです！コンポーネント使ってなかったらと考えると恐ろしいですね。gkbrgkbr

3.おわりに

Adobe XDのコンポーネントの使い方をアプリのヘッダー・タブで紹介してみました。

バージョン違いのUIを作るのに便利、と言いましたが多分使ってるとバージョン違いのUIを一括変更したい、という場面が多々あります。(マスターコンポーネントAのインスタンスA'がたくさんあってA'を一括変更したい)

下図でいうマスターはAだけど、A'ヘッダーを一括変更したいみたいな。

こういう時はもしかしたらA'で別のコンポーネントを作る必要があるかもしれません。ただ作業的にはやりやすくなりますが、もしXDファイルやコンポーネントライブラリを共有されたエンジニアが「これは別の用途で使うものなのか？」と誤解を招く可能性もあるのでそこは注意が必要です。

1. デザイナー自身が作業を効率化する
2. 共有されたチームメンバーがUIデザインの意図を理解しやすくなる

という2点をコンポーネント化するときは意識したいところです。

もし上記のやり方よりいいうまいコンポーネントの使い方がある場合は是非教えてください。