Figma「Auto Layout 5.0」の絶対配置：なぜ多くのUIは「崩壊」するのか？——プロが教える設計の急所
UI/UXを語る上で、Auto LayoutはもはやOSの一部だ。だが、多くのチームが「絶対配置（Absolute Position）」を使いこなせていない。安易に使えばレスポンシブの墓場となり、正しく使えば複雑なUIを極限までシンプルに保てる。
今回は、Auto Layout 5.0以降、この機能を武器として使いこなすための「実務直結型」の設計思想を叩き込む。
—
1. 絶対配置：従来の「浮遊」とは何が違うのか
従来のFigmaの絶対配置は、ただ「レイアウトの拘束から逃げる」だけの逃げ場所だった。しかし、Auto Layout 5.0における絶対配置は、「スタック構造の中に存在する例外」として再定義された。
- 従来の挙動: フレーム内での固定位置。親のサイズ変更に追従するだけ。
- 5.0の挙動: Auto Layoutの「計算式」から一時的に除外されつつ、親フレームの座標系を維持する。
最大の設計指針：
絶対配置は「レイアウトを無視するため」ではなく、「コンテンツの増減によるレイアウト計算から、特定の装飾要素を切り離すため」に使う。これこそが、UIのメンテナンス性を劇的に変える哲学だ。
—
2. 実践的ユースケース：なぜ「重なり」は管理不能になるのか
バッジやフローティングボタンを適当な座標に置くのはアマチュアのやり方だ。プロは「アンカー」を意識する。
A. 通知バッジ（Notification Badge）
アイコンの右上にバッジを置く際、`Absolute Position`を使用し、さらに`Constraints`（拘束）を活用せよ。
- コツ: バッジコンポーネント自体をAuto Layoutで組み、パディング（Padding）を適切に設定する。
- 設計の要: アイコンとバッジを一つのフレームに入れ、バッジに`Right`と`Top`の拘束を与える。これにより、アイコンのサイズが変わってもバッジは常に「右上」を死守する。
B. 重なり合うアバターグループ
`Space between`で管理しようとすると、Z-indexの制御で必ず詰む。
- 最適解: 1つ目のアバター以外はすべて「絶対配置」にする。これにより、オートレイアウトの計算負荷を下げつつ、アバターの重なり順をFigmaのレイヤーパネルの順序通りに完璧に固定できる。
—
3. レスポンシブで崩壊させないための「3つの鉄則」
絶対配置を使ったコンポーネントが、ブレイクポイントでズレる原因は「基準点」の不在だ。
1. 「親フレーム」の境界を信じるな:
絶対配置要素のConstraintsは、必ず「親のAuto Layoutフレーム」に対して定義せよ。
2. `Fill Container`との併用禁止:
絶対配置要素に`Fill Container`を適用してはいけない。サイズは固定か、親のサイズに追従するパーセンテージ指定に留めること。
3. プレビュー確認の自動化:
`Shift + A`でフレームを囲み、即座にリサイズして「絶対配置要素が突き抜けないか」を確認する癖をつける。
—
4. 開発効率を最大化する「プロの武装」
隠れたキーボードショートカット
- `Option + A`（Mac）: 選択した要素を即座にAuto Layout化。
- `Shift + Return`: オートレイアウト内の要素を選択中に、親階層へフォーカスを移動。
- `Command + Option + P`: 最後のプラグインを再実行（神速）。
導入必須の「神」プラグイン
- [AutoLayout to Absolute](https://www.figma.com/community/plugin/…): 乱雑に配置された要素を、計算に基づいた絶対配置へ一括変換する。リファクタリングの必需品。
- [Instance Finder](https://www.figma.com/community/plugin/…): 巨大なデザインシステムで、どのインスタンスがどこで使われているかを瞬時に特定する。
—
5. デザインシステムにおける「JSON構成」のベストプラクティス
コンポーネントのプロパティ設計をエンジニアと共有する際、以下の構成を参考にせよ。これはコード（React/VueのProps）への変換を意識したYAML定義だ。
design-system-spec.yaml
component:
name: “NotificationButton”
props:
- name: “hasBadge”
type: “boolean”
description: “バッジの表示制御”
- name: “badgeContent”
type: “string”
description: “バッジ内の数値。99+対応”
layout_strategy:
# 絶対配置要素の仕様定義
absolute_elements:
- name: “Badge”
constraints: { horizontal: right, vertical: top }
offset: { x: -4, y: -4 } # 親フレームからのオフセット
—
最後に：デザイナーとエンジニアの「言語」を統一せよ
絶対配置の崩れは、多くの場合「コミュニケーションのズレ」から生まれる。デザイナーがFigma上で「とりあえずここに置く」と決めた座標は、エンジニアにとっては「なぜこの値なのか？」という負債になる。
「なぜこの要素は絶対配置なのか？」を常に言語化し、デザインシステムの一部としてドキュメント化せよ。
Figmaは単なる描画ツールではない。プロダクトの「ロジック」を定義する場所だ。Auto Layout 5.0という強力なエンジンを、感覚ではなく「計算」で使いこなしてほしい。それができれば、あなたの作るUIは、どんな環境でも崩れない「堅牢なUI」へと進化するはずだ。