▶ 3日で初案件PR
この記事でわかること
Figmaのオートレイアウトが動かない5つの原因と、それぞれの設定手順がわかります。Hug・Fill・Fixedの使い分けを理解でき、カードUIの崩れを4ステップで解決できます。ショートカット一覧で作業時間を短縮できます。
Figmaのオートレイアウトがうまくいかない原因は、フレーム未適用・サイズ設定のミス・絶対位置の干渉など5つのパターンに絞られます。この記事ではパターンごとに設定手順を解説し、カードUIの崩れや高さが揃わない問題も解決します。
今の仕事について、一番近いものは？
この記事の結論
Figmaのオートレイアウトが動かないとき、原因の多くはフレームへの未適用・幅と高さの設定ミス・絶対位置の干渉の3つに集中しています。まず対象レイヤーがフレームかどうかを確認し、次にHug・Fill・Fixedの設定を見直すだけで、多くのケースは5分以内に解決できます。フリーランスとしてクライアント案件でレスポンシブなコンポーネントを安定して作るには、この3点を反射的に確認できるかどうかが実務の分岐点です。
最初に確認すること
対象レイヤーが「グループ」ではなく「フレーム」になっているかを確認してください。レイヤーパネルでフレームは四角のアイコン、グループはフォルダ状のアイコンで区別できます。グループにはオートレイアウトを適用できないため、まずここを確認すると無駄な手探りがなくなります（30秒）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| ツールバーに表示されない | Figmaオートレイアウトが表示されない3つの確認手順 | 2分 |
| 付けたのに崩れる | オートレイアウトがうまくいかない5つの原因と対処 | 5分 |
| 高さが揃わない・余白が変 | Hug・Fill・Fixedは3つの役割で使い分ける | 3分 |
| カードが途中で切れる | カードUI崩れを直す4ステップ手順 | 4分 |
| 解除・再設定したい | オートレイアウトの追加と解除のショートカット一覧 | 1分 |
Figmaオートレイアウトできない原因は5パターン
オートレイアウトの「できない」には、複数の異なる意味が混在しています。「付けられない」「付けたのに崩れる」「ツールバーに出ない」は、それぞれ原因が違います。フリーランスとして毎回手探りになるのは、この区別が曖昧なまま試行錯誤しているためです。
パターン1：フレームではないオブジェクトに適用しようとしている
オートレイアウトはフレームに対して機能する設定です（Figmaヘルプ「デザインへのオートレイアウトの追加」）。グループや直接配置したシェイプを選んでShift+Aを押すと、ショートカット自体はグループをフレームに変換して適用しますが、階層構造が意図と違う状態になることがあります。「なんとなく動いているが崩れる」という場合は、意図していない変換が起きているサインです。最初からフレームを作ってから要素を配置する手順に切り替えると、この問題を防げます。
パターン2：幅や高さが固定サイズのままになっている
オートレイアウトを付けても中身が連動しないときの多くは、子要素の幅か高さがFixed（固定）になっています。たとえば横並びのカードで、テキストを追加しても高さが変わらない場合、その要素の高さ設定を確認するとFixedのまま放置されているケースがほとんどです。Figmaの右パネルでHug（コンテンツに合わせる）かFill（コンテナに合わせて拡大）に変更すると、意図通りに連動するようになります。
パターン3：絶対位置の設定が干渉している
オートレイアウトのフレーム内で子要素を選択したとき、右パネルに「絶対位置」の表記が出ていると、その要素はオートレイアウトのフローから外れています（Figmaヘルプ「オートレイアウトのガイド」）。アイコンやバッジなど、意図的に浮かせたい要素には使えますが、意図せず絶対位置になっていると余白が崩れる原因になります。レイヤーパネルで対象を選択し、右パネルの上部に「絶対位置」の表記があるかを見るだけで5秒でわかります。
パターン4：カードUI内の要素が固定サイズで切れている
カードの中のテキストが途中で切れる、画像が固定のサイズで見切れるという問題は、カード自体にオートレイアウトが付いていないか、内側の要素のサイズがFixedのままになっているケースです。親フレームにオートレイアウトを付けるだけでなく、カード内の個々の要素にも同じ考え方を適用する必要があります。「カードを直した」つもりが画像だけFixedのままで崩れ続ける、という経験をしやすいパターンです。
パターン5：ツールバーにオートレイアウトが表示されない
ツールバーにオートレイアウトの項目が見当たらない場合、まずFigmaがデザインモードになっているかを確認します。プロトタイプモードや開発者向けモードになっていると、デザイン系の操作パネルが表示されません。切り替えは画面右上のパネル選択から行います。それでも表示されない場合はブラウザのキャッシュをクリアするか、デスクトップアプリを再起動すると解消します。
CHECK
▶ 今すぐやること: レイヤーパネルで問題のある要素を選択し、上記5パターンのどれに該当するかを確認する（2分）
Q: グループとフレームはどうやって見分けますか？
A： レイヤーパネルで確認できます。フレームは四角のアイコン、グループはフォルダ状のアイコンで表示されます。Figmaのメニューから「フレームに変換」でグループをフレームに変えることも可能です。
Q： オートレイアウトを付けると要素の位置が勝手にずれます。
A: オートレイアウトを追加した瞬間に、要素の並び順はレイヤーの順序に従って再配置されます。ずれる場合はレイヤーの順番を確認し、必要に応じて並べ替えてください。
Figmaオートレイアウトが表示されない3つの確認手順
「設定しようとしているのにツールバーに項目がない」という状況は、操作そのものではなくFigmaの表示状態が原因のことが多くあります。まず焦らず、以下の3点を順番に確認してください。
手順1：デザインモードへの切り替えを確認する
Figmaの右上パネルには「デザイン」「プロトタイプ」の切り替えがあります。プロトタイプモードになっているとオートレイアウトのパネルが表示されないため、まず「デザイン」タブをクリックして切り替えます（Figmaヘルプ「オートレイアウトのガイド」）。この確認を後回しにして「なぜか表示されない」と時間を費やすことは珍しくありません。
手順2：対象を選択した状態で確認する
何も選択していない状態では、右パネルにオートレイアウトの追加ボタンが表示されません。キャンバス上でレイヤーを1つ以上選択した状態で右パネルを見てください。フレームを選んでいれば「オートレイアウトを追加」のボタンが表示されます。すでにオートレイアウトが付いているフレームを選んでいる場合は、ボタンではなくオートレイアウトの設定パネルが表示されます。
手順3：ブラウザキャッシュの削除またはアプリ再起動
デザインモードで正しいオブジェクトを選択していても表示されない場合は、Figmaのブラウザ版であればキャッシュを削除して再読み込みします。デスクトップアプリの場合はアプリを完全終了してから起動し直すと、UIの表示不具合の多くが解消されます。再起動で解決するケースはコミュニティでも広く報告されています（Figmaオートレイアウトの使い方とうまくできないときの原因と対策）。
フリーランスとしてデザイン業務を効率化するなら、作業効率を上げる方法を事前に整えておくことで、こうした調査・トラブル対応の時間も短縮できます。
Q: 対象を選択しているのに「オートレイアウトを追加」ボタンが出ません。
A: 選択しているオブジェクトがすでにオートレイアウトのフレームに変換済みの場合は、追加ボタンの代わりにオートレイアウト設定パネルが表示されています。画面右の「オートレイアウト」セクションを確認してください。
Q： ツールバーではなく右パネルから追加できますか？
A： できます。フレームを選択した状態で右パネルの「オートレイアウトを追加」ボタンをクリックすれば、Shift+Aと同じ操作になります。
Figmaオートレイアウトがうまくいかない5つの原因と対処
オートレイアウトを付けたのに見た目が崩れる、思った通りに並ばないという問題は、原因が複数重なっていることもあります。フリーランスとして「毎回手探りになる」状況を減らすには、原因を順番に切り分ける習慣が有効です。
原因1：子要素の幅・高さがFixedになっている
横並びのカードで、テキストの量を変えても高さが揃わない場合は、各カード子要素の高さ設定を確認します。右パネルのサイズ設定横のアイコン（HFのドロップダウン）がFixedになっていると、コンテンツが増えても枠が広がりません。高さをHugに変えると、中身に合わせてフレームが伸縮するようになります。「オートレイアウトが壊れた」に見えて、実際はFixedの設定が残っているだけというケースが多くあります。
原因2：親フレームと子フレームの設定が噛み合っていない
ネストしたフレーム（フレームの中にフレームがある状態）では、親の設定と子の設定が矛盾していると崩れます。たとえば親フレームがFill（コンテナに合わせる）になっているのに、子フレームもFillになっていると、どちらに合わせるのかが定まらず表示が不安定になります。親がHugで子がFill、または親がFixedで子がFillという組み合わせが、実務では意図通りに動きやすいパターンです。
原因3：要素の並び方向と設定が逆になっている
横並びにしたいのに縦に積まれる、縦に積みたいのに横に並ぶという場合は、オートレイアウトのフロー方向の設定を確認します。右パネルのオートレイアウトセクションで、矢印アイコンをクリックすると横方向（水平）と縦方向（垂直）を切り替えられます。崩れが直らないときに早めに確認したいポイントです。
原因4：パディングやgap（間隔）が意図外の値になっている
要素同士の間隔が不均一に見える場合、パディングやgapの設定値を確認します。右パネルのオートレイアウトセクションで、内側の余白（パディング）と要素間の間隔（gap）を個別に数値で設定できます。コピーしてきたコンポーネントにもともと設定されていた値が残っていて、意図しない余白になるケースがあります。
原因5：絶対位置の要素が混在してフローが崩れている
オートレイアウトのフレーム内に絶対位置の要素があると、フロー計算から外れるため、他の要素の配置に影響が出ます。「背景に敷くシェイプ」「バッジやアイコン」を後から追加したときに絶対位置になりやすいです。意図した要素以外が絶対位置になっていないか、レイヤーパネルで一度確認してください（Figmaオートレイアウトの使い方とうまくできないときの原因と対策）。
CHECK
▶ 今すぐやること: 崩れているフレームを選択し、子要素のHug/Fill/Fixed設定を右パネルで1つずつ確認する（3分）
Q: Hug・Fill・Fixedの切り替えはどこでできますか？
A： フレーム内の子要素を選択したとき、右パネルの幅・高さの数値の横にドロップダウンアイコンが表示されます。そこをクリックするとHug・Fill・Fixedから選択できます。
Q： オートレイアウトのgapとパディングの違いは何ですか？
A： gapは要素と要素の間の間隔です。パディングはフレームの内側の余白です。右パネルのオートレイアウトセクションで、それぞれ独立して数値入力できます。
Figmaオートレイアウトできない原因を3分で診断する
自分の問題がどのパターンに当たるか迷う場合は、以下の確認を順番に進めると原因を絞り込めます。
Q1: ツールバー・右パネルにオートレイアウトが表示されていますか？
表示されていない場合はQ2へ進んでください。表示されている場合はQ3へ進んでください。
Q2: デザインモードになっていますか？また、フレームを選択していますか？
いいえの場合はデザインモードに切り替え、フレームを選択してから再確認してください（Result A）。はい、それでも出ない場合はFigmaを再起動またはキャッシュをクリアしてください（Result B）。
Q3: オートレイアウトを追加済みなのに見た目が崩れていますか？
はいの場合はQ4へ進んでください。いいえの場合は現時点で問題なしです（Result C）。
Q4: 崩れている要素のHug/Fill/Fixed設定を確認しましたか？
確認していない場合はResult Dへ。確認したが直らない場合はResult Eへ進んでください。
Result A: デザインモードへの切り替えで解決するケースです。右上の「デザイン」タブをクリックしてください。
Result B: Figmaの表示バグの可能性があります。デスクトップアプリは完全終了後に再起動し、ブラウザ版はキャッシュ削除後にリロードしてください。
Result C: 今は問題がなくても、コンテンツが増えたときに崩れる場合があります。Hug/Fill/Fixedの設定を確認しておくと後のトラブルを防げます。
Result D: 子要素の幅・高さ設定を右パネルで1つずつ確認してください。Fixedになっている箇所をHugまたはFillに変えると解決します。
Result E: 絶対位置の要素が混在しているか、親フレームと子フレームの設定が矛盾している可能性があります。レイヤーパネルで絶対位置の要素を探し、フロー方向と設定の組み合わせを見直してください。
Q： コンポーネントにオートレイアウトを一括で付けられますか？
A： 一括追加はできません。コンポーネントはそれぞれがフレームのため、個別に設定する必要があります。複数を同時に選択した場合、Figmaは共通の設定変更には対応しますが、オートレイアウト自体の追加は個別に行います。
Q： フレームをグループに変換したらオートレイアウトはどうなりますか？
A： グループに変換するとオートレイアウトの設定は失われます。グループはオートレイアウトに対応していないため、変換する前に設定を記録しておくことをおすすめします。
PR提供: 日本デザインスクール（デザスク）
Hug・Fill・Fixedは3つの役割で使い分ける
この3つの設定は、Figmaのオートレイアウトを使いこなす上でもっとも理解しておきたい概念です。「なんとなく変えてみる」状態から抜け出すと、崩れる原因の多くが見えるようになります。
Hug：中身に合わせてフレームが縮む・伸びる
HugはHug contentsの略で、フレームがコンテンツのサイズに合わせて自動的にサイズを調整します（Figmaヘルプ「オートレイアウトのガイド」）。テキスト量が変わっても、ボタンの幅が自動的に変わるような設定で使います。ラベルやタグ、ボタンなど「中身のサイズに合わせて枠も変わってほしい」要素に適用します。ただし、親フレームがFixedのときにHugを設定すると、中身が溢れても親が縮まらないため注意が必要です。
Fill：親フレームに合わせて広がる
FillはFill containerの略で、親フレームのサイズに合わせて子要素が広がります。リスト内の各アイテムをカラムの幅いっぱいに広げたいとき、または画像をカードの幅に合わせたいときに使います。Fillを設定した要素は、親フレームが広がると一緒に広がり、縮むと縮みます。「なぜか要素が親より小さい」という場合、その要素がHugかFixedのままになっているケースがほとんどです。
Fixed：手動で決めたサイズを保持する
Fixedは指定したピクセル値を固定するモードです。デザイン的に正確なサイズが必要な画像やアイコン、特定のUIコンポーネントに使います。固定が必要な場合は意図してFixedにしますが、誤って残ってしまうのが崩れの原因として最も多いパターンです。「オートレイアウトを付けたのに何も変わらない」というとき、子要素がすべてFixedになっていることがよくあります。
| 設定 | 動作 | 主な用途 |
| Hug | 中身に合わせてフレームが縮む・伸びる | ボタン、タグ、ラベル |
| Fill | 親フレームに合わせて広がる | リストアイテム、画像 |
| Fixed | 指定ピクセル値を固定 | アイコン、精密サイズのUI部品 |
Q: HugとFixedはどちらが先に設定するべきですか？
A： まず内側の要素からHugかFillを設定し、その結果を見ながら外側（親フレーム）の設定を決める手順が混乱しにくいです。外側から先に固定すると、内側の設定が何に合わせているのか判断しにくくなります。
Q： Fillを設定したのに要素が広がりません。
A: Fillは親フレームがオートレイアウトになっているときに機能します。親フレームにオートレイアウトが付いていない場合はFillが効かないため、親フレームの設定を先に確認してください。
カードUI崩れを直す4ステップ手順
カードUIはオートレイアウトの悩みが集中しやすい箇所です。画像・タイトル・説明文・ボタンが縦に積まれる構成では、1箇所のFixedが全体の崩れにつながります。フリーランスとしてクライアント案件のデザインを修正するときに、この4ステップを覚えておくと時間を短縮できます。
【対象】: カードUIの見た目が崩れていて、どこを直せばいいか分からないフリーランスデザイナー
【手順】:
まずカード全体を選択し、右パネルのオートレイアウトセクションを確認します（30秒）。次にカード内の各要素（画像・テキスト・ボタン）を個別に選択し、幅・高さがFixedになっていないかを確認します（1分）。Fixedになっている要素を、用途に応じてHugまたはFillに変更します（1分）。最後にテキストを書き換えるか、画像のサイズを変更して、カード全体が連動するかを確認します（1分）。
【コツと理由】: カード自体はオートレイアウトになっていても、中の画像がFixedのまま残っていると、カードは正しく機能しているのに画像だけが切れるという状態になります。外側から順に確認するのではなく、崩れている要素を直接クリックして設定を見るほうが原因特定が早いです。
【注意点】: 画像要素は特にFixedが残りやすいため、確認の優先度を上げてください。また、テキストの「テキストの折り返し」設定がオフになっていると、テキストが1行に収まらずカードの幅が強制的に広がります。テキストの折り返し設定は、テキストレイヤーを選択したときのパネルで確認できます。カードを一度削除して作り直す前に、設定を確認してから変更するほうが原因が明確になり、同じ失敗を繰り返しません。
なお、Figmaを使ったポートフォリオ制作についても、FigmaでポートフォリオをまとめるFigma活用法で実践的な手順を確認できます。
Q: カードを複数並べると高さが揃いません。
A: 横に並べた複数のカードの高さを揃えるには、各カードの高さをFixedにするか、カードの親フレームで「アイテムの配置」を「引き伸ばし」に設定します。コンテンツの量が違うカードを揃えたい場合は、最低高さを設定する方法もあります。
Q： カードの角丸がオートレイアウト後に消えました。
A: オートレイアウトを追加してもフレームの角丸設定は保持されます。消えた場合は、フレームではなく内側の子要素が最前面に来ていて視覚的に見えなくなっている可能性があります。フレームを選択して角丸の値を再入力してください。
オートレイアウトの追加と解除のショートカット一覧
ショートカットを使うと、マウス操作より素早くオートレイアウトの追加・解除ができます。クライアント修正作業が続く日に覚えておくと作業リズムが変わります。
追加ショートカット：Shift + A
オートレイアウトを追加するには、対象のレイヤーを選択した状態でShift + Aを押します（Figmaヘルプ「デザインへのオートレイアウトの追加」）。グループを選択していた場合は自動的にフレームに変換されてからオートレイアウトが付きます。変換前に意図した構造になっているかを確認してから押す習慣を持つと、変換後の修正作業が減ります。
Figmaのショートカットと合わせて、Chrome拡張機能でブラウザ版Figmaの作業環境を整えると、デザイン作業全体のスピードがさらに上がります。
解除ショートカット：Option + Shift + A（Mac）／ Alt + Shift + A（Windows）
オートレイアウトを解除するには、オートレイアウトが付いたフレームを選択してOption + Shift + A（MacはOption、WindowsはAlt）を押します。解除するとフレームは残りますが、オートレイアウトの設定はすべてリセットされます。一度解除すると元に戻すにはCtrl + ZかCommand + Zで取り消せますが、複数の操作をはさんだ後だとundo履歴が複雑になるため、解除前に状態を把握しておくと安全です。
右パネルから追加・削除する方法
ショートカットを使わない場合は、フレームを選択した状態で右パネルの「オートレイアウトを追加」ボタンを押します。すでに付いているフレームの場合は、オートレイアウトセクションの右端にある「…」メニューからオートレイアウトの削除を選択できます。
| 操作 | Mac | Windows | 右パネル |
| 追加 | Shift + A | Shift + A | 「オートレイアウトを追加」ボタン |
| 解除 | Option + Shift + A | Alt + Shift + A | 「…」→「オートレイアウトの削除」 |
Q: Shift + Aを押したのに何も起きません。
A: 何も選択していない状態か、すでにオートレイアウトが付いているフレームを選択している可能性があります。レイヤーパネルで対象を選択しているかを確認してください。
Q： オートレイアウトを解除するとレイアウトは崩れますか？
A： 解除してもフレームと要素の配置はそのまま保持されます。ただし、オートレイアウトによる自動調整は機能しなくなるため、その後にコンテンツを変更しても自動でサイズや位置が変わらなくなります。
Figmaオートレイアウトできないを設定確認で解決する
Figmaのオートレイアウトが思い通りに動かないときの解決策は、原因のパターンを特定して設定を確認するという手順に集約されます。「フレームになっているか」「Hug・Fill・Fixedが意図通りか」「絶対位置の要素が混在していないか」の3点を反射的に確認できるようになると、手探りの時間が大きく減ります。フリーランスとして案件のスピードを保ちたい場合、この確認順序を身につけることが実務上の安定につながります。
崩れが起きたときに「どこを見るか」の順序さえ決まっていれば、同じ場所で詰まり続けることはなくなります。フリーランスとして作業効率を仕組みで上げる習慣を整えることで、こうした技術的なトラブルへの対応力も向上します。
| 状況 | 次の一歩 | 所要時間 |
| 表示されない | デザインモードに切り替え、フレームを選択して再確認 | 1分 |
| 付けたのに崩れる | 子要素のHug/Fill/Fixed設定を右パネルで確認 | 3分 |
| カードが切れる | カード内の各要素をFixed→HugまたはFillに変更 | 4分 |
| 解除したい | Option + Shift + A（Mac）/ Alt + Shift + A（Windows） | 30秒 |
Figmaオートレイアウトできないに関するよくある質問
Q: オートレイアウトとグループの違いは何ですか？
A： グループは複数要素をまとめるための入れ物で、要素の自動配置機能はありません。オートレイアウトはフレームに付ける設定で、中の要素を方向・間隔・サイズのルールに従って自動配置します。レスポンシブなコンポーネント設計には、グループではなくオートレイアウトを使います。
Q： コンポーネントにオートレイアウトを後から追加できますか？
A： できます。コンポーネントもフレームのため、選択してShift + Aで追加可能です。ただし、コンポーネントのメインとインスタンスの両方に影響が出る場合があるため、メインコンポーネントを編集してから変更してください。
Q： ネストしたオートレイアウトで親と子のどちらを先に設定すべきですか？
A： 内側（子）から設定して外側（親）に向かう順番が、意図を確認しながら進めやすいです。子の設定が何に合わせているのかが決まってから、親の設定を調整するほうが構造的に整理しやすくなります。