--- url: /foundations/xr/design/overview.md description: Resources and guidance for immersive extended reality (XR) devices --- # Design for immersive XR Resources and guidance for immersive extended reality (XR) devices **Overview** · [Interaction](interaction.md) · [Layout](layout.md) · [Accessibility](accessibility.md) ![Design for immersive XR](/assets/d24f9b3f-mrombasj-hero-image.Sz8wMJQe.webp) * Use depth and expanded space to create believable environments * Map interactions, like gaze and gestures, to real-world expectations * Group UI elements on floating [spatial panels](https://developer.android.com/design/ui/xr/guides/spatial-ui#spatial-panels "In Android XR, a spatial panel is a container for UI elements, interactive components, and immersive content.") * Design for comfort to minimize motion sickness and physical strain * Provide feedback through spatial audio, haptics, and visual cues In home space, an XR app can run side by side with other apps, with the real world in the background. In full space, the XR app takes center stage with immersive, spatial capabilities. ## Resources & availability | **Type** | **Resource** | **Status** | | -------------- | -------------------------------------------------------------------------------------------------------------------- | ---------- | | Design | [M3 Design Kit](https://www.figma.com/community/file/1035203688168086460) (Figma) | Available | | | [Android XR immersive design guidelines](https://developer.android.com/design/ui/xr/guides/get-started) | Available | | | [Design for AI glasses](https://developer.android.com/design/ui/ai-glasses) | Available | | Implementation | [Build for Android XR](https://developer.android.com/develop/xr/get-started) | Available | | | [Jetpack XR SDK](https://developer.android.com/develop/xr/jetpack-xr-sdk) | Available | | | [Material Design for XR API reference](https://developer.android.com/jetpack/androidx/releases/xr-compose-material3) | Available | ## Principles ### Use familiar patterns Material components like buttons and menus help people navigate spatial apps with confidence. ![A button opens to show a 3D Material menu.](/assets/3000d46a-moxbsbzn-spatialize_components_10.BBEG7BJq.webp) In XR, a Material menu uses elevation to appear in 3D ### Prioritize comfort Place content in the center of a person’s field of view, and design for different body positions, such as seated, standing, and reclined. ![A person sitting in a chair in an immersive XR environment, with lines marking their field of view.](/assets/d3961178-mowiikrm-03.CAi-Z3-L.webp) Positioning content in a person’s field of view keeps the UI visible and minimizes the need for excessive head or body movement ### Embrace depth Use elevation and 3D models to add volume, create a sense of realism, and spatial understanding. ![A person stands in front of an XR app with 3 curved panels and a 3D shark.](/assets/e0273a7a-mowilveb-04.CP_tbUMd.webp) 3D models can be viewed from all angles and moved with natural interactions ### Design for accessibility Design apps to work with system-level assistive technologies like screen readers, voice commands, and text resizing. Provide large target sizes, support multimodal inputs, and ensure text is legible against any background. ![1 XR settings icon button with labeled target size and offset. 1 microphone icon button with a visible cursor.](/assets/5b1bb851-mowin62l-05.Hjbmvfiz.webp) In XR, icon buttons should have a 56dp target size and 4dp offset ## Material XR components The following Material components are adapted for XR: * [App bars](../components/app-bars.md) * [Dialogs](../components/dialogs.md) * [Navigation bar](../components/nav-bar.md) * [Navigation rail](../components/nav-rail.md) * [Toolbars](../components/toolbars.md) A toolbar’s behavior and placement changes from a 2D to a 3D experience ## XR terms * [3D models](https://developer.android.com/design/ui/xr/guides/3d-content): Digital objects rendered with depth and volume * [Field of view](https://developer.android.com/design/ui/xr/guides/spatial-ui#where-place): The area a person can see without turning their head * [Full space](https://developer.android.com/design/ui/xr/guides/foundations#modes): Android XR’s immersive mode that supports spatial components * [Home space](https://developer.android.com/design/ui/xr/guides/foundations#modes): Compatible with mobile and large screen apps, but doesn’t support spatial components * [Orbiters](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters): Floating elements that control the content within spatial panels, full space only * [Passthrough](https://developer.android.com/design/ui/xr/guides/foundations#give-users): A blended reality where an XR device displays multiple large apps and the user’s physical environment * [Spatial elevation](https://developer.android.com/design/ui/xr/guides/spatial-ui#spatial-elevation): Displays a component above an app on the Z-axis * [Spatial environments](https://developer.android.com/design/ui/xr/guides/environments): The 360° 3D virtual worlds people see in an immersive app * [Spatial panels](https://developer.android.com/design/ui/xr/guides/spatial-ui#spatial-panels): A container for UI elements, interactive components, and immersive content, full space only