Organizing your Content

Screen UI can be used creatively to enhance your projects with a variety of components with intricate placements. As such, your canvas can become cluttered quite quickly. Organizing your components and thinking about some UI considerations for the overall user experience is important.

Anchoring Components

Keeping your Screen UI consistent across different devices is another important aspect of creating a friendly user experience, and the Anchor Pins property setting allows you to do so. Use it to pin your components to specific edges on the screen and adjust their position from that edge. This will ensure they appear in the same area on any phone, regardless of screen size.

Duplicating your Screen UI to other scenes

The components are pinned to the selected edge from their center. You can then use the Position (coords) property to set the X and Y distance of the component from its pinned region. The .GIFs below demonstrate how a pinned component to an edge compared to an unpinned component behaves on different aspect ratios.

Pinned component

Unpinned component

When components are added to the screen layer canvas, their default anchor pin is the center.

Duplicating Screen UI to Scenes

You can easily duplicate your entire Screen UI from one scene to another using the duplicate scene function in the Scene Settings Panel. Your Screen UI components are duplicated to the scene(s) you choose, as well as any property settings they have, such as Actions.

Duplicating your Screen UI to other scenes

Duplicating to a scene that already has Screen UI components will overwrite them. The warning below will appear if you try to do this.

Screen UI component overwrite warning

If you duplicate your 3D scene in AR mode and it also has components in Screen UI mode, it will also be duplicated along with all its properties.


Reset Button

The default reset button for all Designer projects will still appear in Screen UI mode. At the moment it cannot be moved or adjusted. It is recommended you preview your project to confirm your other UI components are not overlapping with it.

Default Reset button on all AR experiences

Photo UI

Both the capture button and the snapshot controls once a snapshot has been taken might interfere with other UI assets.

Snapshot controls once snapshot captured

If you require Photo UI for your experience, it is recommended you enable Photo UI first before adding any other Screen UI assets. Lastly, preview your experience often to make sure your UI assets are not being blocked.

Continue reading our documentation to take a look at some Screen UI example use cases.

Next article: Examples

zapcode branded_zapcode i