オートレイアウトはまず最初に覚えることをおすすめします！
Figmaの真価が発揮されます！
オートレイアウトが使えるようになるとレイアウトを感覚ではなくコーディングレベルに近いレイアウトを素早く組めることができ、デザイン後の作業に大きく影響します。
また、要素を揃える、余白を整える、サイズを調整する。
こういった再修正作業のストレスが一気に減ります。
この記事では、オートレイアウトの目的と特徴を整理しつつ、
プロフィールセクションを例に基本操作をまとめました。
Web制作（特に開発連携）に携わっている方ほどオートレイアウトを使うメリットを感じやすいはずです！
オートレイアウトとは？使う目的は？
オートレイアウトは、ざっくり言うと要素のレイアウトを自動で定義する機能です。
「あとでテキスト量が増えた」
「画像の比率が変わった」
「ボタンが増えた」
ような変更が入っても、レイアウトが崩れにくくなります。
ルールをもってレイアウトを組める
オートレイアウトがないと、
要素の位置調整は「揃える → ずれる → また揃える」の繰り返しになりがちです。
しかも、従来のドラッグ操作だとどうしても数値がまばらになります。
一方でオートレイアウトは、
- レイアウトの向き（Freeform / Vertical / Horizontal / Grid）
- 要素の配置（Alignment）
- 要素間の余白（Gap）
- 内側の余白（Padding 上下左右）
- リサイズ設定（Fixed / Hug / Fill / Max / Min）
これらをルールとして持てるので、調整がかなり楽になります。
デザインから開発への再現の精度が上がる
オートレイアウトはCSSのFlexboxの概念にかなり近いので、
「この要素は横並び」「間隔は16px」「親は中身に合わせて伸びる」といった情報が、デザインの段階で整理されます。
コーディングしている身からするとめちゃくちゃいいです。
コーディングの再現性が上がるので、デザインと実装のズレが減り、結果作業とチェック工数が下がります。
またFigmaからノーコードビルダーへのインポートも、オートレイアウトありなしで再現の質が全然違います。
Figma全体の機能でも活用できる
オートレイアウトができていると、Figmaデザイン以外の以下の機能とも連携しやすくなります。
- Figma Slides
- Figma Make
- Figma Sites
- Figma Buzz
オートレイアウトの特徴、使える条件
大半の要素はFrameで囲む
オートレイアウトは、Frameにて適用します。
一方でグループはオートレイアウトは適用されません。
Web制作を前提にするなら、基本的には以下のようにすべてFrameで作ることをお勧めします。
とりあえずFrameをつかっていれば不自由はないです。
- レイアウトを作る要素はFrame（全体要素の9割程度）
- ただまとめるだけの要素はGroup（必要最低限）
オートレイアウト後、要素の配置・余白を設定
オートレイアウトを付けると、横方向（Horizontal）・縦並び（Vertical）・グリッドなどに切り替えが可能です。
要素間余白はgap（Spacing between items）で管理できるので、「手作業で等間隔に揃える」がほぼ不要になります。
また要素の外周はpaddingで管理が可能です。
まずはここまで理解できているとデザイン資料は作成できると思います。
使用例：プロフィールセクション
試しに「プロフィールセクション」を作ってみましょう！
セクションに含まれている要素
- サムネイル
- 名前
- 見出し
- 説明文
- CTAボタン
ポイントはどこでオートレイアウトを適用させるか（Frameで囲むか）です。
レイヤーに落とし込むと例えば、以下のように、Frame（基本情報・概要・CTAボタン）を入れ子にして組むのが基本です。
オートレイアウト基本を押さえたら次にやること
基本を押さえたら、次は「実務で触る頻度が高い機能」を順番に覚えるのがおすすめです。
特定要素の解除：Ignore auto layout
オートレイアウトは便利ですが、子要素を自由に動かしたいときがあります。
例えば、モーダルウィンドウの閉じるアイコンを追加する等
そんな時に使うのが「Ignore auto layout」す。
オートレイアウト自体は有効のまま、指定した要素だけ除外できます。
ショートカットを覚える
- 子要素のダイレクト選択
⌘ + クリック - オートレイアウト化（Frame追加込み）
Shift + A - サジェストオートレイアウト
Control + Shift + A - 並び替え
↑もしくは↓ - パディング修正
修正したい余白をクリック - 複製
⌘ + D
リサイジング（レスポンシブ）
リサイジングはオートレイアウトの中で一番とっつきにくいですが、
Hug / Fixed / Fill の考え方が分かると、レスポンシブの再現が一気に楽になります。
- Fixed：固定幅
- Hug：子のコンテンツ幅に応じて変動する可変幅（親）
- Fill：親の幅にいっぱいに伸ばす（子）（オートレイアウトを適用すると選択できるようになります。）
- Max：幅の最大値を決める（要素のコンテナサイズを定義するときに使います）
- Min：幅の最小値を決める（テキスト量が要素ごとに異なるとき、高さを均一にするために使うことが多いです。）
制約（Constraints）を理解する
オートレイアウトは「並びと余白」を管理します。
一方でConstraintsは「親が変わった時に、子がどう追従するか」を決めます。
フローティングバナーなど画面に固定したい要素がある場合は、Constraintsを調整します。
まとめ
オートレイアウトは、Figmaでの作業効率を上げるだけでなく、
開発連携の精度を上げるための基礎でもあります。
最初は設定項目が多くて混乱しますが、
- Frameで作る
- レイアウトの向きを決める
- gapとpaddingで余白を指定する
この3点を押さえるだけでも、デザインの組み方がかなり変わります。
まずはプロフィールセクションやボタンなど、小さめのUIから試してみてください。
慣れてきたら、ページ全体にもオートレイアウトを取り入れてみましょう！