マテリアル デザインには、XR に適応するコンポーネントとレイアウトが用意されています。既存の マテリアル 3 ライブラリを使用すると、コンポーネントとアダプティブ レイアウトが空間 UI 動作で強化されます。
ナビゲーション レール
NavigationSuiteScaffold を含む Compose レイアウトのナビゲーション レールは、XR Orbiter に自動的に適応します。詳しくは、マテリアル デザイン ガイドラインをご覧ください。
非空間化ナビゲーション レール
空間化された（XR 対応の）ナビゲーション レール
ナビゲーション バー
NavigationSuiteScaffold を含む Compose レイアウトのナビゲーション バーは、XR オービターに自動的に適応します。詳しくは、マテリアル デザイン ガイドラインをご覧ください。
非空間化ナビゲーション バー
空間化された（XR 対応の）ナビゲーション バー
ダイアログ
BasicAlertDialog は XR に適応し、コンポーネントに高度を追加します。
詳しくは、ダイアログとアダプティブ デザインのガイドラインをご覧ください。
空間化されていないダイアログ
空間化された（XR 対応の）ダイアログ
トップ アプリバー
TopAppBar は XR オービターに自動的に適応します。
詳しくは、トップアプリバーとアダプティブ デザインのガイドラインをご覧ください。
空間化されていないトップ アプリバー
空間化された（XR 対応の）トップ アプリバー
XR のリスト / 詳細レイアウト
XR の Compose Material 3 のアダプティブ レイアウトは 1:1 のマッピングで、各ペインは独自の XR 空間パネル内に配置されます。詳しくは、ListDetailPaneScaffold とアダプティブ デザインのガイドラインをご覧ください。
非空間化 ListDetailPaneScaffold
空間化された（XR 対応の）ListDetailPaneScaffold
XR のサポートペイン レイアウト
XR の Compose Material 3 のアダプティブ レイアウトは 1:1 のマッピングで、各ペインは独自の XR 空間パネル内に配置されます。詳しくは、SupportingPaneScaffold とアダプティブ デザインのガイドラインをご覧ください。
空間化されていない SupportingPaneScaffold
空間化された（XR 対応の）SupportingPaneScaffold
Figma 用マテリアル 3 デザインキットで設計を開始する
マテリアル 3 デザイン キットをダウンロードして、始めましょう