Auto Layoutで効率的なレイアウト

Auto Layout — Figmaのレイアウトエンジンを完全制覇

Auto LayoutはFigmaが他のデザインツールと一線を画す最大の機能です。CSSのFlexboxをデザインツール上で完全に再現し、「テキストが増えたら自動でボタンが広がる」「要素を追加したらナビゲーションが自動で整列する」といった動的レイアウトをデザイン段階から実現します。

Auto Layoutを理解することで、デザインとコードの乖離がほぼなくなり、エンジニアへのハンドオフ品質が劇的に向上します。このレッスンでは基本から応用まで、実際のコンポーネント作成を通じて習得します。

Auto Layout — Hug / Fill / Fixed サイジングモデル

---

Auto Layoutの基本概念

Auto Layoutとは何か

Auto Layoutは、フレーム内の子要素を「行（水平）」または「列（垂直）」方向に自動配置するレイアウト機能です。要素を追加・削除・サイズ変更したとき、コンテナが自動的に調整されます。

CSSとの対応関係を理解すると習得が早くなります。

💡 エンジニアにデザインを渡すとき、Auto Layoutで作られたフレームはFigmaが自動でCSS値を表示してくれます。Dev Modeで確認すると、paddingやgapの数値がそのままコードに使えます。

---

Auto Layoutの適用方法

基本操作

方法1: ショートカット（最速）

• ◆対象の要素またはフレームを選択
• ◆Shift + A を押すだけでAuto Layoutが適用される

方法2: 右パネルから追加

• ◆要素を選択して右パネルにスクロール
• ◆「Add auto layout」ボタン（＋アイコン）をクリック

方法3: 複数要素から作成

• ◆並べたい複数の要素をShift+クリックで選択
• ◆Shift + A を押すとAuto Layoutフレームが自動生成される

⚠️ Auto Layoutを適用すると、選択した要素がフレーム内に包まれます。既にフレームがある場合はそのフレームにAuto Layoutが追加されます。操作を間違えた場合は Ctrl/Cmd + Z で元に戻せます。

---

パディングとギャップの設定

Padding（内側余白）

Auto Layoutパネルの「Padding」セクションで設定します。4つの値を個別に設定できます。

• ◆上下左右を同一値に設定: Paddingフィールドに単一の数値を入力
• ◆上下・左右を別々に設定: 縦（TB）と横（LR）に分けて入力
• ◆4辺を個別設定: 展開アイコンをクリックしてTop / Right / Bottom / Leftを個別入力

UIコンポーネントの推奨Padding値:

Gap（要素間の間隔）

Gap（Spacing between items）は子要素同士の間隔を設定します。

• ◆固定Gap: 数値を入力（例: 8px）
• ◆Auto Gap（Space between）: 子要素を等間隔に広げる（CSSの justify-content: space-between と同等）

💡 「Auto（Space between）」は、ナビゲーションのロゴ + メニューリスト + CTAボタンを左端・中央・右端に配置したいときに便利です。一切手動で位置を調整せずに均等配置が完成します。

---

3つのサイジングモード

Hug Contents（コンテンツに合わせて縮小）

子要素のサイズ合計に合わせてコンテナが自動サイズになります。

特徴:

• ◆テキストを変更するとフレームが自動伸縮する
• ◆常に必要最小限のサイズになる
• ◆コンテンツ量が不定なUIパーツに最適

最適な用途:

• ◆ボタン（ラベルに合わせてサイズ変化）
• ◆タグ・バッジ・チップ
• ◆ツールチップ
• ◆ナビゲーションの各メニュー項目

Fill Container（親に合わせて拡大）

親フレームの残りスペースを埋めるように伸びます。CSSの flex: 1 または width: 100% に相当します。

特徴:

• ◆親のサイズが変わると追従する
• ◆兄弟要素が複数ある場合は均等に分配される
• ◆レスポンシブデザインの基本設定

最適な用途:

• ◆テキスト入力フィールド
• ◆グリッドの各カラム
• ◆カードコンテンツエリア
• ◆フレックスレイアウトの伸縮要素

Fixed（固定サイズ）

幅・高さを固定値で指定します。コンテンツが溢れると見えなくなります（overflow: hidden相当）。

最適な用途:

• ◆アイコン（16px / 24px / 32px）
• ◆サムネイル画像（比率を維持したい場合）
• ◆バッジ・通知カウンター
• ◆サイドバー（固定幅240px等）

⚠️ Fixedサイズ設定時、コンテンツが溢れてクリッピングされることがあります。特にテキストを含む要素で注意してください。Clip contentオプションでコンテンツのはみ出しを制御できます。

---

ネストされたAuto Layout

ネストの概念

Auto Layoutのフレームを入れ子にすることで、複雑なレイアウトが実現できます。外側フレームが全体の方向を決め、内側フレームがセクションの方向を決めます。

典型的なネスト構造:

Card（垂直 Auto Layout）
  └ CardImage（Fixed: 幅Fill × 高さ200px）
  └ CardBody（垂直 Auto Layout、Padding 16px）
      └ CardTitle（Hug）
      └ CardDescription（Fill × Hug）
      └ CardFooter（水平 Auto Layout）
          └ Price（Hug）
          └ Button（Hug）

レスポンシブカードの作成実践

ステップ1: カードフレームを作成

1. ◆F を押してフレームを作成（幅320px × 高さ自動）
2. ◆Shift + A でAuto Layoutを垂直方向に適用
3. ◆幅を「Fill」、高さを「Hug」に設定

ステップ2: 画像エリアを追加

1. ◆カードフレーム内に長方形を作成
2. ◆幅「Fill」、高さ「Fixed 200px」に設定
3. ◆塗りを画像（Image fill）に変更

ステップ3: コンテンツエリアを追加

1. ◆カードフレーム内に新しいフレームを作成
2. ◆Shift + A で垂直Auto Layout適用
3. ◆Padding: 上下16px / 左右20px、Gap: 8px
4. ◆幅「Fill」、高さ「Hug」に設定

ステップ4: タイトル・本文・ボタンを追加

1. ◆テキスト（タイトル）: 幅「Fill」
2. ◆テキスト（本文）: 幅「Fill」、行間1.7
3. ◆ボタンフレーム: Hug × Hug、Padding 12px 24px

---

ナビバーの実践作成

ナビバー設計の考え方

ナビゲーションバーは「ロゴ（左）」「メニュー（中）」「CTA（右）」の3グループが基本構成です。Auto Layoutの「Space between」を活用すると、手動で位置調整せず完成します。

作成手順:

1. ◆横幅1440px、高さ自動のフレームを作成
2. ◆Shift + A で水平Auto Layoutを適用
3. ◆Padding: 上下16px / 左右40px
4. ◆Gapを「Auto（Space between）」に設定
5. ◆Align（縦方向）: Center（垂直中央揃え）
6. ◆幅を「Fill」、高さを「Hug」に設定

各要素の設定:

• ◆ロゴグループ: 幅「Hug」
• ◆メニューリスト（水平Auto Layout、Gap 32px）: 幅「Hug」
• ◆CTAボタン: 幅「Hug」

💡 「Space between」を設定した時点で、ロゴは左端・CTAは右端・メニューは中央付近に自動配置されます。ブレイクポイントごとにフレーム幅を変えるだけで、ナビバーが自動でリフロー（再配置）します。

---

絶対位置（Absolute Position）

Auto Layoutフレーム内の特定の子要素だけをフローから除外して、絶対位置で配置できます。

設定方法:

1. ◆Auto Layoutフレーム内の要素を選択
2. ◆右パネルの「Absolute position」アイコンをクリック
3. ◆X・Y座標で位置を指定

主な用途:

• ◆カード上のバッジ（「NEW」「SALE」など）
• ◆アバター画像上のオンラインステータス表示
• ◆モーダルの閉じるボタン（右上固定）
• ◆フローティングアクションボタン

---

🏋️実践ワーク

1. ◆以下の仕様でボタンコンポーネントを作成してください。
   • ◆テキスト: 「カートに追加」、フォント14px Medium、色: 白
   • ◆背景: #6366f1、角丸: 8px
   • ◆Padding: 上下12px / 左右24px、Auto Layout: 水平
   • ◆サイジング: 幅「Hug」高さ「Hug」
   • ◆テキストを「カートに追加（10アイテム）」に変えてボタンが自動拡張されることを確認する
2. ◆以下の仕様でカードコンポーネントを作成してください。
   • ◆カード外枠: 幅320px、Auto Layout垂直、Gap 0、角丸12px、Shadow
   • ◆画像エリア: 幅Fill × 高さ180px Fixed
   • ◆コンテンツエリア: Auto Layout垂直、Padding 16px、Gap 8px、幅Fill
   • ◆タイトル: 16px Bold、幅Fill
   • ◆本文: 14px Regular、幅Fill、行間1.7、3行
   • ◆フッター: Auto Layout水平、Space between、幅Fill
3. ◆作成したカードを3列グリッドに並べるフレームを作成してください。
   • ◆外枠: 1440px、Auto Layout水平、Padding 40px、Gap 24px
   • ◆各カード: 幅「Fill」に変更

📝まとめ

Auto LayoutはFigmaの心臓部です。Hug・Fill・Fixedの3つのサイジングモードとPadding・Gapの設定を組み合わせることで、CSS Flexboxと同等のレイアウトをデザイン段階から表現できます。ネスト構造を理解してカードとナビバーを自在に作れるようになれば、実務レベルのUIコンポーネント設計が可能になります。次のレッスンではAuto Layoutをベースにしたレスポンシブデザインを学びます。