グループ・フレーム・オートレイアウトの違い

Figmaでは、複数の要素をまとめる方法として「グループ」「フレーム」「オートレイアウト」があります。それぞれ役割が異なるため、目的に応じて使い分けることが大切です。

グループ

グループは、複数の要素をひとまとめにして扱う機能です。

複数の要素を一緒に移動したり、まとめて選択したりしたい場合に使用します。要素を簡単にまとめることができますが、フレームのように子要素の配置やサイズを細かく管理する機能はありません。

フレーム

フレームは、複数の要素を入れる「入れ物」として使用します。

フレームには、背景色やサイズ、角丸などを設定できます。また、フレームの中にさらにフレームを配置し、要素をまとまりごとに整理することもできます。

たとえば、カードの中に「画像」「テキストエリア」「ボタン」がある場合、タイトルと説明文を1つのフレームにまとめることで、テキスト部分だけを管理しやすくなります。

カード
├─ 画像
├─ テキストエリア
│  ├─ タイトル
│  └─ 説明文
└─ ボタン

カード
├─ 画像
├─ テキストエリア
│  ├─ タイトル
│  └─ 説明文
└─ ボタン

このようにフレームを入れ子にすると、デザインの構造を整理しやすくなります。

オートレイアウト

オートレイアウトは、フレーム内の要素を自動的に並べる機能です。

縦方向や横方向の並び方、要素同士の間隔、内側の余白などを設定できます。文字量が変わった場合や要素を追加した場合でも、自動的に位置が調整されるため、レイアウトが崩れにくくなります。

たとえば、タイトルと説明文を縦方向のオートレイアウトにすると、タイトルの文章量が増えても、その下の説明文が自動的に移動します。

3つの違い

基本的には、単純に要素をまとめたい場合はグループ、パーツとして構造を作りたい場合はフレームを使用します。

さらに、要素の間隔や余白を自動的に調整したい場合は、フレームにオートレイアウトを設定します。