ドキュメント間でコンポーネントを使用して、生産性のワークフローを高める方法を説明します。

デザイナーは、ナビゲーションバーやボタンなどの、デザイン全体で繰り返されるマスター要素を作成することがよくあります。ただし、要素のインスタンスをコンテキストまたはレイアウトに基づいてカスタマイズする必要がある場合、作業は困難になります。そのようなシナリオでは、多くの場合、同じ基本要素の複数のバージョンを作成することになり、デザインの管理が非常に難しくなります。

コンポーネント(以前はシンボルと呼称)は比類のない柔軟性を持つデザイン要素であり、ボタンのような繰り返される要素のインスタンスを作成して維持しながら、要素のインスタンスを様々なコンテキストやレイアウトに合わせて変更することができます。くわえて、以下のことが可能です。

  • マスター要素を変更して、すべてのインスタンスに反映させる
  • インスタンスのサイズを個別に変更する
  • 入れ子になったコンポーネントをオーバーライドとして入れ替える
  • ドキュメント間でコンポーネントをリンクして編集する
  • 以下をオーバーライドする
    • コンテンツプロパティ(テキストと画像の塗り)
    • アピアランスプロパティ(塗り、境界線、効果、テキストスタイルなど)
    • インスタンス内のオブジェクトのレイアウト(サイズ、配置、レイヤー階層、コンストレイント)
    • インスタンスの構造(要素の追加と削除)

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


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

マスターコンポーネントは、作成するコンポーネントの最初のインスタンスです。カンバス上でマスターコンポーネントを操作または編集することができます。マスターコンポーネントは、編集コンテキストで左上隅に表示される緑色の菱形<<アイコン>>>によって区別されます。

マスターコンポーネントを作成するには:

オブジェクトまたはオブジェクトのグループを選択し、次のいずれかのオプションを使用してマスターコンポーネントを作成します。

XDアプリケーションから、オブジェクト/コンポーネントにするを選択します。

または

  • ショートカットキー(Command + K)を使用します。

    または

  • 右クリックし、「コンポーネントにする」を選択します。

    または

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

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

マスターコンポーネントをコピーしてインスタンスを作成できます。作成されたインスタンスは次のようになります。

  • マスターコンポーネントの正確なコピーです。
  • 元のものと同じプロパティを持っています。
  • 本質的にマスターコンポーネントにリンクされています。
  • 変形ハンドル付きの緑色の輪郭が示されます。

コンポーネントのインスタンスを複数作成するには、Alt キーを押しながらカンバス上でマスターコンポーネントをクリックしてドラッグします。

マスターコンポーネントに接続された状態でインスタンスプロパティをオーバーライドできます。インスタンスのプロパティを変更すると、そのプロパティがオーバーライドとしてマークされます。オーバーライドは、そのインスタンスにのみ適用される一意の変更であり、マスターコンポーネントには適用されません。

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

注意:

コンポーネントのすべてのインスタンスに影響を与えるグローバルな変更をおこなう場合は、マスターインスタンスを変更します。

インスタンスに加えられた変更またはオーバーライドを元に戻す場合は、インスタンスを右クリックし、「マスターコンポーネントにリセット」を選択します。

マスターコンポーネントの表示と生成

デザインカンバスでマスターコンポーネントが利用できない場合:

  • コンポーネントインスタンスを右クリックし、「 アセットにコンポーネントを表示」オプションを選択します。アセットパネルのマスターコンポーネントに移動します。

または

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

マスターコンポーネントがデザインカンバス上のどこかに存在する場合は、その場所に移動します。そうでない場合は、マスターコンポーネントが作成され、デザインカンバスに配置されます(アートボードの複製に類似します)。

インスタンスからマスターコンポーネントへの変更の更新とリセット

インスタンスからマスターを更新するには、インスタンスを編集し、コンテキストメニューから「マスターコンポーネントを更新」を選択します。競合するオーバーライドがある場合を除き、コンポーネントの他のすべてのインスタンスが新しいマスターのプロパティに更新されます。

インスタンスをマスターにリセットするには、「マスターコンポーネントに戻す」を選択して、インスタンスに対しておこなわれたオーバーライドを破棄します。

マスターコンポーネントに戻す
マスターコンポーネントに戻す

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

コンポーネントのオーバーライドを使用して、マスターコンポーネントのプロパティ(サイズ、塗りのカラー、テキスト、画像の塗り、コンテンツなど)をオーバーライドできるインスタンスを含むマスターコンポーネントを作成できます。マスターコンポーネントに加えられた変更は、変更されたプロパティがインスタンスでオーバーライドされていない限り、すべてのインスタンスにカスケードされます。個々のインスタンスを編集した場合、変更されたプロパティや内容は、そのインスタンスにのみ適用されるオーバーライドになり、他のインスタンスとマスターコンポーネントは影響を受けません。オーバーライドを含むインスタンスは、いつでもマスターコンポーネントに再同期できます。インスタンスのスタイルと外観をオーバーライドすることもできます。

オーバーライドを含むインスタンスをリセットしていつでもマスターコンポーネントと一致させることができ、ネストされたコンポーネントインスタンスの特定の部分にオーバーライドを適用することができます。

  • インスタンスに対しておこなわれたオーバーライドをリセットするには、インスタンスを右クリックし、「マスターコンポーネントに戻す」を選択します。
  • インスタンスに対しておこなわれたオーバーライドを元に戻すには、インスタンスを選択して右クリックし、「マスターに戻す」を選択します。
  • インスタンスからマスターに変更をプッシュするには、インスタンスを右クリックし、「マスターにプッシュ」を選択します。
コンポーネントインスタンスのオーバーライド
コンポーネントインスタンスのオーバーライド

コンポーネントのサイズ変更

コンポーネントのサイズ変更を使用して、カンバス上のコンポーネントのサイズを変更し、そのサイズを独自のオーバーライドとして維持できます。XD でのグループと同様に、変形サイズ変更ハンドルを使用して、カンバス上でコンポーネントのサイズを直接変更したり、回転させたりすることができます。コンポーネントのサイズ変更でのデフォルトのサイズ変更モードはレスポンシブサイズ変更であり、プロパティインスペクタでオン/オフを切り替えることができます。アプリケーションの他のサイズ変更可能な要素と同様に、レスポンシブサイズ変更をオフにして手動でコンポーネントのサイズを変更したり、Shift キーを使用して制限付きのサイズ変更を実行したりできます。コンポーネント全体のサイズを変更できるだけでなく、その中のアイテムのレイアウトも変更できます。

適用したサイズに関係なく、コンポーネントのインスタンスに変更を加えることができるようになりました。レスポンシブサイズ変更と同じように、XD では、要素のサイズが変更されたときに、大きいまたは小さいカンバスで要素の配置を再作成します。

サイズ変更されたコンポーネントは、元のコンポーネントの境界の外側に再配置された子要素が非表示になるという点で、アートボードやマスクグループと同じように動作します。マスターコンポーネントのサイズを変更すると、サイズ変更されていないすべてのインスタンスも自動的にサイズ変更されます。その結果、既にサイズ変更されているインスタンスは、サイズ変更された位置をオーバーライドとして保持します。マスターコンポーネントに影響を与えずに、インスタンスを個別にサイズ変更することもできます。

マスターコンポーネントのサイズ変更
マスターコンポーネントのサイズ変更

入れ子になったコンポーネントの操作

コンテキストに応じて更新が必要なモーダルやナビゲーションバーなど、コンポーネントが入れ子になっている大きなコンポーネントをデザインする場合が多数あります。

コンポーネントを入れ替えるには:

  1. アセットパネルからコンポーネントをドラッグし、カンバス上の入れ替えたいコンポーネントの上に配置します。

  2. ドラッグアイコンが個別の矢印から円形の矢印に変わります。

マスターコンポーネント内で入れ子になったコンポーネントを入れ替えると、ドキュメント全体に出現する入れ子になったシンボルが置き換えられます。コンポーネントのインスタンス内でコンポーネントを入れ替えると、そのインスタンスに対してのみローカルオーバーライドが作成されます。

ドキュメント間でのコンポーネントの使用

リンクされたアセットを使用して、XD クラウドドキュメントで使用可能な 1 つまたは複数のデザインファイルのアセット(コンポーネント、カラーおよび文字スタイル)を使用することができます。リンクされたアセットは、リンクされたコンポーネントのワークフローを補完します。リンクされたインスタンスがドキュメントで使用されている場合は、オーバーライド(スタイルと外観、サイズ変更とレイアウト、および構造)を使用して、使用されているドキュメントのローカルインスタンスをカスタマイズできます。

リンクされたアセット
リンクされたアセット

ソースドキュメントのマスターコンポーネントを変更して保存すると、それが使用されているドキュメントの各コンポーネントインスタンスの横に青いバッジが表示され、変更と保存がおこなわれたことが示されます。青いバッジの上にカーソルを置くと、アセットパネルで更新をプレビューすることができ、表示できる場合はデザインカンバスでもプレビューできます。青いバッジをクリックして個々のコンポーネントの更新を受け入れ、アセットパネルの下部にある「すべてアップデート」ボタンをクリックして、ドキュメント内のすべてのインスタンスを更新します。リンクされたアセットについて詳しくは、リンクされたアセットの操作を参照してください。

機能の制限

  • インスタンスの境界線を広げると元のマスターの境界線の外にあるオブジェクトが追加される場合、この操作はできません。これをおこなうと、コンテンツが切り取られます。回避策として:
  1. 意図しているオーバーライドの最大サイズでマスターを作成します。
  2. コンポーネントインスタンスの外部に、新しいオブジェクトを要素として含めます。
  • マスターコンポーネントをドキュメント間で移動することはできません。
  • マスターの編集とマスターへのリセットでは、複数選択は使用できません。
  • 「パスに変換」を選択した場合、オーバーライドは削除されます。編集を続けると、インスタンスのこのオブジェクトに対するオーバーライドが削除されます。
  • マスターから編集する場合、現在マスタープロパティ編集として不透明度はサポートされていません。インスタンスごとに独自の不透明度が設定されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー