こんにちは！本日のブログ担当です。
デザインを制作していて、「ボタンの文字を変えたら枠線からはみ出た…」「要素を増やしたら、下のパーツを全部手動でずらさなきゃ…」なんて面倒に感じたことはありませんか？
今回は、そんな作業効率を爆上げしてくれるFigmaの大人気機能「オートレイアウト（Auto Layout）」の基本と、最初に躓きやすい設定「内包（Hug）」と「塗り（Fill）」について分かりやすく解説します！
オートレイアウトってなに？
オートレイアウトを一言でいうと、「中の要素（テキストや画像）の変化に合わせて、外枠が自動で伸縮・整列してくれる機能」です。
WebデザインでのCSS（Flexbox）に近い感覚でレイアウトが組めるため、修正に強い柔軟なデザインを作ることができます。
ショートカットキー : Shift + A（要素を選択して押すだけ！）
「内包」と「塗り」の違い
オートレイアウトを使いこなす最大の鍵は、要素の横幅や高さのリサイズ設定にあります。特に重要なのが「内包（Hug）」と「塗り（Fill）」の2つです。
| 設定 | Figmaでの表記 | どんな動き？ | 主な使いどころ |
|---|---|---|---|
| 内包 | Hug contents | 中の要素のサイズに合わせて外枠が伸縮する | ボタン、タグ、テキストボックス |
| 塗り | Fill container | 親枠のサイズに合わせて中の要素が広がる | レスポンシブなカード、見出し、幅いっぱいの画像 |
| 固定 | Fixed | 指定したピクセル数（px）を常に維持する | アイコンサイズ、幅を固定したいエリア |
具体例でイメージしよう！
内包（Hug contents）
「中のコンテンツをぎゅっと抱きしめる（Hug）」イメージ！
例えば、ボタンをオートレイアウトで作成したときに中の要を内包にしておきます。
そうすると、ボタンの中のテキストを「OK」から「アカウント作成はこちら」に書き換えても、テキストの長さに合わせてボタンの横幅が自動でびよーんと伸びてくれます。
塗り（Fill container）
「親枠のスペースを隙間なく埋める（Fill）」イメージ！
こちらはレスポンシブデザインを作成するときに非常に便利です。
外側のフレーム（親）の幅を広げたとき、中の画像や文章の幅も連動して自動で画面いっぱいに広がってくれます。
迷ったらここをチェック！
デザインが思うように動かないときは、「親と子のどっちを基準にサイズを決めたいか」を整理してみましょう。
- 中の文字やパーツに合わせて外枠を動かしたい ➔ 親を「内包（Hug）」
- 外枠の大きさに合わせて中のパーツを動かしたい ➔ 子を「塗り（Fill）」
この基本を押さえるだけでも、修正作業のストレスが激減します！ぜひ普段のFigma作業で使ってみてください！
