Figmaのオートレイアウトは、フレーム内の並び方と余白を指定し、文字の長さや部品の追加に応じて配置を調整する機能です。まず文字に追従するボタンを作り、その後で親の幅に追従するカードへ進むと、Hug・Fill・Fixedを選び分けやすくなります。
この記事では、ブラウザー版Figma Designで確認したボタンの実画面と、公式資料に基づくカード・折り返しの設定例を紹介します。操作にはファイルの編集権限が必要です。公式のオートレイアウトガイド
最初に決めるのは「どのレイヤーを何に合わせるか」
同じボタンでも、文字の長さに合わせる場合と、画面の横幅いっぱいにする場合では設定が違います。レイヤーパネルで親と子を確認し、幅と高さを別々に決めてください。
| サイズ調整 | 基準 | 使いどころ |
|---|---|---|
| Hug／コンテンツを内包 | 内側の部品と余白 | 文字に追従するボタン、内容で高さが変わるカード |
| Fill／コンテナに合わせて拡大 | 親の利用可能な領域 | カードの本文、幅いっぱいの入力欄・ボタン |
| Fixed／固定 | 指定した寸法 | アイコン、画面の検証幅、一定サイズの画像 |
フレームのHugは子の寸法から決まり、Fillはオートレイアウトの子に使う設定です。キャンバス直下のフレームでFillが出ない場合は、追従先の親があるかを確認します。文字レイヤーには幅の自動調整など独自の設定もあるため、外側のフレームと同じ項目だと考えないでください。
文字に追従するボタンを作る
1．文字をオートレイアウトで包む
- テキストツールで「無料ダウンロード」と入力します。
- 文字レイヤーを選択して、Windows・Macともに
Shift + Aを押します。 - 作成された親フレームを選び、フローを水平にします。
- 幅と高さをコンテンツを内包にします。文字は幅の自動調整にします。
- 親の水平パディングを20、垂直パディングを12にします。
- 親に塗りを追加します。背景色や角丸は用途に合わせて指定します。
このボタンは文字レイヤー1つで作るため、部品同士の間隔は寸法に影響しません。アイコンを追加した場合は、文字とアイコンの間隔も必要です。パディングは外枠と内側の余白、間隔は部品同士の距離という違いがあります。
2．文字を長くして追従を確認する
2026年10月3日、ブラウザー版Figma Designの日本語UIで上記の設定を確認しました。タイポグラフィ欄はInter・Regular・12pxでした。日本語の表示に使われるフォントの違いなどで寸法は変わるため、以下はこの検証環境での値です。
文字を「無料素材をダウンロード」に変更すると、左右20・上下12の余白を保持し、親フレームの幅が136から172へ変わりました。高さは39のままでした。
| 項目 | 変更前 | 変更後 |
|---|---|---|
| ラベル | 無料ダウンロード | 無料素材をダウンロード |
| 文字の幅 | 96 | 132 |
| 親フレームの幅 | 136 | 172 |
| 親フレームの高さ | 39 | 39 |
| 左右／上下の余白 | 20／12 | 20／12 |
この例では、親の幅は「文字の幅＋20＋20」、高さは「文字の高さ15＋12＋12」です。キャンバスの表示倍率は200%ですが、右パネルの136や172は表示倍率を掛ける前のデザイン寸法です。
ボタンの形から作り始めたい場合は、無料のFigmaボタン素材も利用できます。配布見本の構造はそれぞれ異なるため、必要なレイヤーを選んでから設定してください。
カードは親の幅を決め、本文をFillにする
以下は公式仕様に基づく設定例です。上の実測ボタンとは異なり、カード全体の実測結果を示すものではありません。
たとえば、見出し・本文・ボタンを縦に並べたカードなら、外側の幅を320に固定し、高さをHugにします。余白は上下左右16、部品間の間隔は12から調整します。この数値は練習用で、すべてのデザインの推奨値ではありません。
| 選択するレイヤー | 幅 | 高さ | 理由 |
|---|---|---|---|
| カードの親フレーム | Fixed 320 | Hug | 横幅を基準にし、内容の増減を高さに反映 |
| 見出し・本文の文字 | Fill | 内容に応じて伸びる設定 | 親の内側の幅で折り返す |
| 小さなアイコン | Fixed | Fixed | 文字量で変形させない |
| 内容に追従するボタン | Hug | Hug | ラベルと余白を基準にする |
| 幅いっぱいのボタン | Fill | Hug | カードの内側の幅に合わせる |
親の幅を320から390へ変え、本文とFillの部品が追従するか確認します。その後、本文を長くして、カードの高さが伸びるかを確認します。幅の変更と文字量の変更を同時に行うと、崩れた原因を分けにくくなります。
親の幅をHug、子の幅をFillにすると、同じ軸で「子から親を決める」と「親から子を決める」が重なります。Fillへ変更したときに親がFixedへ変わることもあるため、子だけでなく親の設定も確認してください。サイズ調整の公式説明
折り返しとグリッドを選び分ける
タグのように、順番を保ちながら空き幅に応じて次の行へ送る場合は、水平フローで折り返しを使います。親の幅を決め、各タグをHugにして、横と縦の間隔を設定します。現行仕様では垂直フローの折り返しもあり、高さを基準に次の列へ移ります。水平・垂直フローの公式説明
列と行を指定したカード一覧やダッシュボードなら、グリッドフローを検討します。グリッドはセルと行・列を持ち、複数セルをまたぐ配置にも対応します。デザイン上の補助線であるレイアウトガイドのグリッドとは別機能です。グリッドフローの公式説明
崩れたときは選択・親子・幅の順に確認する
| 症状 | 確認する場所 | 対処の方向 |
|---|---|---|
| 文字を変えてもボタンが広がらない | 親の幅、文字のサイズ調整 | 親をHugにし、文字の固定幅が不要か確認 |
| 親を広げても本文が広がらない | 子の幅、親のオートレイアウト | 子をFillにする。親子関係も確認 |
| Fillの選択肢がない | 選択レイヤーの親 | オートレイアウトの子を選んでいるか確認 |
| 文字が切れる | 文字の固定高さ、最大高さ、行数、コンテンツを隠す | 折り返しと高さの設定を確認 |
| バッジが並びの中へ入る | 子のオートレイアウトを無視 | 例外配置が必要な部品だけをフローから外す |
| 余白を変えたのに位置が動かない | 選択した階層 | 外側と内側のフレームを選び分ける |
「オートレイアウトを無視」は、以前の絶対配置に相当する設定です。閉じるアイコンなどを特定位置に置く用途がありますが、通常のフローから外れるため、親をリサイズしたときの位置も確認します。
部品を再利用する前に試すこと
短いラベル・長いラベル、狭い幅・広い幅、本文1行・複数行で確認してからコンポーネント化します。オートレイアウトを設定しただけで、WebサイトのCSSや実際のレスポンシブ表示が完成するわけではありません。実装時の動作は別に確認してください。
基本操作から復習する場合はFigmaの入門ガイドへ、画面の移動を確認する場合はプロトタイプの作り方へ進めます。