Figma：オートレイアウト

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

判断のしかた

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

幅を固定

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

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

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

適しているもの

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

コンテンツを内包

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

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

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

適しているもの

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

コンテナにあわせて拡大

親となるオートレイアウトフレームの空いている範囲まで、子の幅や高さを広げます。

例えば、親フレームの横幅を広げると、子要素も一緒に広がります。

適しているもの

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