This page provides guidance on using the Meta Horizon OS UI Set available in Meta XR Interaction SDK Unity.

For design guides and resources, please refer to Components documentation and UI Set Figma design file available on Meta’s Figma page. To try out the UI Set on your device, you can download the Interaction SDK Samples app and select UI Set from the main menu located on the left side of the scene.

The Meta Horizon OS UI Set is a collection of essential user interface components designed for immersive experiences. It is available for download in both Meta XR Interaction SDK Unity and Figma, allowing for streamlined design and development processes.

By utilizing the UI Set, you can efficiently create widely used user interface patterns, ensuring a consistent and cohesive interaction experience across immersive apps. This enables designers and developers to concentrate on crafting compelling content, without worrying about integrating proper input modalities or visual feedback for various interaction states.

The UI Set supports various input modalities, accommodating both direct and indirect interactions. Empowering users to interact with your UI in their preferred method, whether that’s directly touching the UI or indirectly interacting with hands or controllers.

The UI Set includes built-in theming capabilities, making it easy to integrate your brand identity while maintaining consistent input modality and interaction support.

UI Set is available in Meta XR Interaction SDK Essentials package. When you install Meta XR Interaction SDK package it automatically installs Essentials package together. UI Set folder is located at Packages > Meta XR Interaction SDK Essentials > Runtime > Sample > Objects > UISet

Interaction SDK provides these example scenes to help you jumpstart your UI projects.

An example scene that shows the entire UI library.

Common UI pattern examples built with UI set components.

Due to Unity’s restrictions, example scenes located in the Packages folder cannot be opened directly. To access and modify these scenes, simply drag and drop them into the Assets folder. This will enable you to open and edit the scenes as needed.

An example scene that can be experienced in the headset.

This scene can be imported through Package Manager.

UI Set components are built on Unity UI which uses Canvas. By using Canvas and RectTransform, you can leverage rich layout features - such as Grid, Horizontal, Vertical Layout Group, reflow, anchoring, and margin/padding support - that are crucial for common UI layout scenarios and patterns.

To support various input modalities of Meta Horizon OS, the root container object includes Interaction SDK components such as PokeInteractable, RayInteractable, and PointableCanvas.

To secure legibility of UI and content, UI components should always be displayed on top of a backplate. The UI backplate is using RoundedBoxUIProperties.cs with Unity Image component to achieve rounded corners. Additionally, there is another Image object with a material called MultiGradientUI.mat which provides a subtle gradient effect on the backplate, mixed with the backplate color.

You can use EmptyUIBackplateWithCanvas prefab to get started with UI layout. It contains all necessary components such as Unity canvas, Backplate, PokeInteractable for building UI.

Buttons are made with Unity UI’s Toggle component to support both regular and toggle button functionality. Animator is used to provide visual feedback such as scaling on press and release and color changes. From v74 release, Button prefabs made with Unity UI Button component have been added.

Animator for toggle buttons have additional layer Selected Layer which shows different color for toggle state while performing same scaling animation for pressed state. AimatorOverrideLayerWeigth.cs scipt handles the layer switching between Base Layer and Selected Layer.

You can customize the color or scale of a button’s interaction states by modifying the animation clips. Alternatively, use the Theme Manager to efficiently modify colors across multiple UI components. We’ll explore Theme Manager in more detail in the next section.

If you want to make an image button, you can assign image sprite texture onto the Content > Background > Image’s ‘Source Image’ field. With default animator ToggleButton_Dark, the image would look too dark.

You can duplicate the animator and customize the color for interaction states. In this example, assigned a duplicated animator ImageButton and increased the r, g, b values. To provide different visual feedback for hover and pressed state, still differentiated values a little bit. Below are before (with default ToggleButton_Dark animator) and after (with new ImageButton animator)

The Dropdown component is comprised of two sub-components - DropDownListButton and DropDownList. DropDownListButton works as a toggle button to show and hide the DropDownList which is the collection of the buttons. When DropDownListButton is pressed, it runs CanvasGroupAlphaToggle.cs script’s ToggleVisible() under DropDownList to toggle visiblity. It modifies the Canvas Group’s alpha value to show or hide the child button components.

Toggle Switch, Checkbox, and Radio buttons share a common structure with Toggle buttons, but with distinct visual representations. Notably, Radio buttons are designed for exclusive selection within a group, and are therefore often used in conjunction with Unity UI’s Toggle Group component to manage group behavior.

Three Slider components are available, offering small, medium, and large variants to accommodate different design requirements. Optional components such as text labels and icons can be displayed to suit your specific needs.

Both the Text Input Field and Search Bar components offer the same basic input field functionality, built upon Unity UI’s Text Mesh Pro Input Field. The focus visual elements are dynamically toggled based on the focus state, providing a clear visual indicator of the current interaction.

To use Text input field with system keyboard, check Requires System Keyboard under OVRManager. See System Keyboard Overlay page for more details.

Three variants with different button configurations are provided. Dialogs are constructed with backplate, buttons, and images.

Theme Manager allows you to easily customize the visual design and bring your own brand identity into the UI components through a customizable color palette and font while preserving the core functionality and input interaction quality.

When you add ThemeManager.cs to an object, it searches child objects and reassigns following elements based on Tags:

You can find an example of using ThemeManager in UISet.unity example scene. It contains ThemeManager.cs script in ContentRoot object.

The Theme scriptable object enables you to define style elements, including shared elements like backplate color and text colors, as well as detailed colors for various components and their interaction states. You can think of it as a style sheet. As previously mentioned, since Animators control the color and scale of UI components, they need to be updated to reflect the new theme styles. Conveniently, the Theme inspector features a Save Theme Updates button at the bottom, which updates the Animators accordingly.

You can see the examples of corresponding color palette in Meta Horizon OS Figma file.

The Color Path field describes the hierarchy of the UI object where the color can be updated.

According to Unity’s official documentation, Canvas regeneration and draw calls to the GPU occur when UI Elements change. To optimize performance, Unity recommends:

By implementing these strategies, you can improve UI performance and reduce unnecessary draw calls.

To learn more about Canvas optimization, please visit Optimization tips for Unity UI