ここでは、Adobe XD のデザインシステムでネストされたコンポーネントを操作する方法について説明します。

デザインシステムの構築には、再利用のしやすさと柔軟性が重要です。それには、精密なレベルでコンポーネントを作成できる必要があります。コンポーネント作成で XD を使えば、コンポーネントの相互ネスト化や、メニューやカードベースのレイアウトなどの複雑オブジェクトの作成ができます。

以下では、ネストされたコンポーネントを作成して使用し、シームレスなデザインエクスペリエンスを実現する方法について説明します。

コンポーネント

XD を初めてお使いですか?

XD を入手

アプリケーションの基本情報

Adobe XD を既にお持ちですか?

アプリケーションを更新

新機能のご紹介

実際に試す

サンプル UI キットを取得

.xd; 7 MB

始める前に

以下の概念に精通してください。

ネスト化コンポーネントを作成

ネスト化コンポーネントは、堅牢なデザインシステムの作成に役立ちます。メインコンポーネントを更新すると、更新がネスト化コンポーネント内であっても、そのすべてのインスタンスがそれらの更新を受け取ります。

ネスト化コンポーネントの作成では、以下のアプローチを利用できます。

アプローチ A:コンポーネントのインスタンスをコピーしてグループ内にペーストし、コンポーネントに変換します。

アプローチ B
  1. メインのボタンコンポーネントを作成します。
  2. ボタンコンポーネントのインスタンスをコピーしてグループ内にペーストします。
  3. グループを選択し、コンポーネントに変換します。 

アプローチ B:コンポーネントをコピーして他のコンポーネント内にペーストします。

ボタンコンポーネントのインスタンスをグループの中にペーストします。
  1. メインのボタンコンポーネントを作成します。
  2. ボタンコンポーネントのインスタンスをコピーして他のコンポーネント内にペーストします。

アプローチ C:コンポーネントの一部にドリルダウンし、その部分をコンポーネントに変換します。

アプローチ B
  1. メインダイアログコンポーネントを作成します。
  2. コンポーネントの一部にドリル・ダウンします。
  3. ボタンをコンポーネントに変換します。

アプローチ A を使用して、ダイアログコンポーネントを作成します。

ボタンコンポーネントを作成する

ボタンコンポーネントを作成する

ダイアログのボタンコンポーネントを作成します。

ダイアログコンテナを作成する

ダイアログコンテナ

テキストと他のオブジェクトをグループとして含むダイアログコンテナを作成します。

ボタンインスタンスをペースト

インスタンスをペーストする

ボタンコンポーネントのインスタンスをグループの中にペーストします。

コンポーネントに変換する

コンポーネントにする

グループを選択し、コンポーネントに変換します。

ベストプラクティス

ネストされたコンポーネントを作成する際のベストプラクティスを以下に示します。

  • 複数のコンポーネントインスタンスが内部にネスト化されたコンポーネントを作成できます。ただし、コンポーネントが多くのオブジェクトを伴う複数ステートを持つ場合、パフォーマンスが低下する可能性があります。そのような場合、最適なパフォーマンスを得るために、コンポーネントを最大 3 レベルの深度にネストして、1 レベル当たりのステート数を 1 コンポーネント当たり最大 10 ステートに制限できます。
  • コンポーネントをそれ自体の中にネストしないでください。コンポーネントが自己参照するため、無効なコンポーネントになる可能性があります。
  • 外側のメインコンポーネントの中に、複数のステートがあるネストされたコンポーネントが含まれている場合、ネストされたコンポーネントのステートを切り替えることができます。そのステートの変更は、外側のコンポーネントのすべてのインスタンスに反映されます。

ネスト化コンポーネントの同期

ネスト化コンポーネントを同期することで、メインコンポーネント内のネスト化コンポーネントにされた変更が、そのメインコンポーネントのすべてのインスタンスに反映されます。

その働きを見てみましょう。 

例 1:メインボタンから変更を受け取るコンテナ内のボタン。

ボタンコンポーネントのインスタンスをグループの中にペーストします。
  1. 最初のメインコンポーネントとしてボタンを作成します。
  2. トグルメニュー内にボタンをネストします。
  3. コンテナ内にトグルメニューをネストします。

メインボタンコンポーネントに加えられたすべての変更は、トグルメニューとコンテナ内にネストされたすべてのボタンに反映されます。

次に、メインボタンの 2 つのインスタンス、メイントグルメニューの 2 つのインスタンス、およびメインコンテナの 1 つのインスタンスを作成します。

いくつかのシナリオを見てみましょう。

シナリオ 1:

シナリオ 1

メイントグルメニュー内にネストされたボタンのカラーを青に変更します。 

トグルメニューのインスタンス内とコンテナ内にネストされたすべてのボタンが青へのカラー変更を取得しました。

ただし、メインボタンの 2 つのインスタンスはカラーを変えません。ネスト化コンポーネントへの変更はそれらのコンテナに関連付けられるためです。カラー変更はトグルメニュー内のボタンのインスタンスにのみ適用されます。 

シナリオ 2:

シナリオ 2

メインコンテナ内のボタンのカラーをピンクに変更します。コンテナのインスタンス内のボタンもピンクに変わります。

他のボタンはカラー変更を取得しないことに注意してください。ネスト化コンポーネントへの変更はそれらのコンテナに関連付けられるためです。カラー変更はコンテナのトグルメニュー内のボタンのインスタンスにのみ適用されます。

シナリオ 3:

シナリオ 3

コンテナインスタンス内にネストされたボタンのカラーを緑に変更します。

この変更は、メインコンポーネントではなくインスタンスでオーバーライドとして行われたため、他のボタンはいずれも緑色の変更を取得しません。

シナリオ 4:

シナリオ 4

シナリオ 3 から続けて、メインコンテナ内にネストされているボタンのカラーを紫に変更します。 

コンテナインスタンスのネスト化ボタンは、既にオーバーライドされているため、カラーを変更しません。

注意事項

  • ネスト化コンポーネントはメインコンポーネントにできません。そのため、メインコンポーネントに変更を加える必要がある場合は、ネスト化コンポーネントを右クリックして、メインコンポーネントを編集を選びます。
  • 外部コンポーネントのインスタンス内のネスト化コンポーネントが交換された場合、メインのネスト化コンポーネントのメインステートにリセットでは、交換されたコンポーネントを伴うインスタンスを変更しません。

ベストプラクティス

ネストされたコンポーネントのインスタンスをオーバーライドする際のベストプラクティスを以下に示します。

  • コンポーネントのバリエーションを作成して再利用するには、インスタンスをオーバーライドするのではなく、メインコンポーネントでステートを作成します。
  • インスタンスをオーバーライドする場合は、オーバーライドするプロパティがメインコンポーネントからの更新を必要としないことを確認してください。例えば、ボタンコンポーネントのテキストをオーバーライドすると、メインコンポーネントに対して、ラベルは異なるものになりますが、サイズとカラーはその後も同期されます。

ライブラリを使用すると、デザインシステムのスタイルとコンポーネントを配布して、ドキュメント全体で一貫して再利用できます。ライブラリを通じてデザインシステムを作成して配布するには、ドキュメントアセットパネルにカラー、文字スタイル、コンポーネントを追加してデザインシステムアセットをキュレートし、それらをライブラリとして公開して XD や他の Creative Cloud アプリケーションすべてで再利用します。Creative Cloud ライブラリの使用方法についての詳細は、XD での Creative Cloud ライブラリによる作業を参照してください。

以前のバージョンの XD で作成されたネスト化コンポーネントによる作業

XD の以前のバージョンでは、ネスト化コンポーネントで行われた変更は、外部コンポーネントのインスタンスで更新されません。エクスペリエンスを向上させるには、最新バージョンの XD でドキュメントを開きます。

いいえ。最新バージョンの XD でネスト化コンポーネントを含む既存ドキュメントを開くと、XD はそれらのコンポーネントを新モデルに自動移行し、素早く作業を開始できます。

XD がドキュメントを開いたとき、それらの特定コンポーネントはアセットパネルのバージョンと一致しませんでした。データを失わずに移行するため、それらのメインコンポーネントはキャンバス上のインスタンスに変換されています。メインコンポーネントをキャンバスに戻す場合は、外部インスタンスを右クリックし、「メインコンポーネントを編集」を選択します。また、メインコンポーネントをキャンバスでインスタンスのように見せたい場合は、必要なオーバーライドをインスタンスからメインコンポーネントに転送できます。

更新を取得するには、リンクされたドキュメントを最新バージョンの XD で開きます。また、今後リンクされるドキュメントも、最新バージョンの XD で開いて正しいビヘイビアーを確かめる必要があります。

XD 34 以降、XD はメインコンポーネントを別のメインコンポーネント内にネストすることをサポートしなくなりました。以前のようなネスト化メインコンポーネントの作成手順をおこなうと、内部コンポーネントがインスタンスに変更されます。

次のステップ

ここでは、XD のコンポーネントの操作方法について説明しました。さらに一歩踏み込んで、フィードバックを得るためにデザイナーや関係者とデザインを共有する方法についてご確認ください。

ご質問または共有するアイデアがある場合

ask the community

質問やアイデアを共有するには、Adobe XD コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。