XDの強みを最大限に活用したコンポーネント機能を使えば、デザインやワイヤーフレーム作成時の効率化にとても役立ちます。
とはいえ、「コンポーネントの使い方は？」「どんなシーンで活用できるの？」「そもそもコンポーネントとは？」と気になる人もいるのではないでしょうか。
この記事を読めば、今日からでもコンポーネントを活用して作業を行えるようになるので、ぜひご一読ください。
Adobe XDのコンポーネントとは？
XDのコンポーネントは共通要素を管理する雛形
Adobe XDのコンポーネントとは、共通するデザインを管理するための雛形のことです。
例えば、アートボードの中に同じデザインのボタンを5つある場合、大元となるコンポーネント（マスターコンポーネント）に対して変更を行うと、すべてのボタンに変更内容が反映されます。
大元を変更すれば一括で反映されるので、作業を効率化したり後々変更があった際に作業が楽になり、とても便利な機能です。
Adobe XDのコンポーネントの作り方
- コンポーネント化したいオブジェクトを選択
- メニュー項目から「コンポーネントにする」を選択
コンポーネント化したいオブジェクトを選択
まずは、コンポーネントにしたいオブジェクトを作成し、オブジェクトを選択状態にしましょう。
上の画像では、背景とテキストをグループ化していますが、オブジェクトが分かれている場合は、選択されている部分しかコンポーネントされないので、注意しましょう。
メニューから「コンポーネントにする」を選択
オブジェクトを右クリックして、メニュー項目の中から「コンポーネントにする」を選択しましょう。
選択状態から以下のショートカットでも同様にコンポーネント化できます。
ショートカット
- Windowsの場合：Ctrl + E
- Macの場合：Command + E
コンポーネント化すると、このように選択された枠線が緑色になります。
マスターコンポーネントは、左上のひし形マークがベタ塗りになっているので、判別する場合はこの部分を確認しましょう。
コンポーネントの作り方は、設定はこれで以上です。
Adobe XDのコンポーネントの使い方
使い方①ライブラリからドラック&ドロップ
XD操作画面の左側にあるライブラリに、コンポーネントの項目があります。
コンポーネント化していれば、この中に追加されているはずなので、アートボードへドラック&ドロップしてみましょう。
すると、ボタンが追加されます。
マスターコンポーネントは、左上のひし形がベタ塗りですが、コピーしたコンポーネントは左上の枠線が白塗りになっているので、確認してみましょう。
使い方②メインコンポーネントをコピー&ペースト
XDを使用している人ならオブジェクトをコピーしたことがある人も多いと思います。このコンポーネントも同じようにコピー&ペーストして足していけます。
マスターコンポーネントを選択した状態から、次の操作で複製してみましょう。
- Winの場合：Altを押しながらドラック&ドロップ
- Macの場合：Optを押しながらドラック&ドロップ
パソコンのショートカットと同様のコピー&ペーストでも複製は可能ですが、この操作なら更に作業を時短できるので、おすすめです！
メインコンポーネントとインスタンスの特徴
インスタンスとは、最初に作成したメインコンポーネントから複製したオブジェクトのことをいいます。
ここまで説明してきた通り、インスタンスがどんなに増えても大元のマスターコンポーネントを変更すれば、すべてのインスタンスにも変更が反映されるという特徴があります。
しかし、デザインやワイヤーフレームを作成していると、
「一個のボタンだけデザインを調整したい」
「ボタンのテキストを一部だけ変更したい」
こういったシーンもでてくると思います。
そんな時は、マスターコンポーネントから複製したインスタンスを直接変更しましょう。
マスターコンポーネントと違い、インスタンスは個別の扱いになるのでインスタンスに変更を加えても、他のオブジェクトには影響しません。
インスタンスを変更した状態のことをオーバーライド（上書き）と呼び、オーバーライドしたオブジェクトは左上のひし形に「・」のマークが入ります。
Adobe XDコンポーネントのおすすめの活用方法
- コンポーネントを使いやすくする管理方法
- コンポーネント化すると便利なデザインパーツ
- コンポーネントを活用してホバーアクション機能を追加
コンポーネントを使いやすくする管理方法
ページのボリュームにも寄りますが、デザインやワイヤーフレームを作成する場合、ヘッダーやフッターボタンなどは、数が多くなると思います。
コンポーネントは便利な機能ですが、マスターコンポーネントの位置が分かりづらいと探すのに手間がかかってしまうので、すぐに見つけられるようにマスターコンポーネントをまとめたコンポーネント管理用のアートボードを別で作成しましょう！
コンポーネント化すると便利なデザインパーツ
コンポーネントは、様々なシーンで活用できますが、WEBサイトでも共通要素として使われる次のようなデザインパーツはコンポーネント化することをおすすめします！
- ヘッター
- フッター
- ボタン
- バナー
- 見出し
- ダミーテキスト
- ダミー画像
ダミーテキストや画像は、文字量やサイズ違いでいくつか用意しておくと、手間なく使い回すことができます。
コンポーネントを活用してホバーアクション機能を追加
コンポーネントには、ステート機能という便利な機能があります。
ステート機能とは、ユーザーが何かしらのアクションを起こした際（インタラクション）の動きをつけられる機能です。
ボタンをホバーした時に色が変わったり、ハンバーガーメニューをクリックするとボタンが出現するなど、そういった動きをXDの中で実装することができます。
今回は、ホバーした際に色が変わるボタンを例にご紹介します。
まずは、動きをつけたいコンポーネントを選択状態にします。
次に右側の操作パネルにある「初期設定のステート」の＋マークをクリックしましょう。
メニュー項目の中から「ホバーステート」をクリックします。
ホバーステートが選択されている状態を確認できたら、ホバー後に適用したいデザインに変更していきます。ここでは、文字色を反転する方法でご紹介します。
ここまで設定できたら、XD操作画面のタブから「プロトタイプ」に切り替えましょう。
その後、右上の再生ボタン（▶）をクリックすると動きを確認できます。
今回は、よくあるシンプルなホバーアクションでしたが、カスタマイズしたい場合は、プロトタイプへ切り替えたあとに右側に追加されるインタラクションという箇所から調整を加えることができます。
ホバー以外にも様々なインタラクションを設定できるので、適時好みに合わせて調整をしてみましょう！
Adobe XDのコンポーネントで作業を効率を上げよう！
コンポーネントを活用すれば効率アップに繋がります。さらにステート機能でクライアントとのやり取りや社内の共有・確認などもスムーズにできるので、普段の仕事に大きく貢献すること間違いなしです！
アコーディオンや簡単なアニメーションの作成もできるので、使い方を覚えれば作業の幅も広くなります。ぜひこの機会にマスターしましょう。