Design

Layouts

Updated: Mar 18, 2026

Responsive layouts ensure that your app displays correctly across different viewport sizes and viewing contexts in Meta Horizon OS. In immersive environments, users can resize panels, switch to theater view, and position content at varying distances—all of which affect how your layout is perceived and used.

A rigid layout that only works at a single size will break when users adjust their workspace to suit their preferences. Designing with flexible, responsive layouts improves usability and creates a consistent experience regardless of how users configure their environment. A well-considered layout strategy serves to:

Ensure content adapts gracefully to different viewport sizes

Maintain readability and usability across viewing distances

Support the spatial flexibility that makes immersive environments powerful

Provide a consistent experience across panel, theater, and immersive views

Best practices

Below are our recommended practices for layouts in an immersive experience.

Design responsive layouts

By default the viewport will be 1024x640dp. The dimensions can be adjusted by the user, so design and build your app responsively so it can be rendered well at a variety of viewport sizes.

Attribute	Width	Height
Default	1024dp	640dp
Minimum	384dp	500dp
Maximum	1440dp	1000dp
Theater View	Will match original panel size

Test at multiple viewport sizes

Users can resize panels in Meta Horizon OS. Test your layout at the minimum (384x500dp), default (1024x640dp), and maximum (1440x1000dp) sizes to ensure your content adapts gracefully.

Consider theater view

In theater view, the panel matches the original panel size. Ensure your layout and content remain legible and well-organized in this expanded viewing context.

Layouts on Quest

Layouts are rendered differently on Quest headsets compared to traditional monitors. The spatial nature of the environment introduces unique considerations for how content is arranged and perceived.

Test your layouts on actual Quest hardware

It is critical to test your layouts on an actual Quest headset. This is the only way to accurately see how your content appears at the intended viewing distances and panel sizes. Iterate on your designs based on how they look inside the headset.

Design for varying viewing distances

In immersive environments, users may view your panels from different distances. Ensure your layout remains readable and well-organized whether the user is viewing up close or from further away.

Using the Meta Horizon OS UI Set

For a consistent and predictable starting point, we recommend using the official Meta Horizon OS UI Set and its associated layout patterns.

Implementation

Below are our recommended ways to implement layouts in an immersive experience.

Resources

Design	Open in Figma⁠. Change themes for specific components or entire pages and customize elements to fit your design system.
Unity	Download the Meta Interaction SDK (Unity) to use the Meta Horizon OS UI Set. Elements are customizable and support multiple input modalities.
Meta Spatial SDK	UI Set Sample⁠: Panel layout examples on GitHub. Spatial 2D panels: Panel sizing and layout for Spatial SDK apps.
Android	Panel sizing: Configure panel dimensions for Android apps on Meta Horizon OS.