FigmaのオートレイアウトはShift+Aで即適用でき、内側余白（Padding）と要素間隔（Spacing between items）の2種類を設定するだけでボタンやカードの崩れを防げます。この記事ではPaddingとSpacingの違いから、Hug contents・Fill containerの使い分け、エンジニアへの余白伝達まで順を追って解説します。
▶ 3日で初案件PR
この記事でわかること
オートレイアウトの余白設定でわかることは3点です。PaddingとSpacing between itemsの役割の違いと使い分けルール、Hug contents・Fill container・固定値の正しい選び方、そしてボタン・カード・セクションの3パターンで余白設計を再現する手順です。
今の仕事について、一番近いものは？
この記事の結論
オートレイアウトの余白設定は、PaddingとSpacing between itemsの2種類を分けて管理するだけで、テキスト差し替え時のレイアウト崩れを防げます。サイズ設定をHug contentsにするかFill containerにするかを先に決め、そのうえでpx単位の余白を指定するのが実務での安定した順序です。この記事を読めば、ボタン・カードUI・セクションという3パターンで余白設計をすぐ再現できます。
最初に確認すること
オートレイアウトを適用する前に、対象のフレームがグループではなくフレームであることを確認します。グループのままPaddingを設定しようとしても、余白の設定パネルが表示されません。レイヤーパネルで対象を右クリックして「フレームに追加」を選ぶか、対象を選択してからShift+Aを押すとフレームに変換しながらオートレイアウトを適用できます。所要時間は約1分です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| PaddingとSpacingの違いが混乱している | PaddingとSpacing between itemsは役割が異なる | 3分 |
| ボタンの余白を整えたい | ボタンUIは3ステップで余白を設定する | 5分 |
| カードUIが崩れて困っている | カードUIは4要素をまとめてオートレイアウト化する | 5分 |
| Hug contentsとFill containerの判断がつかない | サイズ設定はHug・Fill・固定値の3択で選ぶ | 4分 |
| エンジニアに余白を正確に伝えたい | エンジニアへの余白伝達は5項目で完結する | 4分 |
| 余白の一貫性を納品前にチェックしたい | 余白設計の5項目チェックリスト | 3分 |
PaddingとSpacing between itemsは役割が異なる
オートレイアウトの余白設定でつまずく原因の多くは、PaddingとSpacing between itemsを混同したまま作業を進めることです。同じ「余白」という言葉を使っていても、設定対象はまったく異なります。
Paddingはフレームと中身の距離を決める
Paddingは、オートレイアウトを適用したフレームの内壁と、その中にある子要素との距離を指します。右パネルのオートレイアウトセクションに数値入力欄が表示され、上下・左右をまとめて設定するほか、4辺を個別に指定することもできます。
ボタンを例にとると、文字列とボタン枠との間が16px空いている状態を作るのがPaddingの役割です。文字を「送信する」から「クライアントに送信する」に差し替えたとき、Paddingが固定されていればボタン枠が自動的に横方向に伸び、余白は16pxのまま維持されます。テキスト差し替えに対して余白が自動で追随するのが、Paddingの実用上の価値です。
固定幅のフレームで作ってしまうと、文字が長くなったときに文字がはみ出すか、余白が潰れるかのどちらかになります。フリーランスの開業資金の見積もりと同じで、最初に正しい枠組みを設計しておくことで後からの手戻りが減ります。フリーランスの実務では「差し替えたら崩れた」という手戻りが発生しやすい箇所なので、ボタンのフレームサイズは後述するHug contentsを基本にしておくと修正が減ります。
Q: Paddingの個別設定はどこで切り替えますか？
A： 右パネルのオートレイアウトセクションにある数値欄の左端に小さなアイコンがあります。そのアイコンをクリックすると上下左右の個別入力欄に展開されます。4辺に別々の値を入れることで、たとえば左右24px・上下12pxのような非対称設定が可能です。
Q： Paddingは負の値を入れられますか？
A： いいえ、Paddingに負の値は入力できません。要素をフレーム外に意図的にはみ出させたい場合は、オートレイアウトではなく絶対位置（Absolute position）の設定を使います。
Spacing between itemsは子要素同士の隙間を決める
Spacing between itemsは、オートレイアウト内に複数の子要素が並んでいるとき、その要素同士の間隔を一括で管理します。アイコンとテキストラベルを横に並べたボタンでは、アイコンとテキストの間の距離を8px・12px・16pxといった値で統一するためにこの設定を使います。
複数のカードを横に並べたリストでも同様です。カードとカードの間の隙間をSpacingで管理することで、カードを追加・削除しても隙間が自動で保たれます。手動でカードを動かして間隔を揃える作業が不要になるのが実務上の利点です（実践で覚える！Figmaのオートレイアウト機能）。
PaddingとSpacingの使い分けは「フレームと中身の間＝Padding」「中身同士の間＝Spacing」と整理すると混乱が少なくなります。両方が関係する設定を同時に変えようとして数値が合わないケースは、この役割の違いを意識するだけで解決することが多いです。
Q： アイコンとテキストの間だけ広くしたいのですが、Spacingで対応できますか？
A： 基本的には全要素間に同じ値が適用されます。アイコンとテキスト間だけを変えたい場合は、いずれかの要素を選択して個別にマージンを上下左右で設定するか、Spacingを0にしたうえでテキスト要素にパディングを持たせる構成を検討します。
Q： Spacing between itemsをAutoにすると何が起きますか？
A： Autoに設定すると、フレームの幅に合わせて子要素が均等に分散されます。ヘッダーのナビゲーション項目をコンテナ幅いっぱいに均等配置したいときに有効です。ただし要素の増減で間隔が変わるため、カード一覧のような固定間隔が必要な箇所には向きません。
ボタンUIは3ステップで余白を設定する
ボタンは最も頻繁に余白設定を調整するUI要素です。Paddingを設定する順序を間違えると、ラベルを差し替えるたびにボタン幅を手動で直すことになるため、手順の順番が重要です。
ステップ1: テキストレイヤーを用意してShift+Aを押す
ボタンのラベルになるテキストレイヤーを1つ用意します。まだ枠を作らずに、テキストだけが存在する状態でShift+Aを押します。テキストを選択した状態でShift+Aを押すと、テキストを内包するオートレイアウトフレームが自動的に生成されます。所要時間は約30秒です。
この段階でフレームが作られるため、最初からフレームを手動で作る必要はありません。すでにフレームがある場合は、テキストをそのフレームに入れてからフレームを選択し、右パネルでオートレイアウトを追加します。
ステップ2: サイズ設定をHug contentsにする
テキストを内包したフレームを選択した状態で、右パネルのWとHの項目を確認します。デフォルトでHug contentsになっていることが多いですが、固定値が入っている場合はHug contentsへ変更します。
Hug contentsはフレームが中身のサイズに合わせて自動的に広がる設定です。テキストが「送信」でも「クライアントに送信」でも、Paddingさえ正しく設定してあればボタンの枠が自動伸縮します。この設定をしないと、次のステップでPaddingを設定してもボタンが広がらず余白が潰れます。
ステップ3: Paddingを左右24px・上下12pxに設定する
右パネルのオートレイアウトセクションで、Paddingの4辺を個別に入力します。ボタンの標準的なバランスとして、左右を24px・上下を12pxにすると多くのUIで見た目が整います。ただしこの数値は設計基準によって変わるため、プロジェクトで使っている8pxグリッドや4pxグリッドに合わせて調整します。
設定後にテキストを長い文字列に差し替えてみて、ボタンの幅が自動で広がり、左右の余白が維持されることを確認します。ここで余白が潰れる場合は、フレームのW設定が固定値になっている可能性があります（Figmaのオートレイアウトの基本的な使い方）。
Q: ボタンの高さも固定したい場合はどうしますか？
A： 高さだけFill containerではなく固定値に切り替えます。WはHug contents・HはFixed heightという組み合わせも設定可能です。ただし高さを固定すると上下Paddingが見た目上の余白と一致しなくなる場合があるため、高さ固定後に上下Paddingも確認します。
Q： アイコン付きボタンにする場合の注意点は？
A： アイコンとテキストを横並びにした状態でボタンのオートレイアウトを設定します。アイコンとテキスト間のSpacing between itemsを8px程度に設定し、ボタン外側のPaddingとは別で管理します。アイコンサイズが変わると全体のバランスが変わるため、アイコンのサイズを固定値で指定しておくと安定します。
カードUIは4要素をまとめてオートレイアウト化する
カードUIはボタンよりも構成要素が多く、余白設定を誤ると差し替え時に崩れやすい箇所です。画像・見出し・本文・ボタンという4要素の積み重ね方と、それぞれのSpacingを整理することが余白設計の核心です。
4要素の縦並びにオートレイアウトを適用する
カード内の4要素をすべて選択してShift+Aを押し、縦方向（Vertical）のオートレイアウトを適用します。このとき方向がHorizontalになっている場合は、右パネルで縦方向に切り替えます。
縦並びのSpacing between itemsは、デザインの密度感で変わりますが、見出しと本文の間は8px・本文とボタンの間は16pxというように、要素のグループ関係に応じて変えたいこともあります。その場合は画像・見出しをまとめてネストされたオートレイアウトとして内包し、さらに全体を外側のオートレイアウトで囲む入れ子構造を使います（実践で覚える！Figmaのオートレイアウト機能）。
「あれ、見出しと本文の間だけ広くしたい」と気づいてから構造を変えようとすると、作り直しに時間がかかることがあります。Spacingを一律にするかグループ別にするかは、カードの構成を決めたタイミングで先に決めておくと手戻りが減ります。
画像はFill container・テキスト類はHug contentsで設定する
カード内の画像は横幅をカードいっぱいに広げたいことが多いため、WをFill containerに設定します。Fill containerはオートレイアウトフレームの親に合わせて広がる設定です。親カードの幅が320pxなら画像も320pxになり、親が変われば追随します。
見出しテキストと本文テキストは、テキストの量によって高さが変わるため、HをHug contentsのままにします。固定高さにすると、長い本文が途中で切れる事態が起きます。フリーランスの実務では、クライアントからもらったコピーが想定より長くてカードが崩れるというのはよくある手戻りです。可変のまま設計しておくことで、コピーの変更を受けても再調整が不要になります。
Q： カード全体の外側の余白はどこで設定しますか？
A： カード自体のPaddingで管理します。カードの外側（隣のカードとの間）はSpacing between itemsで管理します。カードより外側の余白を「マージン」として設定しようとするとパネルに該当項目が見当たらない、というのはよくある混乱ですが、オートレイアウトではPaddingとSpacingの組み合わせで余白を設計します（オートレイアウトのフレームへの「マージン」のつけ方）。
Q: カードの最小幅を設定することはできますか？
A： できます。右パネルのサイズ設定の横にある詳細設定から、最小幅（Min width）を指定できます。短い見出しでもカードが一定幅を保つため、リスト表示での崩れを防げます。
PR提供: 日本デザインスクール（デザスク）
サイズ設定はHug・Fill・固定値の3択で選ぶ
オートレイアウトでの余白が思い通りにならない原因の多くは、サイズ設定の選択ミスです。Paddingを正しく入れてもフレームサイズが固定のままだと余白が詰まり、Fill containerのまま使うべき箇所をHug contentsにすると親フレームを無視した表示になります。
Hug contentsは中身に追随させたいとき
Hug contentsは、フレームのサイズを中身に合わせて自動で決める設定です。ボタンのように「テキストが変わっても余白を保ちたい」という要素に向いています。単体で使うコンポーネントや、中身の量が変わる要素の親フレームに設定します。
Hug contentsのフレームの中にHug contentsのフレームをネストしすぎると、どこかで固定値を指定しなければ全体のサイズが決まらなくなります。ある時点でページ全体を見たらカードの幅がバラバラになっていた、という状況はたいていここが原因です。階層の上位から順にサイズを確認していくと問題箇所が見つかります。
Fill containerは親フレームに合わせて広げたいとき
Fill containerは、親のオートレイアウトフレームの幅または高さいっぱいに広がる設定です。カード内の区切り線を端から端まで引きたい場合や、画像を横幅いっぱいに表示したい場合に使います。
Fill containerは親フレームの中にいるときしか機能しません。最上位のフレーム（親がいないフレーム）にFill containerを設定しようとしても、選択肢がグレーアウトしていることがあります。その場合は、対象のフレームをさらに外側のオートレイアウトフレームで囲むか、サイズを固定値で指定します（【Figma入門④】Figmaオートレイアウト機能の使い方・活用）。
固定値は変えたくない寸法が明確なとき
アイコンのサイズや、ブランドガイドで決まっているボタンの高さなど、「この要素は常に○○px」と決まっている箇所に使います。固定値を入れるとHug contentsやFill containerの挙動より優先されるため、意図せず余白が変わる心配がなくなります。
固定値を使いすぎると差し替え時の手動修正が増えます。固定値で指定するのは、デザインシステムで明示的に定められた寸法に限定するのが実務上のバランスとして安定しています。
Q： 幅はFill container・高さはHug contentsという組み合わせは可能ですか？
A： 可能です。W（幅）とH（高さ）は独立して設定できるため、W:Fill container、H:Hug contentsという組み合わせは実務でよく使われます。横幅をコンテナに合わせつつ、高さはテキスト量に応じて変わるカードの本文エリアなどに向いています。
Q： Hug contentsにしたのにフレームサイズが変わらない場合は？
A： 親のオートレイアウトフレームが固定幅で制約を持っている可能性があります。また、子要素にFixed widthが設定されていて、親のHug contentsがその固定値に引きずられているケースもあります。右パネルで対象フレームとその親の設定をそれぞれ確認します。
余白設計の5項目チェックリスト
納品前に余白の一貫性を確認しておくと、クライアントからの修正依頼を減らせます。以下の5項目を確認することで、主な余白の設定漏れや不整合をチェックできます。
CHECK
▶ 今すぐやること: チェックリストを開いたままファイルを確認し、引っかかる箇所にコメントを付ける（約5分）
項目1: 全ボタンにPaddingが設定されているか
ボタン要素を検索バーで「button」または「btn」と絞り込み、各ボタンフレームのPaddingが設定されているかを右パネルで確認します。固定幅のボタンがある場合は意図的かどうかを確認し、意図がなければHug contentsとPaddingの構成に変更します。
項目2: Spacing between itemsが8pxグリッドに沿っているか
プロジェクトのグリッド設定（4px/8px）を確認し、Spacing between itemsの値がその倍数になっているかを確認します。3pxや5pxなどの中途半端な値が混在していると、実装時にエンジニアが4pxまたは8pxに丸めることがあるため、意図した値を保つには事前にグリッドに揃えておく必要があります。
項目3: 可変テキストのある要素がHug contentsになっているか
見出し・本文・ボタンラベルなど、コンテンツの長さが変わりうる要素の親フレームがHug contentsになっているか確認します。固定値の場合、テキスト差し替えで余白が潰れるリスクがあります（Figmaのオートレイアウトの基本的な使い方）。
項目4: 上下左右のPaddingが設計基準と一致しているか
プロジェクトの余白基準（例：カード内側16px、セクション内側24px）と、実際のPadding値が一致しているかを確認します。コンポーネントを複製して微調整しているうちに、元の値からずれていることがあります。
項目5: 余白がコメントまたはStyle定義で共有されているか
Spacingの値をStyle（スタイル定義）に登録しているか、あるいはコメントでエンジニアに伝える準備ができているかを確認します。数値が正しくても伝達手段がなければ実装で再調整が発生します。作業効率を上げる方法として、チェックリストをテンプレート化しておくと複数プロジェクトで転用できます。
Q: 余白のStyleはFigmaのどこで登録しますか？
A： 右パネルの「ローカルスタイル」またはDesign Systemプラグインから登録できます。Figmaでは、スペーシングの値をトークンとして管理する方法が主流になりつつあり、FigmaのVariables機能を使った数値の一元管理も選択肢になっています。
Q： チェックリストを毎回ゼロから作るのは手間です。テンプレート化できますか？
A： Figmaの空きキャンバスにテキストで残しておくか、Notionなどの外部ドキュメントにテンプレート化しておくと再利用できます。5項目程度のリストであれば1回作れば複数プロジェクトで転用できます。
エンジニアへの余白伝達は5項目で完結する
余白設計が正しくできていても、エンジニアに伝わらなければ実装がずれます。FigmaのPaddingとSpacingはCSSのpaddingとgapに対応するため、どちらがどれに当たるかを整理して渡すことで実装側の解釈ブレを減らせます。
FigmaのPaddingはCSSのpaddingに対応する
FigmaのオートレイアウトのPaddingは、CSSのpaddingプロパティに直接対応します。上下左右の値をそのままpaddingの4辺の値として伝えられるため、Figmaでの設定値をpx単位で共有するだけで実装者はスタイルを記述できます。
FigmaのDev Mode（開発者向けモード）を使うと、選択したフレームのPadding値をパネルで確認できます。エンジニアにFigmaのURLを渡してDev Modeで確認してもらえば、数値の読み取りにかかる手間を双方で省けます（Figmaデザインからエンジニアへ余白指定を適切に伝える方法）。
フリーランスとして実務でやりがちなのが、Paddingの数値をスクリーンショットに書き込んで共有する方法です。数値自体は合っていても、どの要素に対するPaddingかがわかりにくいことがあります。FigmaのDev Modeを使う方法を最初に案内しておく方が、確認コストが下がります。
Spacing between itemsはgapまたはmarginとして伝える
Spacing between itemsは、CSSではFlexboxのgapプロパティか、個々の要素のmarginとして実装されることが多いです。FigmaのDev Modeでは「Gap」として表示されることがあるため、エンジニア側には「Gapまたはmarginで実装」と伝えると認識が揃いやすいです。
FigmaのPaddingとCSSのmarginは混在しやすい概念で、「Figmaでpaddingと言っているが、実装ではmarginが正しい」というすれ違いが起きることがあります。その場合は、FigmaのDev Modeの表示をスクリーンショットで共有しながら「このGapをgapかmarginで実装してください」という形で伝えると誤解が減ります（Figmaデザインからエンジニアへ余白指定を適切に伝える方法）。
Q： エンジニアにFigmaのアカウントがない場合はどうしますか？
A： FigmaのURLを渡せばアカウントなしでも閲覧モード（View only）で確認できます。Dev Modeの利用にはFigmaアカウントへのログインが必要な場合がありますが、確認できない場合はPDFやJPEGに数値を記入して渡す方法も有効です。
Q： Figma上のPadding値と実装結果のずれが起きた場合は？
A： まずFigmaのDev Modeで確認した値と実装コードの値を突き合わせます。ずれていればコードを修正します。値は合っているのに見た目がずれる場合は、box-sizingの設定やボーダーの太さが影響していることが多いです。その場合はエンジニアと画面共有で確認するのが最短です。
Figmaオートレイアウトの余白は2種類で設計する
PaddingはフレームとコンテンツIの距離を決め、Spacing between itemsは子要素同士の隙間を決める。この2種類を分けて理解することがオートレイアウトの余白設定の起点です。サイズ設定（Hug contents・Fill container・固定値）を先に決め、そのうえでpx値の余白を入れる順序で作業すると、テキスト差し替えやコンポーネント変更での手戻りを防ぎやすくなります。
余白設定はルールを決めてしまえば、ボタン・カード・セクションの3パターンを繰り返すだけで対応できます。最初の1コンポーネントを丁寧に設計し、それを複製しながら展開していくのが実務での効率のよい進め方です。
| 状況 | 次の一歩 | 所要時間 |
| ボタンの余白がすぐ崩れる | テキストフレームをHug contentsに変更し、左右24px・上下12pxのPaddingを設定する | 5分 |
| カードの画像が幅に合っていない | 画像フレームのWをFill containerに変更し、親カードの幅との追随を確認する | 3分 |
| Spacingが中途半端な値になっている | 使用中のグリッド設定を確認し、Spacing値を4pxまたは8pxの倍数に揃える | 5分 |
| エンジニアへの伝達方法が決まっていない | FigmaのURLをDev Modeで共有する手順をエンジニアに案内する | 3分 |
Figmaオートレイアウトの余白に関するよくある質問
Q: グループとオートレイアウトはどう使い分ければよいですか？
A： グループは見た目を束ねるだけで余白設定の機能を持ちません。余白を設定したい、または要素の増減に対してレイアウトを自動調整したい場合はオートレイアウトを使います。単純に複数のレイヤーを移動しやすいよう束ねるだけであればグループで十分です。迷ったときは「この要素に後でPaddingを付けたくなる可能性があるか」を基準にすると判断しやすくなります。
Q： オートレイアウトを外したいときはどうしますか？
A： 右パネルのオートレイアウトセクション横にある「×」マークをクリックするか、対象フレームを選択して右クリックから「オートレイアウトを解除」を選びます。解除しても要素の位置は維持されますが、以後は余白の自動管理が外れるため、子要素を手動で管理する必要があります。
Q： セクション全体の外側の余白はどう設定すればよいですか？
A： セクション全体を囲むオートレイアウトフレームにPaddingを設定します。セクションの外側に余白を作ろうとして「マージン」を探しても見当たらないのは、オートレイアウトでは外側の余白をPaddingで管理するためです。ページ全体のレイアウトを管理するコンテナフレームを作り、そこにPaddingを持たせる構成が実務での標準的なアプローチです（オートレイアウトのフレームへの「マージン」のつけ方）。
Q： 複数のコンポーネントで余白ルールを統一したい場合は？
A： Spacingの値をFigmaのVariables（数値変数）またはStyleとして登録し、各コンポーネントのPaddingとSpacingをその変数から参照する設定にします。変数の値を1か所変えることで全コンポーネントの余白が一括で変わるため、デザイン基準の変更対応がしやすくなります。
Q： オートレイアウトを入れ子にしすぎると重くなりますか？
A： 深いネストはFigmaの動作に影響することがあります。一般的な実務範囲では体感できるほど重くなることは少ないですが、カードリストを100件以上並べるような場合は、コンポーネントインスタンスの数を減らすかFrameを分割する対処が有効です。