Get started with UI Builder

The following is the general approach to create UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary in the UI Builder:

1. Open an existing or create a new UI Document (UXML).
2. Drag elements from the Library into the Hierarchy to create your UI hierarchy.
3. Select elements in the Hierarchy or Canvas to access their attributes and style properties in the InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
   See in Glossary.
4. Set per-element attributes like Label Text or Button Tooltip via the Inspector’s Attributes section.
5. Set per-element style properties, including layout and position properties, via the Inspector’s Inline Styles section.
6. When more than one element starts to need the same style properties, add or create a StyleSheet to the UI Document (UXML) using the StyleSheets pane.
7. With an element selected, extract its inline style properties to a StyleSheet via the Inspector’s StyleSheet > Style Class List section by giving it a new style class name and clicking Extract Inlined Styles to New Class.
8. Create additional USS Selectors via the Add new selector… at the top of the StyleSheets pane that override a subset of style properties on a specific set of elements, like a .my-button:hover { color: blue; } selector that sets the color blue on any element that has the class .my-button and the mouse is on top of it.
9. Test your UI by clicking the Preview button in the ViewportThe user’s visible area of an app on their screen.
   See in Glossary’s toolbarA row of buttons and basic controls at the top of the Unity Editor that allows you to interact with the Editor in various ways (e.g. scaling, translation). More info
   See in Glossary to disable Canvas authoring and allow the UI to become interactable (ie. test the :hover styles).
10. Go back to step (2) and save the UI Document (UXML).

Additional resources

• Create and manage UI Documents (UXML)
• Set up the edit-time Canvas
• Runtime UI vs Editor Extension Authoring
• Inline styles vs style sheets