デザインシステム間でコンポーネントを使用する方法について説明します。

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

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

ボタンなど、再利用可能な要素を定義するためのマスターコンポーネントを作成し、そのプロパティを変更することで要素のインスタンスをカスタマイズできます。個々のインスタンスに加えた変更はその要素に固有ですが、マスターに加えた変更はプロパティがカスタマイズされていないすべてのインスタンスに反映されます。 

マスターコンポーネントとインスタンス

DX で初めて作成するコンポーネントは、マスターコンポーネントになります。カンバス上でマスターコンポーネントを操作して、他の要素を編集するのと同じように編集できます。マスターコンポーネントは、左上隅に緑色の菱形で示されています。

緑色の菱形のアイコンで示されたマスターコンポーネント
緑色の菱形のアイコンで示されたマスターコンポーネント

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

  1. 右クリックし、「コンポーネントにする」を選択します(Command + K)。

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

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

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

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

  • マスターコンポーネントの正確なコピーです。
  • 元のものと同じプロパティを持っています。
  • 本質的にマスターにリンクされています。 
コンポーネントインスタンス
コンポーネントインスタンス

マスターコンポーネントへのリンクを切ることなくインスタンスプロパティをオーバーライドできます。この仕組みは以下の通りです。

  • マスターコンポーネントに変更を加えると、すべてのインスタンスに同じ変更が適用されます。
  • しかし、インスタンスのプロパティを変更する場合は、そのプロパティがオーバーライドとしてマークされます。オーバーライドは、そのインスタンスにのみ適用される一意の変更であり、マスターコンポーネントには適用されません。

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

次のオプションのいずれかを使用してマスターコンポーネントを編集できます。

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

    カンバスからマスターコンポーネントを編集する
    カンバスからマスターコンポーネントを編集する
  2. アセットパネルでコンポーネントをクリックし、「マスターコンポーネントを編集」を選択します。

    マスターコンポーネントを編集
    アセットパネルからマスターコンポーネントを編集する

カンバスからマスターコンポーネントを削除した場合、カンバス上で現在編集中のオブジェクトの隣にマスターコンポーネントが生成されます。 

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

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

マスターコンポーネントによって、デザインシステムを維持するために必要な一貫性がもたらされます。マスターコンポーネントに加えられた変更はすべて、そのインスタンスに自動的に反映されます。

マスターコンポーネントに加えられた変更をそのインスタンスに反映
マスターコンポーネントに加えられた変更をそのインスタンスに反映

しかし、デザインシステムには、提供するその柔軟性と同程度の可用性があります。同じ元の要素からスタートできますが、使用されるコンテキストに応じてそれをカスタマイズする必要があります。ここでインスタンスが役立ちます。コンポーネントのインスタンスを編集しても、マスターコンポーネントには影響しません。変更したすべてのプロパティはオーバーライドと見なされます。

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

マスターコンポーネントから同じプロパティを編集した場合でも、オーバーライドされたプロパティが常に保持されます。 

オーバーライドされたプロパティの保持
オーバーライドされたプロパティの保持

これらのボタンの角丸の半径のように、インスタンスでオーバーライドされていないプロパティは、常にマスターから同期しています。 

マスターから角丸の半径ボタンプロパティを同期
マスターから角丸の半径ボタンプロパティを同期

オーバーライドによる結果に満足できない場合は、インスタンスを右クリックしてマスターコンポーネントにリセットを選択することで、いつでも元のマスターコンポーネントに戻すことができます。この操作で、インスタンス上のすべてのオーバーライドがクリアされ、マスターコンポーネントにリセットされます。

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

スタイルと外観のオーバーライド

再利用可能な要素を作成するときは、コンテキストに応じて元の要素を変更することが非常に重要です。その結果として、インスタンスのすべてのスタイルと外観のプロパティをオーバーライドすることができます。オーバーライドは、基本要素とのつながりを維持しながら、様々なバリエーションを可能にします。 

スタイルと外観のオーバーライド
スタイルと外観のオーバーライド

注意:

回転プロパティと不透明度プロパティは現在、マスターコンポーネントからインスタンスに反映されません。

サイズ変更とレイアウトのオーバーライド

XD 12.0 では、レスポンシブサイズ変更と呼ばれる機能がリリースされ、これによってオブジェクトの配置とスケーラビリティを維持しながら、オブジェクトグループのサイズを変更できます。必要なステップは、デザインカンバス上でグループのサイズを変更するだけです。XD では相対的な間隔が所定の位置で保持されます。必然的に、再利用可能な要素は似たようなものになりますが、サイズが異なります。コンポーネントもサイズ変更が可能で、レスポンシブサイズ変更の強力な機能が組み込まれています。

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

マスターコンポーネントのサイズを変更すると、サイズ変更されていないインスタンスも自動的にサイズ変更されます。したがって、既にサイズ変更されているインスタンスでは、サイズ変更された位置がオーバーライドとして保持されます。また、マスターコンポーネントに影響を与えずに、インスタンスを個別にサイズ変更することもできます。 

マスターコンポーネントに影響を与えずに、インスタンスを個別にサイズ変更
マスターコンポーネントに影響を与えずに、インスタンスを個別にサイズ変更

コンポーネント全体のサイズを変更できるだけでなく、その中のアイテムのレイアウトも変更できます。適用したサイズに関係なく、コンポーネントインスタンスに変更を加えることができるようになりました。レスポンシブサイズ変更と同じように、XD では、要素のサイズが変更されると、大きいまたは小さいカンバスで要素の配置を可能な限り再作成します。手動モードに切り替えて、コンストレイントを手動で編集し制御を強化することもできます。

レスポンシブコンストレイントを手動で編集
レスポンシブコンストレイントを手動で編集

インスタンスの変更されたプロパティ(例えば、Joshua Tree のテキストサイズ)では、オーバーライドが保持され、マスターコンポーネントからのそのプロパティの更新は受け取りません。

変更されたプロパティでオーバーライドを保持
変更されたプロパティでオーバーライドを保持

インスタンスのレイアウトを編集すると、マスターコンポーネントからオーバーライドされていないプロパティへの変更がインスタンスに反映されます。

マスターコンポーネントからの変更をインスタンスに反映
マスターコンポーネントからの変更をインスタンスに反映

オーバーライドとして要素を追加および削除する

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

マスターコンポーネントに要素を追加
マスターコンポーネントに要素を追加

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

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

入れ子になったコンポーネントの入れ替え

コンテキストに応じてカスタマイズが必要なモーダルやナビゲーションバーなど、コンポーネントが入れ子になっている大きなコンポーネントをデザインする場合が多数あります。XD でコンポーネントを交換する手順は、アセットパネルからコンポーネントをドラッグして、交換したいカンバス上のコンポーネントの上にドロップするだけです。

マスターコンポーネントをインスタンスと入れ替えると、すべてのインスタンスでマスターが置き換えられます
マスターコンポーネントをインスタンスと入れ替えると、すべてのインスタンスでマスターが置き換えられます
インスタンスの入れ替えは、そのインスタンスのみに対するローカルなオーバーライドです
インスタンスの入れ替えは、そのインスタンスのみに対するローカルなオーバーライドです

マスターコンポーネントをインスタンスと入れ替えると、すべてのインスタンスでマスターが置き換えられます。 

インスタンスの入れ替えは、そのインスタンスのみに対するローカルなオーバーライドとなります。グローバルレベルでコンポーネント全体または入れ子になったコンポーネントを互いに入れ替えることができます。 

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

リンクされたアセットを使用して、XD クラウドドキュメントで使用可能な 1 つ以上のデザインファイルのアセット(コンポーネント、カラーおよび文字スタイル)を使用することができます。リンクされたアセットは、リンクされたコンポーネントのワークフローを補完します。

リンクされたインスタンスがドキュメントで使用されている場合は、オーバーライド(スタイルと外観、サイズ変更とレイアウト、および構造)を使用して、使用されているドキュメントのローカルインスタンスをカスタマイズできます。

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

ソースドキュメントのマスターコンポーネントを変更して保存すると、それが使用されているドキュメントのリンクされた各コンポーネントインスタンスの横に青いバッジ が表示されます。このバッジは、利用可能な更新があることを示しています。青いバッジの上にカーソルを置くと、アセットパネルで更新をプレビューすることができ、表示できる場合はデザインカンバスでもプレビューできます。

青いバッジをクリックして個々のコンポーネントの更新を受け入れ、アセットパネルの下部にある「すべてアップデート」をクリックし、ドキュメント内のすべてのインスタンスを更新します。リンクされたアセットについて詳しくは、リンクされたアセットの操作を参照してください。

機能の制限

コンポーネントを扱う際には、次の機能制限を理解しておいてください。

  • マスターコンポーネントをドキュメント間で移動することはできません。
  • マスターコンポーネントの編集 マスターに戻すオプションでは、コンポーネントの複数選択は使用できません。
  • パスに変換」オプションを選択した場合、オーバーライドは削除されます。編集を続けると、オブジェクトインスタンスでオーバーライドが削除されます。
  • マスターから編集する場合、不透明度と回転は現在マスタープロパティとしてサポートされていません。インスタンスごとに独自の不透明度と回転が設定されます。

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

リーガルノーティス   |   プライバシーポリシー