Design
Panels
Panels are the rectangular surfaces that display 2D (and sometimes stereoscopic) app content in Quest. The default panel size is 1024dp × 640dp, and the minimum panel size is 384dp × 500dp. Panels do not contain any UI elements; they are solely reserved for displaying content. Content should take up the entire panel space, from top to bottom and left to right.
Resources
Download the Meta Horizon OS UI Set in Figma or Unity to start building with customizable, production-ready components.
Design | Open in Figma. Change themes for specific components or entire pages and customize elements to fit your design system. |
Implementation | Download the Meta Interaction SDK (Unity) to use the Meta horizon OS UI Set. Elements are customizable and support multiple input modalities. |
The panel’s title, as well as actions to close, minimize, and enter theater view, will be displayed in the pill-shaped Control Bar that appears when users hover their cursor immediately below the bottom-center edge of the panel.
Usage
Panels can be used in three different configurations: single, hinged, and theater.
- Single panels can be placed anywhere in space and can be moved by grabbing any edge or the Control Bar below the panel. They can also be resized by dragging one of its corners.
- Hinged panels are similar to single panels but consist of two or three panels grouped together. These panels are connected at their left and/or right edges via a “hinge.” A hinge layout can be moved by grabbing a small white line below the hinged layout, called a manipulation handle.
- Theater panels allow users to view a single panel in a focused experience that maximizes content enjoyment. Theater screens are larger, and darken the surrounding immersive or passthrough environment to give visual priority to the content. Panels, both single and hinged, can be converted into theater panels by pressing the expand button in their control bar. The same method returns theater panels to single or hinged panels.
Did you find this page helpful?
Build with Meta
Virtual reality / Meta Horizon
Support and legal
Build with Meta
Virtual reality / Meta Horizon
Support and legal
Build with Meta
Virtual reality / Meta Horizon
Support and legal
English (US)
©2024 Meta