Auto Layoutは何をしてくれる？
FigmaのAuto Layoutは、コンテンツの増減やサイズ変化に合わせて要素の位置を自動で整える機能です。カード、ボタン、一覧などを作るときに役立ちます。
まず知っておく4つの要素
- 方向：横、縦、グリッドなど、並び方のルール。
- Gap（間隔）：要素と要素の間の距離。
- Padding（内側余白）：枠と中の内容との距離。
- サイズ設定：中身に合わせるか、決まった幅に合わせるかなど。
作ってみよう：お知らせカード
- テキストを2つ置く（タイトル・説明文）。
- 2つを選択し、
Shift + AでAuto Layoutを追加する。 - 縦方向の配置にし、要素間の間隔を調整する。
- Paddingを設定して背景色と角丸を加える。
- 説明文を長くしても、自然に高さが伸びるか確認する。
よくあるつまずき
- 間隔を調整したのに動かない → 選択中の要素と親フレームを確認する。
- 文章がはみ出す → テキストの幅・リサイズ設定を見直す。
- 要素を自由に重ねたい → Auto Layout内の絶対位置などを検討し、本当に必要かも判断する。
ミニ演習
「商品名・説明・価格・購入ボタン」のカードを作り、説明文を2行から5行へ増やしてみてください。必要な余白が保たれるかが確認ポイントです。