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.

What is the UI Set?

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.

Build high-quality UIs with ease

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.

Achieve consistent input and interaction support

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.

Customize with your own brand identity

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

Where to find UI Set

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

Start with example scenes

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

UISet

An example scene that shows the entire UI library.

UISetPatterns

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.

UISetExamples

An example scene that can be experienced in the headset.

This scene can be imported through Package Manager.

List of components

Buttons: Primary, Secondary, Borderless, Destructive, Tile, Shelf

Sliders: Small, Medium, Large

Controls: Toggle switch, Checkbox, Radio

Dropdown: Single line, double line, Icon and text

Tooltip

Text input field, Search bar

Dialogs: Single button, double buttons, With image/video

Unity canvas UI

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.

Structure of the UI components

UI Backplate

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

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.

Color and scale changes with Animator

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.

Animator Layers and AimatorOverrideLayerWeigth script

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.

Under Animation panel, you can select an animation clip for speific interaction state and modify color or scale

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.

Image buttons with default animator

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)

Image buttons with modified 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.

Controls

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.

Sliders

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.

Sliders examples and optional components

Text input field, Search bar

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 for more details.

Dialogs

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

Dialog examples with optional configurations

Theme Manager

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:

Image color

TextMeshPro font, text color

Animatior Controllers

List of Tags used in UI Set components to identify various elements

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

Theme

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.

How to build a custom theme

Selecting existing theme file and animations folder

1. Create a new theme
Duplicate one of the existing theme files and animations folder by selecting them and CTRL+D.

Renamed themes and assigned animation controllers

2. Assign new Animator Controllers
In this example, renamed them with suffix _MyTheme to make it easier to distinguish.

3. Assign custom font (optional, Unity’s Liberation Sans assigned by default)
Drag & drop new font file into Unity. Right click font file and Create > Text Mesh Pro > Font Asset. Assign SDF files onto the theme, under Fonts.

4. Update colors
Adjust colors for various components and interaction states.

5. Save theme
Click ‘Save Theme Updates’ button. This updates color schemes in all animation clips.

6. Assign your theme in UIThemeManager
In your scene, add UIThemeManager script to the root of your content that includes all UI elements. Theme will be applied to all UI components under this object. Add your theme. UISet scene is recommended to test out new theme since it allows you easily see the changes in all UI library

7. Apply the theme
Use dropdown to select your theme.

8. Apply the theme on runtime
Call UIThemeManager’s ApplyTheme(int index) function from your button or script to apply a theme.

Unity UI and canvas performance considerations

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

Splitting up canvases to create isolated “islands” for each canvas, separating elements from other canvases.

Nesting canvases, as child canvases maintain their own geometry and batching, isolating content from parent and sibling canvases.

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

To learn about general Unity UI integration with Interaction SDK, see Create UI.

To learn how to interact with a UI via a raycast, see either Add an Interaction with Quick Actions (for Interaction SDK v62+), or Use a Ray Interaction with UI (for legacy versions).

To learn about the components of a Poke interaction, see Poke Interactions.

For an interactive example of raycasting with multiple UI prefabs, see the RayExamples scene.

To learn about the different types of surfaces in Interaction SDK, see Surfaces.

To learn about components that establish the interactable surface area of UI elements, see Surface Patch.

Did you find this page helpful?