Figmaでは、親、子、兄弟という用語を使って、オブジェクト間の関係を表します。

これらの用語は、Web開発やプログラミングにおける同様の関係を説明するためによく使用されています。

この記事では、Figmaでこれらの用語を使用する際の意味を明確にします。

親子と兄弟

これらの用語を使用して、オブジェクトがキャンバス上で別のオブジェクトとどのように関連しているかを説明します。

親は、フレーム、コンポーネント、グループのオブジェクトであり、別のオブジェクトを含んでいます。

子は親に内包されているオブジェクトです。

兄弟は同じ親に内包されているオブジェクトです。

• フレーム内にオブジェクトがある場合、フレームは親であり、その中にあるすべてのオブジェクトが子になります。
• フレーム自体が自動的に親になるわけではありません。親になるのは、その中にオブジェクトが存在する場合のみです。
• 親が複数のオブジェクトを含む場合、それらの子オブジェクトは兄弟となります。
• フレーム、グループ、コンポーネントなどのオブジェクトは、親にも子にもなります。

親と子のインタラクション

これらの用語は製品では明示的に使用されていませんが、Figmaでオブジェクトがどのように動作し、相互に関連しているかを理解する上で重要です。

生物学的なものとは異なり、互いに影響を与え合うコンテナ(親)とコンテンツ(子)として機能します。明示的な継承を伴う定義された系統とは異なるものです。

プロパティ

影響を伴う親/子関係があります。多くの場合、親はフレームになります。

以下のプロパティをフレームに追加して、そのすべての子オブジェクトに影響を与えることができます。

• レイアウトグリッド: デザインに視覚的な構造を作成します
• オートレイアウト: コンテンツに対応する動的なフレームを作成します
• コンテンツを隠す: フレームの境界を超えているオブジェクトをフレーム内で非表示にします。

子オブジェクトにもプロパティを追加できます。

• 制約: 親フレームのサイズを変更したときに、子オブジェクトがどのように対応するかを定義します。

親子関係の設定動作

キャンバスでオブジェクトを新しい場所に移動すると、オブジェクトの親子関係を再設定するかどうかがFigmaによって決定されます。

親子関係の再設定とは、オブジェクトが現在の親から取り出され、別の親オブジェクト内にネストされることを意味します。たとえば、ある親フレームから別のフレームにオブジェクトを移動できます。

新しいオブジェクトをフレームに追加する際、同じロジックで親子関係が設定されます。

デフォルトの動作は以下のとおりです。

• フレームよりも小さいオブジェクトは、フレームの子になります
• フレームよりも大きいオブジェクトは、子要素になりません

デフォルト動作のバイパス

以下の方法で、デフォルト動作をバイパスできます。

• オブジェクトを追加する際に、Spaceバーを押したままにすると、オブジェクトの親子関係が再設定されません
• オブジェクトをフレームの境界の外に移動する際に、Spaceバーを押したままにすると、オブジェクトを現在の親の中に維持できます。