Figmaのオートレイアウトでタグやカードを折り返すときは Wrap を使う
要素が増えたときに手で改行位置を直さず、オートレイアウトの Wrap で親幅に合わせて折り返す。タグ一覧・チップ・カードグリッド向き。
どんな問題を解決するか / いつ使うか
タグやフィルターチップ、カードを横に並べていて、個数が変わるたびに改行を手調整しているとき。
やり方
- 並べたい要素を親フレームのオートレイアウト（横方向）に入れる。
- オートレイアウト設定で Wrap をオンにする。
- 親の幅を変えるか、要素を増減して、折り返しと Gap が意図どおりか確認する。
- 1行に収めたい要素だけは別フレームに分けるか、Wrap をオフにした行にする。
実装の Flexbox でいう flex-wrap: wrap に近い。エージェントにFigmaを触らせるときも「タグ行は Wrap」と書いておくと手直しが減る。
注意点
- Wrap と絶対配置・負の Gap を混ぜると挙動が読みにくい。折り返し行はシンプルな横並び＋Gapに保つ。