Figma：オートレイアウト

Figmaのオートレイアウトでは、幅や高さを「何に合わせて決めるか」を設定できます。

判断のしかた

• 中身（子）や親が変わっても同じ幅にしたい
  → 幅を固定
• 中身（子）が増えたら親も広げたい
  → コンテンツ（子）を内包
• 親が広がったら中身（子）も広げたい
  → コンテナ（親）にあわせて拡大

幅を固定（可変しないパーツ）

指定した幅をそのまま維持します。フレーム内（子）の文字が増えたり、親フレームが広がったりしても、基本的に幅は変わりません。

例えば、幅を200pxに固定した場合、親フレームを広げても子要素は200pxのままです。

幅を固定したまま文字が増えると、テキストの設定によっては折り返したり、フレームからはみ出したりします。

適しているもの

• 幅を揃えたいカード
• サイドバー
• 固定幅のボタン
• サイズを変えたくない画像やバナー

コンテンツを内包（可変するパーツ）

中に入っている文字や図形の大きさに合わせて、親フレームのサイズが自動的に変わります。

例えば、ボタンの文字を「送信」から「お問い合わせを送信」に変更すると、文字が収まるようにボタンの幅も自動的に広がります。

余白として設定したパディングは維持されます。Figmaでは、子要素と余白を包み込む最小限のサイズになる設定です。

適しているもの

• ボタン
• タグやラベル
• 文字数が変わるメニュー
• 内容に応じて高さが変わるカード

コンテナにあわせて拡大（可変するパーツ）

親フレームの空いている範囲まで、子の幅や高さを広げます。

適しているもの

• カードの中身
• 横幅いっぱいの入力欄
• ページ幅に合わせるセクション