コンポーネントとは？
ボタンやヘッダーなど何度も登場する共通の「部品」を、コンポーネントとして登録して使用することで、次のようなメリットがあります。
❶ コンポーネントをアセットパネルに登録して一元管理できる。
❷ 登録したコンポーネントはいつでもパネルから配置することができる。
❸ 一部のコンポーネントの編集が、同種のコンポーネント全体に反映される。
このようにコンポーネントを使用することで、作業効率の向上が期待できます。
是非この記事を読んで使いこなせるようになって下さいね。
コンポーネントの使い方
コンポーネントは、「作成」したオブジェクトをアセットパネルに「登録」し、パネルから「配置」して使用します。
基本的な使い方
まずは、コンポーネントの作成から登録、配置の方法について順を追って説明します。
step
1オブジェクトの作成
オブジェクトの作成は、各種「図形ツール」や「ペンツール」「テキストツール」などを使用して行います。
慣れるまでは、「ヘッダー」「ナビゲーション」「ボタン」「フッター」をコンポーネントにしてみると良いでしょう。
今回は作成した「ボタン」をコンポーネントにしてみます。
step
2コンポーネントの登録 ( コンポーネント化 )
コンポーネントの登録は、オブジェクトを選択した状態で、アセットパネルの「コンポーネント」セクションの「+」をクリックして行います。
一度登録されたコンポーネントは、アセットパネルに表示されるようになり、いつでも名前を変更が可能です。
また、オブジェクトを選択した状態で右クリック →「コンポーネントにする」を選択してコンポーネント化することも可能です。
ショートカットキー
の場合は、⌘ + K
の場合は、Ctrl + K
ご覧の通り、どちらの方法でコンポーネントを登録しても結果は同じですね。
step
3コンポーネントの配置
コンポーネントの配置は、アセットパネルからドラッグして行います。
その他の方法としては、メインコンポーネントやインスタンスをコピー&ペーストするか、
の場合は「option」キー、
の場合は「alt」キー を押しながらドラッグして「インスタンス」を作成する方法があります。
コンポーネントの種類
前項でも少し触れましたが、コンポーネントにはその状態によって機能に違いがあります。
- メインコンポーネント … オリジナルのコンポーネント。変更を加えると他のインスタンス全体に反映される。
- インスタンス … メインコンポーネントのコピー。変更を加える（オーバーライド）ことが可能。
- オーバーライド … インスタンスに編集を加えたコンポーネント。
❶ 最初に登録したコンポーネントのことを「メインコンポーネント」と言います。
❷ メインコンポーネントのコピーのことを「インスタンス」と言います。
❸ インスタンスに編集を加えたもの（今回はベースの色を変更）をプロパティの「オーバーライド」と言います。
これらのコンポーネントは、選択した状態で出てくる左上のアイコンで判別することができます。
ちなみに、コンポーネント以外の通常のオブジェクトは、青色の枠で囲われているので、
コンポーネントと通常のオブジェクトを区別する場合は、囲われている「枠の色」で区別することができます。
ポイント
コンポーネントの解除
コンポーネントの登録（コンポーネント化）を解除する方法には、大きく分けて２つの方法があります。
- コンポーネントを一つずつ個別に解除する方法
- 同じ種類のコンポーネントを全て解除する方法
しかし、いずれの解除方法も結果が異なります。
コンポーネントを個別に解除する
コンポーネントを個別に解除する方法は、対象のコンポーネントを選択した状態で、「右クリック」 → 「コンポーネントをグループ解除」 を選択して行います。
ショートカットキー
- の場合は、shift + ⌘ + G
- の場合は、shift + Ctrl + G
さらに、解除するコンポーネントの状態によって結果も変わります。
インスタンスを個別にグループ解除した場合は、メインコンポーネントとその他のインスタンスに影響はありません。
しかし、メインコンポーネントを個別にグループ解除した場合は、その他のインスタンスに影響がありませんが、「メインコンポーネントが存在しない」状態になります。
ポイント
同じ種類のコンポーネントを全て解除する
同じ種類のコンポーネントを全て解除する場合は、アセットパネルから対象のコンポーネントを選択した状態で、右クリック → 削除 を選択して行います。
この場合は、関係する全てのコンポーネントが解除されます。
コンポーネントの一括編集
コンポーネントの一括編集は、メインコンポーネントを編集して行います。
メインコンポーネントの編集は、アセットパネルに登録された該当のコンポーネントを「右クリック」→「メインコンポーネントを編集」をクリックして行います。
または、直接メインコンポーネントをダブルクリックして編集を行うことも可能です。
ご覧の通り、メインコンポーネントのテキストやベース色に加えた変更は、その他のインスタンスにも反映されていることがわかりますね。
しかし、コンポーネントの一括編集には次のような注意点があります。
特定のプロパティが既にオーバーライド（上書き）されているインスタンスは更新されません！
それでは、次の「コンポーネントの一部編集」で詳しくみてみましょう。
コンポーネントの一部編集
コンポーネントの編集は同種のコンポーネント全体に反映されますが、インスタンスに変更を加えた場合は、一部だけ編集することが可能です。
これを、プロパティの「オーバーライド」(上書き)といいます。
そして、このプロパティのオーバーライドは、
コンポーネントの編集が反映されない
前述した通り、コンポーネントの一部を編集した場合は、メインコンポーネントの編集が反映されません。
では実際に、メインコンポーネントを編集して、オーバーライドされたプロパティがどうなるかみてみましょう。
今回は、メインコンポーネントのベースの「色」を編集するので、あらかじめベースの「色」を変えた（オーバーライドされた）インスタンスを用意して行います。
ご覧の通り、既にプロパティを上書きされている「インスタンス❶'」は、メインコンポーネントの編集の影響を受けることなく、プロパティが保持されていることがわかると思います。
次は、先ほどと同じ条件で、既に「色」を変更したインスタンスはそのままに、今度はメインコンポーネントの「テキスト」を編集してみましょう。
当たり前かもしれませんが、別のプロパティが上書きされているインスタンスでも、オーバーライドされていないプロパティは通常通り上書きされます。
ポイント
オーバーライドを元に戻したい場合は、インスタンスを「右クリック」→「メイン状態にリセット」をクリックして下さい。
Q&Aのコーナー
このコーナーでは、コンポーネントを扱う上で、困ったことや疑問についてお答えします！
Q1. メインコンポーネントを見失ったけど、見つける方法は？
Q2. メインコンポーネントを削除してしまったけど復元できる？
最後に
いかがでしたでしょうか、今回は「コンポーネント」について、基本的な使い方について解説しました。
コンポーネント以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。
-
-
Adobe XD
XDの基本的な使い方を、オリジナルのスマホサイトをもとに解説しているよ!!
続きを見る
