XD

【Adobe XD】要素を部品化!コンポーネントの使い方を初心者向けに徹底解説!

 

コンポーネントとは、デザインカンプの作成の過程で「繰り返し使用する部品」のことです。

 

ボタンやヘッダーなどの何度も登場する共通した「部品」などをコンポーネントとしてアセットパネル(画面左のサイドバー)に登録しておくことで、

  • いつでも何度でもパネルから配置することができる。
  • 一部のコンポーネントの編集が、同種のコンポーネント全体に反映される。
  • コンポーネントをアセットパネルで一元管理できる。

といったメリットがあります。

コンポーネントを使用することで、デザインの修正を一括で行えたり、登録したコンポーネントに名前をつけて管理できるため、作業効率の向上が期待できます。

 

この記事では

コンポーネントの使い方機能について、gif動画や画像を交えながら解説します。

 

adobe xdの全体像を知りたい方は、コチラの記事をご覧下さい!

目次

コンポーネントの種類コンポーネントの使い方コンポーネントの一括編集

プロパティのオーバーライドQ&Aのコーナー

 📖目次に戻る

コンポーネントの種類

コンポーネントはその状態によって機能に違いがあります。

 

まずは、少しだけコンポーネントの種類について説明するね。

 

最初に登録したコンポーネントのことを「マスターコンポーネント」と言います。↓

マスターコンポーネント

アセットパネルに登録されたコンポーネントは、必要な時に呼び出して「配置」することができます。

このマスターコンポーネントのコピーのことを「インスタンス」と言います。↓

インスタンス

さらに、このインスタンスに編集を加えたもの(今回はベースの色を変更)をプロパティの「オーバーライド」と言い、↓

オーバーライド

これらのコンポーネントは、選択した状態で出てくる左上のアイコン判別することができます。

コンポーネントの判別

ちなみに、コンポーネント以外の「通常のオブジェクト」は、青色の枠で囲われているので、

コンポーネントと通常のオブジェクトを区別する場合は、囲われている「枠の色」で区別することができます。

通常のオブジェクト

 

まずはこれだけ理解して、使い方を見てみよう!!

 📖目次に戻る

コンポーネントの使い方

コンポーネントは、「作成」したオブジェクトを、アセットパネルに「登録」し、パネルから「配置」して使用します。

コンポーネントの使い方

部品の作成

部品の作成は、各種「図形ツール」「ペンツール」「テキストツール」などを使用して行います。

慣れるまでは何をコンポーネントにすれば良いかわからないと思いますが、最初は以下を参考にコンポーネントにしてみると良いでしょう。

ヘッダー

ナビゲーション

ボタン

フッター

今回は作成したボタンをコンポーネントにしてみます。

 

コンポーネントの登録

コンポーネントの登録は、登録するオブジェクトを選択した状態で、アセットパネルの「コンポーネント」セクション「+」をクリックして行います。

一度登録されたコンポーネントは、アセットパネルに表示されるようになり、いつでも名前を変更することができます。

コンポーネントを追加

 

また、オブジェクトを選択した状態で右クリック 「コンポーネントにする」を選択しても登録することができます。

コンポーネントを追加その2

ご覧の通り、どちらの方法でコンポーネントを登録しても結果は同じですね。

 

今作ったコンポーネントが、「マスターコンポーネント」になるよ。

 

コンポーネントの配置

コンポーネントの配置は、アセットパネルからドラッグして行います。

アセットパネルからコンポーネントをドラッグして配置

 

その他の方法としては、マスターコンポーネントやインスタンスをコピー&ペーストするか、

「option」キー( macのショートカットキー の場合)または、「alt」キー( windowsのショートカットキー の場合)を押しながらドラッグして「インスタンス」を作成する方法があります。

マスターコンポーネントから直接コピーする

 

今作ったものが「インスタンス」だよ。

 📖目次に戻る

コンポーネントの一括編集

コンポーネントの一括編集は、「マスターコンポーネント」を編集して行います。

マスターコンポーネントを編集することで、全てのインスタンスが自動的に一括編集されます。

 

マスターコンポーネントの編集は、アセットパネルに登録された該当のコンポーネントを「右クリック」「メインコンポーネントを編集」をクリックして行います。

また、直接マスターコンポーネントをダブルクリックして編集を行うことも可能です。

ご覧の通り、マスターコンポーネントのテキストやベース色に加えた変更は、その他のインスタンスにも反映されていることがわかります。

しかし、コンポーネントの一括編集には注意点があります。

それは、

 

マスターコンポーネントを編集しても、

特定のプロパティが、既にオーバーライド(上書き)されているインスタンスは更新されない

ということです。

 

特定のプロパティが、既に上書き、、って言われてもよくわからないよね。

それでは、次の「オーバーライド」について詳しくみてみましょう。

 📖目次に戻る

プロパティのオーバーライド

インスタンスに変更を加えた場合を、プロパティの「オーバーライド」(上書き)と言います。

プロパティとは、「属性」「性質」のことで、先ほどのボタンを例にしていうと、「サイズ」「色」「テキスト」などの、そのオブジェクトが「どんなものなのか?」を表す情報のことです。

 

 

プロパティの保持

では実際に、マスターコンポーネントを編集して、オーバーライドされたプロパティがどうなるかみてみましょう。

今回は、マスターコンポーネントのベースの「色」を編集するので、あらかじめベースの「色」を変えた(オーバーライドされた)インスタンスを用意して行います。

ご覧の通り、既にプロパティを上書きされている「インスタンス❶'」は、マスターコンポーネントの編集の影響を受けることなく、プロパティが保持されていることがわかると思います。

次は、メインコンポーネントの「色」以外のプロパティに編集を加えた場合にどうなるのか見てみす。

 

オーバーライドされていないプロパティの変更

先程と同じ条件で、既に「色」を変更したインスタンスはそのままに、今度はマスターコンポーネントの「テキスト」を編集してみましょう。

いかがでしょうか。

当たり前かもしれませんが、別のプロパティが上書きされているインスタンスでも、オーバーライドされていないプロパティ通常通り上書きされます。

 

一部のコンポーネントだけデザインを変えたい時に便利な機能だね。

 📖目次に戻る

Q&Aのコーナー

このコーナーでは、コンポーネントを扱う上で、困ったことや疑問についてお答えします!

 

Q1. オーバーライドは元に戻せるの?

オーラーライドをしてしまったインスタンスを「右クリック」「メイン状態にリセット」※をクリックすると元に戻るよ!

※旧バージョンでは「マスターステートにリセット」

 

Q2. マスターコンポーネントを見失ったけど、見つける方法は?

インスタンスを「右クリック」「メインコンポーネントを編集」をクリックするとマスターコンポーネントが選択された状態になるよ!

 

Q3. マスターコンポーネントを削除してしまったけど復元できる?

Q2と同じで、インスタンスを「右クリック」「メインコンポーネントを編集」をクリックするとアートボードの外に新しいマスターコンポーネントが作成されるよ!

 📖目次に戻る

最後に

いかがでしたでしょうか、今回は「コンポーネント」について、基本的な使い方について解説しました。

コンポーネント以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。

Adobe XD

 

続きを見る

最後までお読みいただき、ありがとうございました!

-XD