ボタンやヘッダーなどの何度も登場する共通した「部品」などをコンポーネントとしてアセットパネル（画面左のサイドバー）に登録しておくことで、
- いつでも何度でもパネルから配置することができる。
- 一部のコンポーネントの編集が、同種のコンポーネント全体に反映される。
- コンポーネントをアセットパネルで一元管理できる。
といったメリットがあります。
コンポーネントを使用することで、デザインの修正を一括で行えたり、登録したコンポーネントに名前をつけて管理できるため、作業効率の向上が期待できます。
この記事では
コンポーネントの使い方や機能について、gif動画や画像を交えながら解説します。
コンポーネントの種類
コンポーネントはその状態によって機能に違いがあります。
最初に登録したコンポーネントのことを「マスターコンポーネント」と言います。↓
アセットパネルに登録されたコンポーネントは、必要な時に呼び出して「配置」することができます。
このマスターコンポーネントのコピーのことを「インスタンス」と言います。↓
さらに、このインスタンスに編集を加えたもの（今回はベースの色を変更）をプロパティの「オーバーライド」と言い、↓
これらのコンポーネントは、選択した状態で出てくる左上のアイコンで判別することができます。
ちなみに、コンポーネント以外の「通常のオブジェクト」は、青色の枠で囲われているので、
コンポーネントと通常のオブジェクトを区別する場合は、囲われている「枠の色」で区別することができます。
コンポーネントの使い方
コンポーネントは、「作成」したオブジェクトを、アセットパネルに「登録」し、パネルから「配置」して使用します。
部品の作成
部品の作成は、各種「図形ツール」や「ペンツール」「テキストツール」などを使用して行います。
慣れるまでは何をコンポーネントにすれば良いかわからないと思いますが、最初は以下を参考にコンポーネントにしてみると良いでしょう。
ヘッダー
ナビゲーション
ボタン
フッター
今回は作成したボタンをコンポーネントにしてみます。
コンポーネントの登録
コンポーネントの登録は、登録するオブジェクトを選択した状態で、アセットパネルの「コンポーネント」セクションの「+」をクリックして行います。
一度登録されたコンポーネントは、アセットパネルに表示されるようになり、いつでも名前を変更することができます。
また、オブジェクトを選択した状態で右クリック →「コンポーネントにする」を選択しても登録することができます。
ご覧の通り、どちらの方法でコンポーネントを登録しても結果は同じですね。
コンポーネントの配置
コンポーネントの配置は、アセットパネルからドラッグして行います。
その他の方法としては、マスターコンポーネントやインスタンスをコピー&ペーストするか、
「option」キー（ 
の場合)または、「alt」キー（ 
の場合）を押しながらドラッグして「インスタンス」を作成する方法があります。
コンポーネントの一括編集
コンポーネントの一括編集は、「マスターコンポーネント」を編集して行います。
マスターコンポーネントを編集することで、全てのインスタンスが自動的に一括編集されます。
マスターコンポーネントの編集は、アセットパネルに登録された該当のコンポーネントを「右クリック」→「メインコンポーネントを編集」をクリックして行います。
また、直接マスターコンポーネントをダブルクリックして編集を行うことも可能です。
ご覧の通り、マスターコンポーネントのテキストやベース色に加えた変更は、その他のインスタンスにも反映されていることがわかります。
しかし、コンポーネントの一括編集には注意点があります。
それは、
マスターコンポーネントを編集しても、
特定のプロパティが、既にオーバーライド（上書き）されているインスタンスは更新されない。
ということです。
それでは、次の「オーバーライド」について詳しくみてみましょう。
プロパティのオーバーライド
インスタンスに変更を加えた場合を、プロパティの「オーバーライド」(上書き)と言います。
プロパティとは、「属性」や「性質」のことで、先ほどのボタンを例にしていうと、「サイズ」や「色」「テキスト」などの、そのオブジェクトが「どんなものなのか？」を表す情報のことです。
プロパティの保持
では実際に、マスターコンポーネントを編集して、オーバーライドされたプロパティがどうなるかみてみましょう。
今回は、マスターコンポーネントのベースの「色」を編集するので、あらかじめベースの「色」を変えた（オーバーライドされた）インスタンスを用意して行います。
ご覧の通り、既にプロパティを上書きされている「インスタンス❶'」は、マスターコンポーネントの編集の影響を受けることなく、プロパティが保持されていることがわかると思います。
次は、メインコンポーネントの「色」以外のプロパティに編集を加えた場合にどうなるのか見てみす。
オーバーライドされていないプロパティの変更
先程と同じ条件で、既に「色」を変更したインスタンスはそのままに、今度はマスターコンポーネントの「テキスト」を編集してみましょう。
いかがでしょうか。
当たり前かもしれませんが、別のプロパティが上書きされているインスタンスでも、オーバーライドされていないプロパティは通常通り上書きされます。
Q&Aのコーナー
このコーナーでは、コンポーネントを扱う上で、困ったことや疑問についてお答えします！
Q1. オーバーライドは元に戻せるの？
※旧バージョンでは「マスターステートにリセット」
Q2. マスターコンポーネントを見失ったけど、見つける方法は？
Q3. マスターコンポーネントを削除してしまったけど復元できる？
最後に
いかがでしたでしょうか、今回は「コンポーネント」について、基本的な使い方について解説しました。
コンポーネント以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。
-
-
Adobe XD
続きを見る
