Build a Basic No-Code UI#

When constructing a UI, the first thing you need to do is create is a Frame to hold the contents of the UI. A Frame can displayed in the Viewport or in a Window. In this example we will create a simple UI in to be displayed in the Viewport.

Transcript#

Step 1: Detach the No Code UI Menu#

To make the UI construction more convenient it is recommended that you “tear off” and move to your panel to a convenient location.

  1. Navigate to Create > UI

  2. Select the Top Bar of the Flyout Panel and Drag it to Detach the menu panel.

  3. The menu panel is now floating and you can place it where you want.

Step 2: Add Frames and Buttons#

Adding a base Frame element is critical to any UI. Once a Frame is created, we can then add any containers or other widgets to it. Let’s add a button.

  1. In the UI Flyout Panel, select Frame to create your base Frame.

  2. Make sure the Frame is selected in your Stage.

  3. In the UI Flyout Panel, select Button to add a button widget.

Step 3: Make the UI Visible#

Now, lets enable our Frame so we can see our UI start to take shape.

  1. Select and right-click the Frame in your stage.

  2. Select Viewport Frame from the menu.

The Button will take over the entirety of the viewport, not what we want, but it let’s us verify the Frame is there.

Step 4: Organize your UI with Stacks#

Adding Stacks to allow controlled placement and arrangement of our interface.

  1. Select the Frame in your Stage.

  2. In the UI Flyout Panel, select VStack to add a vertical stack to the Frame.

Step 5: Push Content into Position with Spacers#

Spacers allow us to fill stacks easily with empty space. This is useful for positioning things like Buttons. In our example we will use spacers in the VStack to push our button to the bottom.

  1. Select the VStack in your Stage.

  2. In the UI Flyout Panel, select Spacer to add a Spacer widget.

  3. Repeat above step by selecting Spacer to add a second Spacer.

  4. Select HStack.

  5. In the Stage, click and drag the Button under Frame to the VStack.

Notice how our button is now on the bottom of our vertical stack and occupies the lower third of the screen. The first and second VStack positions are occupied by our Spacers, the last third occupied by our HStack with a Button nested in it.

Step 6: Add More Buttons#

Now we may want to have a row of Buttons. The HStack will allow us to add Buttons horizontally by adding them to the HStack.

  1. Select the Stack in your Stage.

  2. In the UI Flyout Panel, select Button to create another Button in the HStack. Note how the Buttons split the HStack Equally.

  3. Select Button again to create another Button in the HStack. Note how the Buttons continue to split the HStack Equally, Now in thirds.

Step 7: Enable Child ReOrdering#

There will often be times where you wish to reorder child elements in a stack. This is locked by default and reordering must be enabled.

  1. Select the Hamburger Menu in the Top Right of the Stage.

  2. Select Enable Children Reorder

Step 8: Reorder Children to Control Position#

If we wish to adjust the position/placement of items in an HStack or VStack, we can simply drag items to the position we want them. Lets move Button row HStack we created to another position.

  1. In the Stage select and drag the HStack from below the Spacers within the VStack to above the Spacers.

  2. Notice how the Button row moves to the top 1/3 of the viewport.

  3. In the Stage, select and drag the HStack from the above the Spacers in the VStack to between them.

  4. Notice how the Button group centers vertically in the Viewport.

Step 9: Unblock UI Widgets#

By default UI Widgets does not “block” mouse clicks from selecting Prims in the Viewport. In order to block accidental clicks, Stack Containers have the boolean property content_clipping. Enabling this option will make the UI “consume” mouse clicks and prevent any unwanted selection of Prims behind the UI.

  1. Select the HStack in the Stage

  2. Enable Content Clipping in the Properties Panel.

  3. In the Viewport, add a cube or any other non UI element to your stage to test.

At this point you should have created a simple UI using most of the key elements. As some next steps you can try adding other buttons and working to arrange more complex UI layouts.

On this page