一致するオブジェクトの特定
一致するオブジェクトとは、複数のフレームに存在する同一のオブジェクトのことです。たとえば、アプリのデザインの多くで、各フレームの上部で同じヘッダーを使用します。
一致するオブジェクトを使用することで、選択、編集、プロトタイピングの作業時間を短縮できます。
一致するオブジェクトは以下の機能で使用されます。
- スマートアニメート: プロトタイピング時、一致するオブジェクト間で高度なアニメーションを作成します
- マルチ編集: オブジェクトの一括編集
- 状態管理: プロトタイピング時、一致するオブジェクトが使用されているフレーム間を移動する際に、インタラクティブコンポーネント、スクロール付きフレーム、動画の状態を共有します
- 一致するインタラクション: 一致するオブジェクト上のプロトタイプインストラクションの選択と編集を一括して行います
2つのオブジェクトが次の条件を満たしている場合、それらは一致するオブジェクトとみなします。
一致するオブジェクトの要件
Figmaでは、一致するオブジェクトの要件の定義に役立てるために、以下の用語を使用しています。
-
親オブジェクト: 他のオブジェクトを含んだフレーム、コンポーネント、グループなどのオブジェクト。
- 祖父母オブジェクトは、親オブジェクトを含むオブジェクトのことを言います。子オブジェクト、親オブジェクト、または祖父母オブジェクトを含む階層内の他のすべてのオブジェクトを祖先と言います。
- 子、または子オブジェクト: 親の中に含まれているオブジェクト。
- 最上位フレーム: キャンパス上に直接置かれているフレーム。親オブジェクトはありません。
注: 最上位フレームも一致オブジェクトになることができますが、スマートアニメートまたは状態管理の場合に限られます。最上位フレームでは、マルチ編集を使用することや、一致するインタラクションを選択することはできません。
セクションのオブジェクトは、そのセクション内のオブジェクトとしか一致しません。
レイヤー名
オブジェクトはレイヤー名が同じでなければなりません。
このルールには、次の2つの例外があります。
テキストレイヤー
テキストレイヤーの場合は、レイヤー名が同じである必要はありません。テキストレイヤーを作成する場合、レイヤーにはテキストそのもの内容から名前が付けられます。そのようにして付けられたテキストレイヤーの名前は変更することができます。
- テキストレイヤーに明示的に名前を付けるか、レイヤーパネルから付けられた名前を変更した場合は、名前が一致している必要があります。
- テキストレイヤーの名前がテキストの内容から暗黙的に付けられた場合は、そのテキストスタイルが一致する必要があります。一致するテキストオブジェクトが複数存在する場合は、フレーム内におけるテキストレイヤーのx座標とy座標に基づき、最も一致するものが選択されます。
最上位フレーム
最上位フレームが一致するとみなされるには、次のいずれかを満たしている必要があります。
- フレーム名が一致している。
- フレーム名のプレフィックスが共通で、そのあとにスラッシュがある。たとえば、
Checkout / EmptyとCheckout / Completeは一致します。
親フレーム
オブジェクトの親フレームと祖先のフレームの名前がすべて一致していなけれなりません。
注: コンポーネントセット内の最上位フレームとバリアント名は一致している必要はありません。
レイヤー階層
オブジェクトが一致しているとみなされるためには、そのレイヤー階層における位置が最上位フレーム間で同じでなければなりません。たとえば、同じフレーム内に親と祖父母のレイヤーがあるオブジェクトは、2番目のフレーム内にも親と祖父母のレイヤーが必要です。
ヒント: すべての要件が一致し、フレーム内に同じ名前のオブジェクトが2つ以上ある場合、親フレーム内のオブジェクトのインデックスによって、どのオブジェクトが一致するかが決定します。
一致するオブジェクトの特定
同じページ上の一致するオブジェクトをハイライトするには、次の操作を行います。
- オブジェクトをクリックして選択します。
- Shiftを押したままにすると、すべての一致オブジェクトがライトブルーでハイライトされます。
あるいは、プロトタイプタブから一致するオブジェクトを特定することもできます。
- 右サイドバーの[プロトタイプ]タブを開きます。
- キャンバス内のオブジェクトまたはレイヤーをポイントします。
他のフレームにある一致するオブジェクトがすべてハイライトされます。