Figmaのオートレイアウトで負のギャップを使い、重なったアバタースタックを作る
絶対配置を使わず、横並びオートレイアウトのGapをマイナス値にするだけでアバターを重ねる。
どんな問題を解決するか / いつ使うか
「参加者のアイコンが少しずつ重なって並ぶ」UI（アバタースタック／フェイスパイル）。人数が増減しても手で位置調整したくないとき。
やり方
- アバター（円形の画像フレーム）を複数選択し、Shift+A でオートレイアウト化（方向：横）。
- Gap（間隔）に
-8など負の数値を直接入力する。 - 重なりの前後関係はレイヤー順で決まる。左のアバターを手前にしたい場合はオートレイアウトの「Canvas stacking（重ね順）」設定を "First on top" に切り替える。
- 各アバターに背景色と同じ色の2px程度のストローク（外側）を付けると、重なり部分の境界がきれいに見える。
- アバターを追加・削除すれば、スタックが自動で伸び縮みする。
注意点・対応状況
- 投稿によると、2026年時点のFigmaの新しいオートレイアウトでは Gap「Auto」は負にならず、場所が足りないと要素は先頭側に寄るだけで重ならない。重ねたい場合は必ず負の数値を自分で入力する。
- CSSの
gapには負の値が使えないため、実装では2番目以降の要素にmargin-left: -8px（負マージン）を付けて再現する。エンジニアと共有しておく。
出典
- 投稿者: @softlearnhub (Soft Learn Hub)
- 投稿: @softlearnhub · 2026-10-08
- 収集日: 2026-10-09（JST）