【2026年最新版】FigmaのAuto Layout活用完全ガイド

Figmaを使い始めて「Auto Layoutって何？通常のフレームと何が違うの？」と疑問に思ったことはありませんか？Auto Layoutは、Figmaの中でも特に強力な機能のひとつであり、デザインの効率化・保守性向上に直結します。

本記事では、Auto Layoutの基本概念から実践的な使い方、よくある問題の解決策まで、初心者でも迷わないよう丁寧に解説します。この記事を読み終えれば、Auto Layoutを使いこなしてレスポンシブなUIを素早く作れるようになります。

この記事でわかること

• Auto Layoutと通常フレームの違い
• Auto Layoutの有効化と基本的な設定方法
• コンポーネントへの適用とバリアントとの組み合わせ
• Hug Contents / Fill Containerを使ったレスポンシブUI設計
• ネストしたAuto Layoutの構造と応用例
• よくある問題・FAQ 7問への回答

1. Auto Layoutとは？通常フレームとの違い

通常フレームの仕組み

Figmaの通常フレーム（Frame）は、要素を自由な位置に配置できるキャンバスのようなコンテナです。要素の位置はピクセル単位で固定されており、要素が増えたり内容が変わったりしても、フレーム自体は自動でリサイズされません。

たとえばボタンのラベルテキストを変更すると、テキストの幅は変わりますが、ボタンの背景やパディングは自動で調整されません。手動でいくつかの要素をそれぞれ修正する必要があり、複数箇所の変更が必要になります。

Auto Layoutが解決する問題

Auto Layout（オートレイアウト）は、コンテナ内の要素を自動で整列・間隔調整するスマートなフレームです。CSSのFlexboxに近い概念です。主な特徴は以下のとおりです。

• 要素の追加・削除時にコンテナが自動でリサイズされる
• 方向（縦/横）に沿って要素が自動で並ぶ
• 間隔・パディングを一括設定できる
• レスポンシブな挙動（伸縮・固定）を設定できる

Auto Layout vs 通常フレーム 比較表

2. Auto Layoutの有効化と基本設定

Auto Layoutを有効にする方法

Auto Layoutは、既存のフレームや複数の要素に対して有効化できます。以下の方法で設定します。

Step 1: Figmaのキャンバス上で、Auto Layoutにしたいフレームまたは複数のオブジェクトを選択します。

Step 2: 右サイドパネルの「Design」タブを確認します。「Auto layout」というセクションがあります。

Step 3: 「＋」ボタンをクリックするか、ショートカット Shift + A を押すとAuto Layoutが有効になります。

Step 4: 複数オブジェクトを選択して Shift + A を押すと、それらがひとつのAuto Layoutフレームにまとめられます。

方向の設定（縦・横）

Auto Layoutには「方向（Direction）」の設定があります。右パネルのアイコンで切り替えます。

• 横方向（Horizontal）: 要素が左から右に並ぶ。ボタンのアイコン＋テキストや、横並びのカードに使用
• 縦方向（Vertical）: 要素が上から下に並ぶ。リスト・フォーム・縦スクロールのカードに使用
• 折り返し（Wrap）: コンテナ幅に合わせて自動折り返し。グリッドやタグ一覧に使用（Figma 2024以降で強化）

間隔（Gap）の設定

要素と要素の間隔を「Gap」で設定します。単位はピクセルです。

• 数値を直接入力（例：8、16、24）
• Auto（Space between）: 要素を両端に配置し、残りのスペースを均等に分配（CSSのspace-betweenに相当）

パディング（Padding）の設定

コンテナと内部要素の間の余白（パディング）を設定できます。

• 均等パディング: 4辺すべてに同じ値を設定
• 上下・左右別設定: 縦横それぞれ異なる値を設定
• 4辺個別設定: 上・右・下・左をそれぞれ独立して設定（パディングフィールドを展開して設定）

パディングの数値フィールドを展開するには、パネルの「詳細設定」アイコン（小さな四角形）をクリックします。

3. コンポーネントへの適用とバリアント活用

なぜコンポーネントにAuto Layoutを使うのか

Figmaのコンポーネント（Component）は、再利用可能なUIパーツです。ボタン・カード・インプット・ナビゲーションバーなど、デザインシステムを構成するすべての要素がコンポーネントです。

コンポーネントにAuto Layoutを適用すると、以下の利点があります。

• コンポーネントのインスタンスがコンテンツに応じて自動リサイズされる
• テキストラベルを変更するだけで、ボタン全体が自動で最適サイズになる
• バリアント（Variant）と組み合わせてサイズや状態を柔軟に切り替えられる

ボタンコンポーネントへの適用例

Step 1: ボタンフレーム（テキスト「クリック」を含む）を選択します。

Step 2: Shift + A でAuto Layoutを有効化します。

Step 3: 方向を「横（Horizontal）」に設定します。

Step 4: パディングを「縦12px・横24px」に設定します。

Step 5: フレームの幅・高さを「Hug Contents」に設定します（後述）。

Step 6: コンポーネント化（Ctrl/Cmd + Alt + K）します。

これで、テキストを変更したインスタンスを置いても、ボタンが自動的に内容に合わせてリサイズされます。

バリアントとAuto Layoutの組み合わせ

バリアントは「同じコンポーネントの複数の状態（バリエーション）」を管理する機能です。例えばボタンなら「Primary / Secondary」「Large / Medium / Small」「Default / Hover / Disabled」などの状態をひとつのコンポーネントセットで管理できます。

Auto Layoutを各バリアントに適用することで、状態が変わってもレイアウトが崩れません。たとえばアイコン付きボタンとテキストのみボタンを切り替えても、コンテナが自動でリサイズされます。

4. レスポンシブUIの作成（Hug Contents / Fill Container）

サイズ設定の3つのモード

Auto Layoutフレーム内の要素には、幅・高さについて3つのサイズモードが設定できます。

Hug Contentsの使い方

「Hug Contents（コンテンツをハグ）」は、内部の要素サイズに合わせてコンテナが自動で最小サイズになる設定です。

ボタンのテキストが「送信」から「送信する」に変わったとき、フレームが自動でテキスト幅＋パディング分に広がります。手動でフレームを調整する必要がなくなります。

設定方法: フレームを選択 → 右パネルのW（幅）横のドロップダウン → 「Hug」を選択（H（高さ）も同様）

Fill Containerの使い方

「Fill Container（コンテナを塗りつぶす）」は、親フレームの利用可能なスペースを埋めるように要素が伸びる設定です。

ナビゲーションバーで「ロゴ（固定幅）」「中央メニュー（Fill）」「ボタン（固定幅）」のように配置すると、画面幅に合わせて中央メニューが自動で伸縮します。

設定方法: 親フレーム内の子要素を選択 → 右パネルのW横のドロップダウン → 「Fill」を選択

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

Step 1: 幅380pxのフレームを作成します。

Step 2: フレームにAuto Layoutを適用（方向：縦、ギャップ：16px、パディング：24px）します。

Step 3: サムネイル画像（固定360×200px）を追加します。

Step 4: タイトルテキストを追加し、幅を「Fill Container」に設定します。

Step 5: 説明テキストを追加し、幅を「Fill Container」に設定します。

Step 6: フレームの幅を変更すると、テキストエリアが自動でリサイズされます。

5. ネストしたAuto Layoutの使い方

ネストとは

Auto Layoutはネスト（入れ子）構造を持てます。Auto Layoutフレームの中に別のAuto Layoutフレームを配置する構造です。複雑なUIも整然と管理できます。

ナビゲーションバーの例

以下のような構造をネストで実現できます。

NavBar（Auto Layout: 横方向、Space between）
  ├── Logo（固定幅: 120px）
  ├── Menu（Auto Layout: 横方向、Gap: 32px）
  │     ├── ホーム（テキスト）
  │     ├── 機能（テキスト）
  │     └── 料金（テキスト）
  └── CTAButton（Auto Layout: 横方向、Hug）
        ├── アイコン（固定: 20px）
        └── テキスト「無料で始める」

この構造を作る手順は以下のとおりです。

Step 1: NavBar全体のフレームを作成し、Auto Layout（横方向、Space between）を適用します。

Step 2: Logoテキストを追加し、幅を「固定120px」に設定します。

Step 3: メニュー3項目を選択し、Shift + A でAuto Layout（横方向、Gap: 32px）にまとめます。

Step 4: CTAボタン（アイコン＋テキスト）を選択し、Shift + A でAuto Layout（横方向、Hug）にまとめます。

Step 5: NavBar全体のフレームに3つの要素（Logo・Menu・CTA）を配置します。

フォームUIのネスト例

Form（Auto Layout: 縦方向、Gap: 24px）
  ├── FormField（Auto Layout: 縦方向、Gap: 8px）
  │     ├── Label「メールアドレス」
  │     └── Input（Fill Container）
  ├── FormField（Auto Layout: 縦方向、Gap: 8px）
  │     ├── Label「パスワード」
  │     └── Input（Fill Container）
  └── SubmitButton（Hug、Fill Container）

フォームフィールドを縦方向Auto Layoutにネストすることで、ラベルとインプットのセットを簡単に複製・管理できます。フォームに新しいフィールドを追加しても、全体が自動でリサイズされます。

ネスト時の注意点

• 深すぎるネストは避ける: 3〜4階層以上になるとパネルが複雑になります。必要に応じてコンポーネント化してネスト深度を浅くしましょう
• Fill Container は親がAuto Layoutのときのみ機能する: 通常フレームの子要素には「Fill Container」が設定できません
• 最小・最大幅の設定: 「Min W / Max W」を設定することで、フレームの伸縮範囲を制限できます（例：ボタンが縮みすぎないよう最小幅を設定）

6. Auto Layoutのよくある問題・FAQ

Q1. Auto Layoutを有効化すると要素の位置がずれる

A. Auto Layoutを有効化すると、既存の絶対座標配置から自動整列に変わるため、要素の位置が変化することがあります。有効化前にバックアップ（複製）を作成しておくと安心です。また、方向（縦・横）とギャップの設定を最初に確認しましょう。

Q2. Fill Containerが選択できない

A. Fill Containerは、Auto Layoutフレームの直接の子要素にのみ設定できます。親フレームがAuto Layoutになっていない場合、または対象要素が子要素でない場合は選択できません。親フレームにAuto Layoutが適用されているか確認してください。

Q3. ネストしたAuto Layoutでサイズが意図通りに変わらない

A. 内側のフレームに「Fixed」サイズが設定されていると、外側のHug Contentsが正しく動作しないことがあります。内側のフレームのサイズ設定（Fixed / Hug / Fill）を確認してください。

Q4. コンポーネントのインスタンスでAuto Layoutの設定が変えられない

A. インスタンスでは一部のAuto Layout設定（方向・ギャップ・パディング）はマスターコンポーネントから継承されます。インスタンスごとに変えたい場合は、コンポーネントプロパティ（Component Properties）を使うか、デタッチ（Detach）して独立したフレームにする必要があります。

Q5. Auto Layoutのギャップを要素ごとに変えたい

A. Auto Layoutのギャップは全要素に均等に適用されます。要素ごとに異なる間隔を設定したい場合は、特定の要素を選択して「Before/After」の個別マージン設定（Figma 2024以降）を使用してください。または、要素間にスペーサー（透明なフレーム）を挿入する方法も有効です。

Q6. Auto Layoutフレームに絶対配置（Absolute Position）の要素を置きたい

A. できます。Auto Layoutフレーム内の特定の要素を右クリック→「Edit → Absolute position（絶対位置）」に設定すると、その要素はAuto Layoutの流れから除外され、自由な位置に配置できます。ツールチップや通知バッジなど、オーバーレイ要素に便利です。

Q7. Figmaのバージョンによって操作が異なる

A. FigmaはWebベースのツールで頻繁にアップデートされます。2025〜2026年のアップデートでAuto Layoutの「Wrap（折り返し）」機能や最小/最大幅設定が強化されました。UIの場所がわからなくなったときは、公式ドキュメント（help.figma.com）を参照してください。

まとめ

Auto Layoutは、Figmaでデザインを効率化するための核心的な機能です。

最初は少し戸惑うかもしれませんが、Auto Layoutを覚えると手戻りが大幅に減り、デザインの品質と速度が格段に上がります。ぜひ今日から積極的に活用してみてください。