FigmaのオートレイアウトはShift+Aで即座に適用でき、Hug・Fill・Fixの3種を使い分けることでPC・スマホ両対応のレイアウトを構築できます。Figma公式ヘルプは「コンテンツ変更に動的に応答し、レスポンシブデザインを作成できる」と説明しています（Figmaヘルプ「オートレイアウトのガイド」）。この記事では、ブレイクポイント設計から横並びを縦並びへ切り替える実践手順まで、フリーランスが実案件で即使える方法を5つのノウハウで解説します。
▶ 3日で初案件PR
この記事でわかること
Hug・Fill・Fix3種の役割と使い分けの判断基準、ブレイクポイントごとのフレーム管理手順、横並びカードをFillで幅可変にする実装手順の3点をまとめて確認できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figmaのオートレイアウトでレスポンシブデザインを作るには、Hug・Fill・Fixの役割を正しく理解し、ブレイクポイントごとにフレームを分けて設計するのが確実な方法です。横並びカードは子要素をFillにするだけで幅可変になり、テキストやボタンはHugで内容量に連動させます。Fixは画像・アイコン等のサイズ固定に限定して使い、この3種の組み合わせが崩れにくいレイアウトの基本構造になります。
最初に確認すること
オートレイアウトを適用する前に、対応するブレイクポイント（PC：1280px前後、タブレット：768px前後、スマホ：375px前後）を先に決めておいてください。ブレイクポイントが決まれば、どのフレームをどう変形させるかの設計判断が一気に明確になります。確認作業の目安は5分程度です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| オートレイアウトの基本を知りたい | FigmaオートレイアウトはShift+Aで3種の動作を制御 | 5分 |
| Hug/Fill/Fixの違いが分からない | Hug・Fill・Fixは役割で使い分け | 8分 |
| スマホ対応で崩れる問題を解決したい | ブレイクポイントはフレームを分けて管理 | 7分 |
| カード一覧をレスポンシブにしたい | 横並びカードはFillで幅を可変にする | 8分 |
| 実案件向けの設計方法を知りたい | コンポーネント化で改修耐性を高める | 10分 |
FigmaオートレイアウトはShift+Aで3種の動作を制御
フリーランスがFigmaで実案件を受けると、PCではきれいに見えるのにスマホ幅にしたら要素が右にはみ出した、という状況は珍しくありません。毎回手動で位置を修正しているなら、オートレイアウトの仕組みを理解することで、その時間をかなり短縮できます。
オートレイアウトの役割はレイアウト自動調整
オートレイアウトは、フレーム内の要素を方向・間隔・パディング・整列などのルールに基づいて自動配置する機能です（Figmaヘルプ「オートレイアウトのガイド」）。コンテンツが追加・削除・サイズ変更されても、手動で再配置する必要がない点が最大のメリットです。クライアントから「ボタンのテキストを2行にしてほしい」という修正依頼が来たとき、オートレイアウトが正しく設定されていれば、テキストを変更するだけで周囲のレイアウトが自動的に追随します。
オートレイアウトなしのFigmaファイルを引き継いだ際、テキスト1箇所の変更で周辺要素を手作業で5分以上修正した経験のあるデザイナーは少なくありません。オートレイアウトが適切に設定されていれば、その5分は不要になります。なお、作業効率を上げるためのシステム設計という視点では、こうしたツール活用が月間30%以上の時短につながるとも言われています。
適用方法は3ルートで同じ結果になる
オートレイアウトの追加方法は、Shift+Aのショートカット、右パネル内のオートレイアウト項目へのクリック、右クリックメニューからの選択の3種類があります（Figmaヘルプ「デザインへのオートレイアウトの追加」）。どのルートを使っても結果は同じで、操作に慣れたらShift+Aが最も速いです。Figma公式には「オートレイアウトを提案」というボタン機能があり、既存のフレームやコンポーネントを選択した状態でこのボタンを押すと、Figmaが自動でオートレイアウトの設定を提案してくれます。既存デザインのレスポンシブ化を短時間で進めたい場面では有効な選択肢です。
フローは垂直・水平・ラップの3方向
オートレイアウトのフロー方向は、垂直（縦並び）・水平（横並び）・ラップ（折り返し）の3種類から選択します。横並びのナビゲーションメニューを作る場合は水平フロー、縦に積み重なるコンテンツは垂直フロー、画面幅に応じて折り返すカード群はラップを選ぶのが基本的な判断軸です。実務では「まず水平フローで組んだが、スマホ対応でラップが必要になった」という気づきが後から出ることも多いため、設計段階でスマホ表示を想定しておくと後の修正が減ります。
CHECK
▶ 今すぐやること: Figmaを開き、任意のフレームを選択してShift+Aを押し、右パネルにオートレイアウトの設定項目が表示されることを確認する（2分）
Q: オートレイアウトを適用した後でフロー方向は変えられますか？
A： 変えられます。右パネルのオートレイアウト設定内にある方向アイコンをクリックするだけで、水平・垂直・ラップの切り替えができます。適用後の変更に制限はありません。
Q： オートレイアウトは入れ子（ネスト）にできますか？
A： できます。子フレームにもオートレイアウトを適用することで、親フレームの動作と子フレームの動作を独立して制御できます。複雑なカードコンポーネントなどはネストを前提に設計するのが一般的です。
Q： 既存デザインにオートレイアウトを後から追加しても大丈夫ですか？
A： 技術的には後から追加できますが、要素の位置がずれるケースがあります。「オートレイアウトを提案」ボタンを使うと自動調整されるため、後付けの場合はこの機能から試してください。
Hug・Fill・Fixは役割で使い分け
「とりあえずFillにすれば伸びる」と思って全要素にFillを適用したら、意図しない要素まで引き伸ばされて崩れた、という経験をしたデザイナーは多くいます。3種の役割の違いを一度整理しておくと、迷う時間が大幅に減ります。
Hugはコンテンツに合わせてフレームが縮む
Hugは、フレームのサイズが内部コンテンツに合わせて自動的に変化する設定です（Figmaでなんちゃってレスポンシブ！(オートレイアウト)）。ボタンのラベルテキストが「送信」から「送信する」に変わったとき、ボタンのフレーム幅が自動で広がるのがHugの動作です。テキストやアイコン付きラベル、可変的な内容を持つUIパーツに適しています。
Hugを使うべき場面は「中のコンテンツが変わるかもしれない要素」です。クライアントから「ボタンのラベルを変えるかもしれない」と言われた場合は、最初からHugで設定しておくと、修正対応がテキスト入力だけで完結します。
FillはFillで親の幅を分け合って伸縮する
Fillは、親フレームの幅（または高さ）を基準に要素が伸縮する設定です。横並びの3カラムレイアウトで各カードの幅を等分したい場合は3枚全てのカードをFillにします。すると、親フレームの幅を3等分した幅が各カードに自動的に適用されます。画面幅が変わっても、3カラムのバランスは崩れません。
Fillで注意が必要な点として、子要素をFillにするには、その親がオートレイアウトになっている必要があります。親がオートレイアウトでない状態でFillを選ぼうとすると、選択できない場合があります。「Fillが選べない」と感じたときは、まず親フレームへのオートレイアウト適用を確認してください。
Fixはサイズを固定して動かさない
Fixは、フレームや要素のサイズを固定する設定です。親フレームが伸縮しても、Fix設定の要素は指定したサイズを維持します。アイコン（40x40pxなど）や固定幅のロゴ画像、サイズが変わると意味を失う要素に使います。
実務でよくある失敗として、カード内の画像にFillを設定したら、カードが縦長になったときに画像が縦に引き伸ばされたというケースがあります。画像は比率を保ちたい場合が多いため、高さはFixで固定しておく方が安全です。画像・アイコンにFillを設定する場面はほぼなく、基本的にFixが適切です。フリーランスとしてWebデザイナーのポートフォリオを作成する際も、このような細かな設定の差が完成品の質に直結します。
Q: HugとFillを同じ要素に同時設定できますか？
A： 横方向にHug、縦方向にFillという組み合わせは設定できます。「横幅はテキストに合わせて縮むが、高さは親フレームに合わせて伸びる」というボタンなどに応用できます。
Q： Fixに数値を入れるとき、どこで確認しますか？
A： 右パネルのW（幅）・H（高さ）の欄に直接数値を入力します。Fixにした状態でこの数値を変更すると、コンテンツや親フレームの変化に関わらず、その値を維持します。
Q： 3種の使い分けで迷ったときの判断ルールはありますか？
A： 「コンテンツ量が変わる可能性がある→Hug」「親フレームの幅に連動させたい→Fill」「サイズを絶対に変えたくない→Fix」という順番で判断すると、迷いが減ります。
ブレイクポイントはフレームを分けて管理
自分のFigmaファイルがブレイクポイント対応できているか、3分で判定できます。
Q1: Figmaファイル内にPC用とスマホ用のフレームが別々に存在しますか？
Yesの場合はQ2へ進んでください。Noの場合はまずPCフレームを複製してスマホ用フレームを作るところから始めてください（Result D）。
Q2: PC用フレームにオートレイアウトが適用されていますか？
Yesの場合はQ3へ進んでください。Noの場合はオートレイアウト未適用のため、スマホ対応の前にPC側の設定を先に整えてください（Result C）。
Q3: 子要素のHug/Fill/Fixが意図通りに設定されていますか？
Yesの場合はResult A（実装準備完了）です。Noの場合はResult B（設定を見直す段階）です。
Result A: ブレイクポイント対応の準備が整っています。
次のステップとして、スマホフレームでフレーム幅を375px程度に変更し、縦並びへの切り替えが必要な箇所を確認してください。
Result B: Hug/Fill/Fixの設定を見直す必要があります。
各要素を選択して、意図した設定になっているか右パネルで1つずつ確認してください。特にFillが選べない場合は親フレームのオートレイアウト設定を先に確認してください。
Result C: PC用フレームのオートレイアウト設定を先に整えてください。
PCデザインにShift+Aを適用し、子要素のHug/Fill/Fixを設定してから、スマホ対応の手順に進んでください。
Result D: まずPCフレームを複製してスマホ用フレームを準備してください。
PCフレームをコピーし、フレーム幅を375px前後に変更してください。このフレームを基点にスマホデザインを調整します。
ブレイクポイントの設定はPCフレーム複製から始める
PCデザインのフレームを複製し、複製したフレームの幅をそれぞれタブレット用（768px前後）・スマホ用（375px前後）に変更する方法が実践例として紹介されています（Figmaで効率の良いレスポンシブの作り方）。3つのフレームを横に並べて作業することで、PC・タブレット・スマホの表示を同時に視覚的に確認しながら調整できます。
ブレイクポイントを先に決めてからデザインを始めたWebデザイナーは「後の修正がスムーズになりました」と語っています（Figmaで効率の良いレスポンシブの作り方）。Webデザインの配色設計と同様に、設計段階で基準を決めてから作業に入ることが、後工程の手戻りを最小化するコツです。
スマホ化では縦並びへの切り替えが必要になる
PCで水平フローだったオートレイアウトフレームは、スマホ幅になると横方向に収まらなくなる場合があります。この場合、スマホ用フレームのオートレイアウト設定を垂直フローへ変更するか、ラップ（折り返し）を設定します（Figma初心者でも大丈夫！レスポンシブWebデザインをFigmaで作るポイント）。スマホ移植の具体的な手順として、コンテンツをiPhone相当のフレームに移し、縦並びまたは折り返しにし、フレーム幅をデバイスに合わせる流れが紹介されています。
実務では「スマホ幅で見たら3カラムが崩れた」という気づきが出てから対応に入るケースが多いため、最初の設計段階でラップの使用可能性を想定しておくと後の修正工数が減ります。
フレーム幅を動かしながら崩れを確認する
Figma上でフレームの幅を直接変更しながら、各要素が意図通りに伸縮するかを確認する作業は、レスポンシブ設計の検証として有効です。右パネルのW（幅）欄の数値を直接変更するか、フレームの端をドラッグして幅を変えることで確認できます。この確認作業中に「思っていたより早い段階で崩れる」という想定外の箇所が出てくることは珍しくないため、設計初期から確認を繰り返す習慣をつけておくのが有効です。
CHECK
▶ 今すぐやること: 現在作業中のFigmaファイルでフレームを選択し、W欄の数値を1280→768→375と変更して、各幅でレイアウトが崩れないことを確認する（5分）
Q: ブレイクポイントは何px刻みで設定するのが一般的ですか？
A： PC用は1280px前後、タブレット用は768px前後、スマホ用は375〜390px前後が目安として多く使われます。案件によって異なるため、コーダーや開発担当者に事前に確認してください。
Q： Figmaでブレイクポイントを自動で切り替える機能はありますか？
A： Figma単体では自動切り替えの機能はなく、ブレイクポイントごとに別フレームを作成して管理するのが現時点での一般的な対応方法です。プロトタイプ機能を使うことで、条件分岐に近い動作を再現する方法もあります。
Q： ブレイクポイントの確認はどの段階でやるのが適切ですか？
A： PC版デザインが7〜8割固まった段階でスマホ版を並行して確認し始めると、手戻りが少なくなります。完成してからスマホ対応を始めると、PCデザインを大幅に変更しなければならないケースが出てきます。
PR提供: 日本デザインスクール（デザスク）
横並びカードはFillで幅を可変にする
カード一覧のレイアウトをレスポンシブ対応させる作業は、フリーランスが受ける実案件の中でも頻度が高い作業です。「カードを3列から2列にしたい」「カードを追加してもレイアウトが崩れないようにしたい」という要望は、オートレイアウトとFillの組み合わせで対応できます。
親フレームにオートレイアウトを適用してカードを並べる
横並びカードを作る基本手順として、まず複数枚のカードコンポーネントを一つのフレームに格納し、そのフレームにオートレイアウト（水平フロー）を適用します（Figma入門④ Figmaオートレイアウト機能の使い方・活用）。次に、各カードの幅をFillに設定すると、カードが親フレームの幅を等分した幅に自動的に調整されます。親フレームの幅を変えるだけで、全カードが連動して幅を変えます。
カード間の余白は、親フレームのオートレイアウト設定内の「間隔」を調整します。この間隔もFillの幅計算に反映されるため、余白を先に決めてからカードのFillを設定するのが崩れにくいやり方です。
折り返しで少ない列数へ切り替える
スマホ幅でカードを1列表示に切り替えたい場合、親フレームのオートレイアウトをラップ（折り返し）に変更し、フレーム幅をスマホ幅に設定します。各カードの最小幅（Min W）を設定しておくと、フレーム幅が縮んだタイミングで自動的に折り返しが発生し、1列表示になります。この設定をしておくと、フレーム幅を変えるだけで3列→2列→1列の変化を自動で再現できます。
スマホ用フレームのカードを手動で1列に並べ直す作業は、ラップ設定があれば不要になります。手動並べ直しはスマホ用フレームでしか機能しないため、後からカードを追加した際に再度並べ直す手間が生じます。
画像はFixで高さを固定してアスペクト比を保つ
カード内の画像は、Fill設定にすると縦に引き伸ばされるリスクがあります。画像の高さはFixで固定し、幅はFillにすることでカード幅に連動しながらも高さを維持できます。画像のアスペクト比は「コンテンツに合わせてクリップ」の設定を使うとFigma上でも確認しやすくなります（Figmaでなんちゃってレスポンシブ！(オートレイアウト)）。
カード内の画像高さをFixにするだけでカード一覧の崩れが大幅に減ったと語るWebデザイナーは少なくありません。それまで毎回手作業で修正していた工程が不要になった、という報告もあります（Figmaでなんちゃってレスポンシブ！(オートレイアウト)）。なお、こうした効率化の積み重ねは、Webデザイナーとして実案件を受ける際の提案品質にも直接影響します。
Q: カードのタイトルテキストが長くなるとカード高さが変わりますが、これを制御できますか？
A： カード内のテキストボックスをHug設定にすると、テキスト量に応じてカードの高さが変動します。高さを固定したい場合は、テキストボックスの高さをFixにしてからクリップ設定を使うか、最大行数を決めてトリミングする設計にする方法があります。
Q： 「間隔：自動」と「間隔：固定」はどちらを使うべきですか？
A： カード間の余白を一定に保ちたい場合は固定値を使います。親フレームの幅に余白を分散させたい（Justifyレイアウト）場合は自動が適しています。デザインの意図によって使い分けてください。
Q： カードを追加したときに親フレームが自動で広がってしまいます。
A: 親フレームの高さをHugにしている場合、子要素が増えると高さが増します。ページ内の位置固定が必要な場合は、親フレームの高さをFixにして内部をスクロール設定にする対応が適切です。
コンポーネント化で改修耐性を高める
クライアントからカード1枚の色を変えてほしいと言われ、50枚全部を手作業で変更した経験は、フリーランスのFigmaユーザーに共通する悩みです。コンポーネント化とオートレイアウトを組み合わせると、こうした作業の多くが不要になります。
セクションをカードコンポーネントとして登録する
画像・見出し・本文の3点セットをひとつのフレームにまとめ、オートレイアウトを適用してからコンポーネント（Ctrl/Cmd+Alt+K）として登録します。このコンポーネントのインスタンスをページ上に複製して使うと、元のコンポーネントを修正するだけで全インスタンスに変更が反映されます（Figma初心者でも大丈夫！レスポンシブWebデザインをFigmaで作るポイント）。
コンポーネント内でHug/Fill/Fixを正しく設定しておくと、インスタンスの幅を変えても内部の要素が正しく追随します。コンポーネント内の設定が曖昧なまま複製すると、インスタンスごとに崩れが発生します。「コンポーネントを作ったのに個別に直しが必要」という状況は、内部の設定が不完全なことがほぼ原因です。
余白は広めに取って将来の改修に備える
コンテンツが増減しやすい箇所（お知らせ一覧・メニュー・タグリスト等）は、パディングを広めに設定しておくと、コンテンツが増えたときの崩れを防ぎやすくなります。行間や要素間の余白は、デザイン全体で使う値を先に決めて（例：4pxの倍数）統一すると、後から調整が発生したときの修正箇所が減ります。
CSSのFlexboxに近い考え方でFigmaを組んでおくと、コーダーへのデザイン渡し後の崩れが減る実感があると紹介されています（Figma初心者でも大丈夫！レスポンシブWebデザインをFigmaで作るポイント）。Flexboxで言うdirectionがオートレイアウトのフロー方向、gapが要素間の間隔、paddingがフレームのパディングに対応しています。Figmaでポートフォリオをまとめる方法でも、コンポーネント設計の精度がポートフォリオ全体の品質に直結すると解説されています。
再利用前提の構造で時間を節約する
コンポーネントとオートレイアウトの組み合わせによるメリットとして見落としがちな点は、新しいページを作るときの速度です。再利用可能なコンポーネントが揃っていれば、新ページは既存コンポーネントを並べるだけで組めます。プロジェクト序盤でコンポーネント設計に時間をかけるほど、後半の作業速度が上がります。ただし、コンポーネント設計が複雑になりすぎると、後から引き継ぐ開発者やデザイナーが理解するのに時間がかかることがあります。シンプルに保つことと再利用性のバランスは、案件の規模と運用体制によって判断してください。
CHECK
▶ 今すぐやること: 作業中のFigmaファイルで1つのカードコンポーネントを登録し（Ctrl/Cmd+Alt+K）、インスタンスを3つ並べてから元コンポーネントの色を変えて全インスタンスに反映されることを確認する（5分）
Q: コンポーネントのメインとインスタンスの違いは何ですか？
A： メインコンポーネントはオリジナルです。インスタンスはそのコピーで、メインを変更するとインスタンスに反映されます。インスタンス側でも個別の上書き（テキスト変更・色変更等）は可能です。
Q： コンポーネントにオートレイアウトを設定すると、インスタンスでの幅変更はできますか？
A： できます。インスタンスを選択して右パネルでW（幅）の値を変更すると、変更した幅の範囲でHug/Fill/Fixの設定が機能します。
Q： コンポーネントの変更が既存インスタンスに意図せず反映されて困っています。
A: インスタンス側で個別に変更した箇所は、メインコンポーネントを変えても上書きされません。ただし変更していない箇所は更新が反映されます。意図しない反映を防ぐには、インスタンス側で変更したい箇所を先に上書きしてから、メインコンポーネントを変更する順番が安全です。
まとめ：FigmaオートレイアウトはHug/Fill/Fixで崩れを防ぐ
Figmaのオートレイアウトでレスポンシブデザインをするなら、Hug・Fill・Fixの3種の役割を理解して使い分けることが、崩れにくい設計の基本です。コンテンツ量が変わる要素はHug、親フレームに連動させる要素はFill、サイズを固定したい要素はFixとそれぞれ役割が異なります。ブレイクポイントごとにフレームを分けて管理し、スマホ幅ではフロー方向を縦並びまたはラップに切り替えることで、PC・スマホ両対応のデザインが完成します。
クライアントから修正依頼が来るたびにレイアウトを手動で直す作業は、コンポーネント化とオートレイアウトの組み合わせで減らせます。設計初期にコンポーネント構造とブレイクポイントを決める時間をかけることが、結果として後半の修正工数を減らすことにつながります。案件のたびに一から設計するよりも、再利用できるコンポーネントセットを少しずつ育てていく方が、長期的に作業時間の節約になります。
| 状況 | 次の一歩 | 所要時間 |
| Hug/Fill/Fixを設定したが崩れる | 親フレームにオートレイアウトが適用されているかを確認する | 3分 |
| スマホ版で横並びが崩れる | フロー方向を垂直またはラップに変更し、フレーム幅を375pxで確認する | 5分 |
| カード一覧を量産したい | 1枚のカードをコンポーネント化してからインスタンスを複製する | 10分 |
| 既存デザインをレスポンシブ化したい | 「オートレイアウトを提案」ボタンを使って自動設定を試みる | 5分 |
Figmaオートレイアウトとレスポンシブデザインに関するよくある質問
Q: オートレイアウトを使うと、Figmaのファイルが重くなりますか？
A： オートレイアウト自体がファイルを著しく重くする要因にはなりません。ファイルが重くなる主な原因は高解像度画像の多用やコンポーネント数の増加です。オートレイアウトの設定はファイルサイズへの影響が軽微です。
Q： オートレイアウトとグリッドレイアウトはどちらを使えばいいですか？
A： 用途が異なります。グリッドはページ全体のカラム設計や余白の基準を視覚的に確認するためのガイドです。オートレイアウトは実際の要素を自動配置する機能です。両方を組み合わせて使うのが一般的で、グリッドで基準を作り、オートレイアウトで要素を配置します。
Q： 開発者へのデザイン渡し時に注意することはありますか？
A： FigmaのDev Mode（開発者向けモード）では、オートレイアウトの設定値がCSSのFlexboxに近い形で表示されます。開発者がこの値を参照できるように、共有するファイルにDev Modeを有効にした状態で渡すと、実装時の解釈のズレが減ります。