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

コンポーネント(旧称、シンボル)はきわめて柔軟なデザイン要素です。様々なコンテキストでボタンを使用する場合のように、繰り返される要素を作成して維持しながら、要素のインスタンスを様々なコンテキストやレイアウトに合わせて変更することができます。

以下では、コンポーネントを使用して、同じ基本要素の複数のバージョンを簡単に管理する方法について説明します。

コンポーネント

XD を既にお持ちですか?

アプリケーションを更新

新機能をチェック

この機能を試す

サンプル UI キットを取得

.xd; 27 MB

準備

XD の次の概念を理解してください。

コンポーネントの作成

コンポーネントを作成するには、オブジェクトコンポーネントを作成を選択します。オブジェクトまたはオブジェクトのグループを選択して、次のいずれかの操作をおこなうこともできます。

プロパティインスペクター
プロパティインスペクターから

プロパティインスペクターの「コンポーネント」セクションで「+」アイコンをクリックします。

アセットパネル
アセットパネルから

アセットパネルの「コンポーネント」セクションで「+」ボタンをクリックします。

コンテキストメニュー
コンテキストメニューから

オブジェクトを右クリックし、「コンポーネントにする」(command+K または Ctrl+K)を選択します。

XD で初めてコンポーネントを作成すると、それがマスターコンポーネントとなり、緑の塗りつぶし菱形が左上隅に表示されます。コンポーネントは、他の要素と同じように編集できます。 

コンポーネントの作成
マスターコンポーネント

注意事項

  • XD には、マスターコンポーネントを編集するための専用のビューがありません。マスターコンポーネントを編集する場合は、カンバス上で編集します。
  • カンバス上のマスターコンポーネントを削除した場合でも、インスタンスを選択し、コンテキストメニューの「マスターコンポーネントを編集」オプションにアクセスできます。XD はカンバス上にマスターコンポーネントを生成します。
  • コンポーネントの 1 つのインスタンスについてのみリンクを解除する場合は、コンテキストメニューの「コンポーネントをグループ解除」オプションを使用します。これに対し、カンバス上のすべてのインスタンスについてリンクを解除する場合は、アセットパネルの削除オプションを使用します。
  • 編集対象のコンポーネントがマスターかどうかは、バウンディングボックスの左上隅の緑の塗りつぶし菱形によって確認します。

ベストプラクティス

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

  • コンポーネントの大規模なデザインシステムを作成する場合は、関連するマスターコンポーネントごとに別のアートボードに整理します。例えば、ボタンだけを 1 つのアートボードにまとめ、ナビゲーションバーを別のアートボードにまとめます。
  • デザインシステムの構築にあたっては、柔軟性を高め、再利用を容易にするために、コンポーネントを最小レベルで構築します。例えば、ダイアログコンポーネントを作成する場合、ダイアログのボタンは、ダイアログコンポーネント内にインスタンスをネストして作成する必要があります。
  • 必ずコンポーネント内にインスタンスをネストしてください。マスターコンポーネントを作成する際に、マスターコンポーネント内に別のマスターコンポーネントをネストしないでください。 

コンポーネントのインスタンスの操作

マスターコンポーネントのすべてのコピーをインスタンスと呼びます。コンポーネントのインスタンスは、左上隅に緑の枠の菱形が表示されます。マスターコンポーネントに変更を加えると、すべてのインスタンスに同じ変更が適用されます。

インスタンスのオーバーライド
インスタンスのオーバーライド

オーバーライドは、そのインスタンスにのみ適用される固有の変更であり、マスターコンポーネントには適用されません。インスタンスのプロパティを変更すると、XD によってそのプロパティがオーバーライドとしてマークされます。マスターコンポーネントへのリンクを切ることなくインスタンスプロパティをオーバーライドできます。 

マスターコンポーネント
マスターコンポーネント
インスタンス
インスタンス
オーバーライドされたインスタンス
オーバーライドされたインスタンス

ベストプラクティス

コンポーネントのインスタンスを操作する際のベストプラクティスを以下に示します。

  • コンポーネントのバリエーションを試す場合は、コンテキストメニューで「コンポーネントをグループ解除」を選択し、インスタンスをマスターから切り離します。
  • コンポーネントやインスタンスを見つける方法:
    • カンバス上で、コンポーネントのすべてのインスタンスを見つけるには、アセットパネルで対象のコンポーネントを右クリックし、「カンバスでハイライト」を選択します。
    • インスタンスの操作中にマスターコンポーネントを見つけるには、インスタンスを右クリックし、「マスターコンポーネントを編集」を選択します。

マスターコンポーネントの編集

マスターコンポーネントを編集すると、その特定のプロパティが既にオーバーライドされているインスタンスを除き、すべてのインスタンスが更新されます。

マスターコンポーネントを編集するには、カンバス上のインスタンスまたはコンポーネントを選択し、次のいずれかの方法を使用します。

コンテキストメニュー
カンバスのコンテキストメニューから

カンバスでインスタンスを右クリックし、「マスターコンポーネントを編集」を選択します。

アセットパネル
アセットパネルから

アセットパネルでコンポーネントを右クリックし、「マスターコンポーネントを編集」を選択します。

プロパティインスペクター
プロパティインスペクターから

コンポーネントセクションで「初期設定のステート」の横にある編集鉛筆アイコンを選択します

注意事項

  • 回転プロパティと不透明度プロパティは、マスターコンポーネントからインスタンスに反映されません。
  • 編集対象のコンポーネントがマスターかどうかは、バウンディングボックスの左上隅に表示された緑の塗りつぶし菱形によって確認します。

ベストプラクティス

マスターコンポーネントを編集する際のベストプラクティスを以下に示します。

  • カンバスからマスターコンポーネントを削除する場合は、インスタンスを右クリックし、「マスターコンポーネントを編集」を選択します。XD によってカンバス上にマスターコンポーネントが生成されます。

コンポーネントのインスタンスのオーバーライド

マスターコンポーネントは、デザインシステムを維持するために必要な一貫性を提供します。マスターコンポーネントに加えられた変更はすべて、そのインスタンスに自動的に反映されます。ただし、デザインシステムを便利に使用するためには、さらに柔軟性が必要です。1 つの要素からコピーを作成して使用することはできますが、使用する状況によってはコピーをカスタマイズする必要があります。このような場合に役立つのがインスタンスです。

オーバーライドは、そのインスタンスにのみ適用される固有の変更であり、マスターコンポーネントには適用されません。インスタンスのプロパティを変更すると、XD によってそのプロパティがオーバーライドとしてマークされます。オーバーライドされたプロパティは常に保持され、マスターコンポーネントで同じプロパティを編集しても変更できません。 

オーバーライドを消去して、再度マスターコンポーネントに同期するには、インスタンスを右クリックし、「マスターステートにリセット」を選択します。

コンポーネントのインスタンスのオーバーライド
コンポーネントのインスタンスのオーバーライド

オーバーライドの種類

オーバーライドの種類とその使用シナリオの例を以下に示します。

構造とレイアウトのオーバーライド
オーバーライドの種類:テキスト、ビットマップ、サイズ、アピアランス、レイアウト
  • テキスト:コンポーネントのインスタンスのテキストコンテンツを編集できます。例えば、ボタンコンポーネントのラベルを変更できます。
  • ビットマップ:コンポーネントのインスタンスのビットマップコンテンツを置き換えることができます。例えば、プロファイル画像のコンポーネントの画像を置換できます。
  • サイズ:パディングやレスポンシブサイズ変更サイズを適用するときに、インスタンスのサイズを変更できます。例えば、フォームのテキストフィールドのサイズを変更できます。
  • アピアランス:塗りの色、枠線、ぼかしなどのアピアランスのプロパティを変更できます。例えば、通知の背景色を変更できます。
  • レイアウトと構造:コンポーネントのインスタンス内にあるオブジェクトを追加、削除、移動できます。例えば、ドロップダウンメニューにメニュー項目を追加して修正できます。

サイズのオーバーライド

コンポーネントはサイズ変更ができるだけでなく、レスポンシブサイズ変更の強力な機能が併せて適用されます。マスターコンポーネントのサイズを変更すると、手動のオーバーライドによって既にサイズ変更されているインスタンスを除き、インスタンスが自動的にサイズ変更されます。これにより、既にサイズ変更されているインスタンスは、オーバーライドでサイズ変更されたときの配置が保持されます。 

マスターコンポーネントやそのインスタンスのサイズ変更の効果

  • インスタンスは、マスターコンポーネントに影響を与えずに、個々にサイズ変更することができます。
  • コンポーネント全体のサイズを変更できるだけでなく、その中のアイテムのレイアウトも変更できます。
  • コンポーネントのインスタンスは、適用されているサイズに関係なく、変更を加えることができます。

レスポンシブサイズ変更と同様、カンバスのサイズを変更すると、拡大または縮小されたカンバスサイズに応じて、XD が自動的に要素を再配置します。

プロパティインスペクターで、「レスポンシブサイズ変更」を「自動」から「手動」に切り替えると、コンストレイントをより詳細に編集できます。

アピアランスのオーバーライド

アピアランスのオーバーライド
アピアランスのオーバーライド

再利用可能な要素を作成するときは、コンテキストに応じて元の要素を変更できることが重要です。その結果として、インスタンスのすべてのスタイルとアピアランスのプロパティをオーバーライドすることができます。オーバーライドを使用すると、マスターコンポーネントとの連携を維持しながら、様々なバリエーションを作成できます。 

レイアウトと構造のオーバーライド

コンポーネントは、サイズやその中の要素のレイアウトだけでなく、コンポーネントの構造をオーバーライドすることもできます。これにより、マスターコンポーネントやそのインスタンスで、要素を追加または削除できます。

レイアウトと構造のオーバーライド
レイアウトと構造のオーバーライド

マスターコンポーネントにオブジェクトを追加すると、そのオブジェクトはそれぞれのインスタンスにも追加されます。オブジェクトを追加したときに、レスポンシブサイズ変更アルゴリズムが適用され、オブジェクトにレイアウトのコンストレイントが自動的に設定されます。コンストレイントは、そのコンテナに関連する新しいオブジェクトの位置に応じて決定されます。オブジェクトがマスターコンポーネントから削除されると、すべてのインスタンスからも削除されます。

インスタンスの要素を追加または削除することもできます。オブジェクトを追加すると、レイアウトのコンストレイントがオブジェクトに自動的に設定されます。インスタンス内の要素を削除すると、そのインスタンス内の要素のみが削除されます。マスターコンポーネントの要素は変わりません。

注意事項

  • 個々のオーバーライドではなく、すべてのオーバーライドをリセットして、マスターコンポーネントに再度同期することはできません。 
  • インスタンスのプロパティがオーバーライドとしてマークされている場合、「マスターステートにリセット」を選択して、マスターと再同期することができます。

ベストプラクティス

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

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

ネストされたコンポーネントの操作

デザインシステムの構築には、再利用のしやすさと柔軟性が重要です。それには、微小なレベルでコンポーネントを作成できる必要があります。XD は、コンポーネントを互いにネストすることで、デザインシステム要素を複雑に作り込めるようになっています。 

ネストされたコンポーネントを作成する方法

ネストされたコンポーネントは、次のいずれかの方法を使用して作成します。

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

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

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

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

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

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

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

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

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

ダイアログコンテナ

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

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

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

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

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

コンポーネントにする

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

複数のコンポーネントを一緒にネストできるため、堅牢なデザインシステムを構築することができます。マスターコンポーネントを更新すると、すべてのインスタンスが更新内容を受け取ります。他のコンポーネント内にネストされたインスタンスも同様です。現在、XD には、別のネストされたマスターコンポーネント内にあるコンポーネントのインスタンスを編集しても、そのコンポーネントの他のインスタンスに変更が反映されないという制限事項があります。今後のリリースで、この制限事項が解消されるよう現在取り組みを進めています。

注意事項

  • コンポーネントを初期設定のステートからオーバーライドしても、そのコンポーネントの他のステートには伝達されません。 
  • XD は、現在、ステート間で、ドラッグ、時間、キーとゲームパッド、音声の各トリガーをサポートしていません。 
  • XD は、現在、ネストされたコンポーネントに対するホバーステートのトリガーをサポートしていません。 
  • ホバーステートを併せ持つコンポーネントからタップインタラクションをトリガーすると、遅延が発生します。 

ベストプラクティス

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

  • マスターコンポーネント同士を互いの内側にネストしないでください。これは現在の制限事項の回避策としては役立ちますが、アドビでは、ネストされたコンポーネントワークフローの問題を解消するための取り組みを進めています。
別のベースコンポーネント内にインスタンスをネストすることはできます
別のマスターコンポーネント内にインスタンスをネストすることはできます
マスターコンポーネント同士を互いの内側にネストしないでください。
マスターコンポーネント同士を互いの内側にネストしないでください。
  • ネストされたコンポーネントを作成するには、新しいコンポーネント内に他のコンポーネントのインスタンスのみをネストします。これにより、マスターコンポーネントの編集時に不要な変更がおこなわれるのを防止できます。 
  • 外側のマスターコンポーネント内にネストされたコンポーネントが複数のステートを持つ場合、ネストされたコンポーネントのステートを切り替えることができ、そのステートの変更は外側のコンポーネントのすべてのインスタンスに伝達されます。

コンポーネントへのステートの追加

コンポーネントのステートを使用すると、再利用の状況に応じた、コンポーネントの異なるバリエーションを保存できます。マスターコンポーネントに対してオーバーライドをおこなった後、これらのオーバーライドからステートを作成して簡単に再利用できます。

例えば、メインコンポーネントとサブコンポーネントなど、様々な種類のボタンコンポーネントを作成できます。ステートを使用することで、マスターコンポーネントのオーバーライドを使用してバリエーションを作成できます。 

ステートとコンポーネントを操作する場合は、次の点に注意してください。

  • マスターコンポーネント上で作成されたステートは、そのコンポーネントのすべてのインスタンスで使用できます。これにより、複数のインスタンスを持つコンポーネントを作成して、ステートを簡単に切り替えることができます。
  • プロパティインスペクターのステートを切り替える項目で、ステートの名前を変更したり、削除したりすることができます。
  • トリガーとそれに伴うアクションを追加して、コンポーネントのステート間を切り替えることができます。例えば、ボタンコンポーネントの上にカーソルを合わせたときに、デフォルトのステートからホバーステートに切り替えようにデザインできます。 

ステートの追加

コンポーネントの作成が完了すると、プロパティインスペクターに、コンポーネントとその「初期設定のステート」のリストが表示されます。ここから、「新規ステート」と「ホバーステート」の 2 種類のステートをコンポーネントに追加できます。

新規ステートの作成

「新規ステート」は、コンポーネントのバリエーション(コンポーネントの無効バージョンやクリックされたバージョンなど)が表示されるシナリオに使用します。

新規ステート
新規ステート

デザインモードで、プロパティインスペクターに移動し、マスターコンポーネントの「初期設定のステート」の横にある「+」ボタンをクリックして「新規ステート」を選択します。

デフォルトで、新規ステートには、事前に定義されたインタラクティブ機能はありません。インタラクションをコンポーネントにワイヤー接続する方法について詳しくは、コンポーネントへのインタラクティブ機能の追加を参照してください。

ホバーステートの作成

プロトタイプの操作時に、コンポーネントにカーソルを合わせると別のステートを変更して表示するには、「ホバーステート」を使用します。

ホバーステート
ホバーステート

デザインモードで、プロパティインスペクターに移動し、マスターコンポーネントの「初期設定のステート」の横にある「+」ボタンをクリックして「ホバーステート」を選択します。

デフォルトで、ホバーステートには、インタラクティブ機能が事前に定義されています。 

ステートの表示と管理

コンポーネントのステートを作成した後、コンポーネントのプロパティを編集して、操作時におけるコンポーネントの表示を実際に目で確認できます。以下では、ステートに関連付けられたワークフローをいくつか示します。

スイッチステート

スイッチステート
スイッチステート

コンポーネントを選択し、プロパティインスペクターでステートを切り替えます。

ステート名の変更

ステート名の変更
ステート名の変更

プロパティインスペクターでコンポーネントのステート名をダブルクリックし、新しい名前を追加します。名前の変更または削除ができるのは、マスターコンポーネントのステートのみです。「初期設定のステート」という名前を変更することはできません。

ステートの削除

ステートの削除
ステートの削除

コンポーネントのステートを右クリックし、「削除」を選択します。マスターコンポーネントからコンポーネントステートを削除すると、アクティブステートのスイッチのコンポーネントインスタンスが初期設定のステートに戻ります。

ステートのオーバーライド

マスターコンポーネントで初期設定のステートに対しておこなった編集は、すべてのインスタンスの初期設定のステートに反映されます。同様に、マスターコンポーネントで特定のステートを編集すると、その特定のステートの編集内容がすべてのインスタンスに伝達されます。ステートの編集は必ずマスターコンポーネントでおこなってください。これにより、ステートの編集内容がすべてのインスタンスで更新されます。

ステートを使用すると、テキスト、ビットマップ、サイズ、レイアウト、アピアランスなどのプロパティをオーバーライドできます。インスタンス内のステートのプロパティをオーバーライドすると、マスターコンポーネントからそれらのプロパティの更新を受け取らなくなります。

オーバーライドの結果を採用しない場合は、インスタンスを右クリックして「マスターステートにリセット」を選択すれば、いつでも元のマスターコンポーネントに再度同期することができます。この操作で、インスタンス上のすべてのオーバーライドがクリアされ、マスターコンポーネントに再度同期されます。

インタラクティブ機能を追加する

プロトタイプモードでは、コンポーネントのステート間にホバーとタップのインタラクションを接続できます。コンポーネントステートにインタラクションを接続する手順は、アートボード間にインタラクションを追加する手順に似ています。主な違いは、コンポーネントステートのインタラクションの接続では、接続先にアートボードではなくステートを選択する点です。

インタラクティブ機能
  1. コンポーネントを選択して、プロトタイプモードに切り替えます。
  2. プロパティインスペクターで、コンポーネントの「 > 」アイコンまたはインタラクションセクションの「+」をクリックします。
  3. インタラクションを追加するステートを選択します。 
  4. トリガーとして「タップ」(クリックイベントの場合)または「ホバー」(マウスオーバーアクションの場合)を選択します。
  5. アクションの種類(自動アニメーションやトランジションなど)を選択します。
  6. 接続先としてステートを選択します。
  7. プレビューウィンドウに切り替え、コンポーネントのインタラクティブ機能をテストします。

コンポーネントのステートをワイヤー接続してタップ時のインタラクションを作成します。ステートはドロップダウン内のアートボードの上にデバイダーで区切られて一覧表示されます。同じコンポーネントのステートに対して複数のインタラクションを定義できます。例えば、ホバー状態とタップ状態の両方を持つトグルスイッチがある場合、ステップ 4〜7 を 2 回繰り返してタップ状態とホバー状態を定義することで、両方のインタラクションを定義できます。複数のインタラクションを作成すると、インタラクションセクションに定義されたインタラクションが表示されます。表示されているインタラクションを切り替え、要件に応じてインタラクションのプロパティを変更します。

注意事項

  • コンポーネントをダブルクリックすると、プロパティインスペクターのステートを選択する項目が消えます。
  • XD は、ステート間のトリガーとしてタップとホバーのみをサポートします。
  • XD では、インスタンス内の 1 つのステートをオーバーライドしても、別のステートには反映されません。
  • 別のコンポーネント内でネストされているコンポーネントに対して、ホバーステートをトリガーすることはできません。

ベストプラクティス

コンポーネントにステートを追加する際のベストプラクティスを次に示します。

  • コンポーネントの様々なバリエーションを再利用するには、必ずコンポーネントのステートを作成します。
  • プロトタイプモードに切り替えると、異なるステート間のインタラクションを手動で編集できます。
  • ステート間にインタラクティブ機能を追加し、カラーなどのプロパティを変更する場合は、アクションに「トランジション」を選択し、「なし」または「ディゾルブ」を選択します。ステート間の位置やサイズをアニメーション化する場合は、アクションに「自動アニメーション」を選択します。
  • 新規ステートを作成する場合、まず初期設定のステートまたは既存のステートを複製することができます。目的に応じて、初期設定のステートを選択し「+」をクリックして新しいステート用に複製するか、既存のステートを選択し「+」をクリックして既存のステートを複製します。既存のステートから新しいステートを作成すると、新しいステートにも同じオーバーライドが適用されます。そのため、既にオーバーライドされているプロパティは、初期設定のステートから更新内容を受け取りません。ほとんどの場合には、初期設定のステートで「+」をクリックして新しいステートを作成する方法が適切です。初期設定のステートから開始した場合、マスターコンポーネントと同期し、オーバーライドは含まれません。

コンポーネントの管理

表示 

アセットのコンポーネントを表示
アセットパネルからコンポーネントを表示

アセットパネルからカンバスに、新しいインスタンスを表示またはドラッグできます。
すべてのインスタンスを見つけるには、アセットパネルでコンポーネントを右クリックし、「カンバスでハイライト」を選択します。
アセットパネルでコンポーネントを見つけるには、カンバス上でコンポーネントのインスタンスを右クリックし、アセットパネルで「コンポーネントを表示」を選択します。

編集、名前変更、または削除

マスターコンポーネントを編集
アセットパネルのコンテキストメニュー

アセットパネルでコンポーネントを右クリックするか、カンバス上でインスタンスを選択し、コンテキストメニューのオプションを使用して編集または削除します。コンポーネントの名前を変更するには、右クリックして「名前を変更」を選択します。

マスターステートにリセット

マスターステートにリセット
マスターステートにリセット

すべてのオーバーライドを消去し、マスターコンポーネントに同期し直すには、インスタンスを右クリックして「マスターステートにリセット」を選択します。
インスタンスをマスターから同期解除するには、インスタンスを右クリックして「コンポーネントのグループ解除」を選択します。

コンポーネントへのインタラクティブ機能の追加

コンポーネントとステートの間にインタラクティブ機能を追加できます。マスターコンポーネントにインタラクションを作成すると、そのコンポーネントのすべてのインスタンスがそのインタラクションを受け取ります。マスターコンポーネントでインタラクションを変更すると、インスタンスのインタラクションが自動的に更新されます。

インスタンスのインタラクションをオーバーライドすることもできますが、その場合、インスタンスがマスターコンポーネントから更新内容を受け取らなくなります。デザインのオーバーライドと同様に、コンポーネントのインタラクションもプロパティをオーバーライドできます。

注意事項

  • マスターコンポーネントからインスタンスにインタラクションが伝達されるのを防ぐ方法はありません。
  • インスタンスは、(オーバーライドとして)追加されたインタラクションと、マスターコンポーネントから継承されたインタラクションを区別できません。
  • ステートに対しては、限られたアクションとトリガーのみがサポートされています。 

ベストプラクティス

インタラクティブ機能をコンポーネントに追加する際のベストプラクティスを以下に示します。

  • ドキュメント間でコンポーネントをコピー&ペーストまたは共有する場合、コピー先のアートボードが常に存在することを保証できないため、コンポーネントからアートボードへのインタラクションは保持されません。ただし、各コンポーネントのステート間のインタラクションは、XD で保持されます。つまり、1 つのコンポーネントにホバーステートとアートボードへのタップトリガーが設定されている場合、これを別のドキュメントにペーストすると、XD によりホバーステートのインタラクションが保持され、アートボードへのタップトリガーは破棄されます。 
  • この操作は、インタラクションをインスタンスではなくマスターコンポーネントに追加する場合に選択します。
  • すべてのインスタンスが同じリンク先を共有する場合は、マスターコンポーネントをワイヤー接続することで、その接続がすべてのインスタンスに自動的に伝達されるのでより効果的です。例えば、ホームボタンに使用してホーム画面に移動することができます。
  • すべてのインスタンスまたは一部のインスタンスのリンク先が異なる場合は、マスターコンポーネントをワイヤー接続するのではなく、個々のインスタンスをワイヤー接続する方が簡単です。例えば、1 つの主要ボタンをプロジェクトのどこからでも使用できるが、用途とコンテキストによってリンク先が異なる場合などです。

ビデオ:コンポーネントの操作方法

「シンボルはデザインワークフローで重要な役割を果たし、1 回の編集で多くのインスタンスを最新の状態に保つことができました。しかしアドビはさらなるレベルアップを目指し、シンボルの機能を大幅に強化してコンポーネントへと進化させたのです。」(Howard Pinsky、Adobe XD シニアエバンジェリスト

コンポーネントの操作について詳しくは、こちらのビデオをご覧ください。

視聴時間:1 分


次のステップ

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

ask the community

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