Figma で UI デザインを行ううえで、最も重要な機能のひとつが オートレイアウト（Auto Layout） です。
要素同士の余白(padding)・間隔・配置を自動で管理してくれるため、ボタン・リスト・カードUI・フォームなど、あらゆる場所で使っていきますので、基本を理解しておきましょう。
テキストからオートレイアウトを使ってボタンを作る
1.テキストを入力する
例：お問い合わせ
2. 右クリック「オートレイアウトを追加」
テキストの周りに 自動的に余白がついた枠 ができます。
背景色をつけてボタンにしてみよう
- ボタンに塗りを追加し、文字の色も合わせて変更します。
- 角の半径を丸めます。動画のように数字のところをクリックし、キーボードの ↑矢印キーを使っても変更可能です
- オートレイアウトのパティングも調整してみましょう。
ボタンの余白は「自動」で調整されるしくみ
オートレイアウトを使ったボタンは、テキストの長さに合わせて自動でサイズが変わるようになっています。
右パネルの Padding（上下左右の余白） が設定されているため、テキストが短くても長くても、ボタンの外側との距離が一定に保たれるからです。
- 「お問い合わせ」→「お問合せ」
のように文字数が違っても、余白は変わらず“きれいなボタン”が維持されます。
サイズを固定すると「自動調整」は止まる
右パネルのサイズに数値を入力した場合、オートレイアウトの自動伸縮よりも「入力した数値」が優先されます。
- Width を「250」に固定すると → 文字が増えても幅は250のまま
こうしてボタンを“固定サイズ”にもできます。
オートレイアウトの活用
フレームを作成し、下記の設定を行なってみましょう。
複数のレイアウトをオートレイアウトし、一括で間隔を整える
