UX Essentials

Windows use empty states to onboard and give contextual, introductory information to the user when there is no content to display, and they ensure that new Editor users receive timely, contextual guidance during onboarding.

Pattern: Empty States

When to disable controls or hide them altogether

When a control is disabled, it is slightly transparent and stops receiving input. When a control is hidden, it is no longer in the interface.

‍

When should the controls be disabled:

If the input value of a control is relevant, but not editable, the control should be disabled. For example, a control whose value is automatically determined under some condition should appear disabled if its value might still be used by the component or some other system,
If the control is available under normal circumstances, but isn’t available right now due to an error or event, disable the control to indicate that it exists, but it is disabled. Provide a tooltip explaining the reason for the disabled status.

‍

When should the controls be hidden:

If a control is only active in very rare circumstances, it should be hidden. Don’t show the user a control that can’t be used in most cases,
Hide input controls (e.g., Text Fields, Color Fields or Popups) when the value shown is currently irrelevant and not used,
Buttons should never be hidden, because there is an expectation of persistence for them,‍
When you are hiding controls based on the value of another control, always place the hidden control somewhere below the control that triggers the hiding. Ideally, the hidden control should be on the next line.

Component: Tooltips

Resources and API documentation

Window states in Figma ->

Copywriting Style Guide ->

Interactions

Guidance on interaction state and methods in the Editor.

See interaction guides

UI does not use color as the only interaction indicator

The UI follows color usage guidelines by not using color as the only interaction indicator.

Accessibility: Color Blindness

Sliders, numeric fields, and toggles can be interacted with via their label

Adjustment-based control elements that require fine input, or enable / disable toggles when used alone, can be interacted with their label. This gives users a wider area and finer control to interact with these elements:

Sliders value can also be adjusted through its label by hovering and dragging the cursor left or right. The cursor switches its glyph when positioned over the label to communicate this ability.
Numeric field values can be adjusted the same way as sliders.
Toggles when used alone, can be toggled ON or OFF via clicking on their label.

Interaction Methods

When to disable controls or hide them altogether

When a control is disabled, it is slightly transparent and stops receiving input. When a control is hidden, it is no longer in the interface.

‍

When should the controls be disabled:

If the input value of a control is relevant, but not editable, the control should be disabled. For example, a control whose value is automatically determined under some condition should appear disabled if its value might still be used by the component or some other system,
If the control is available under normal circumstances, but isn’t available right now due to an error or event, disable the control to indicate that it exists, but it is disabled. Provide a tooltip explaining the reason for the disabled status.

‍

When should the controls be hidden:

If a control is only active in very rare circumstances, it should be hidden. Don’t show the user a control that can’t be used in most cases,
Hide input controls (e.g., Text Fields, Color Fields or Popups) when the value shown is currently irrelevant and not used,
Buttons should never be hidden, because there is an expectation of persistence for them,‍
When you are hiding controls based on the value of another control, always place the hidden control somewhere below the control that triggers the hiding. Ideally, the hidden control should be on the next line.

Component: Tooltips

Only use link labels for opening external applications

Blue link labels are reserved for directing users out of the editor. These links are underlined on hover to reduce clutter in windows with a lot of external links.

Do not use underlined links as a default/idle state.

See typography guides ->

Resources and API documentation

Mouse cursors in Figma ->

Interaction States

Interaction Methods

Labels

Guidance on proper usage of labels.

See labels

Sliders, numeric fields, and toggles can be interacted with via their label

Sliders value can also be adjusted through its label by hovering and dragging the cursor left or right. The cursor switches its glyph when positioned over the label to communicate this ability.
Numeric field values can be adjusted the same way as sliders.
Toggles when used alone, can be toggled ON or OFF via clicking on their label.

Interaction Methods

Labels do not end with punctuation

Labels do not end with punctuation such as colons, full stops, or question marks.

Copy style guide ->

In Inspector-like windows, input controls should have labels and tooltips

Labels should be employed for identifying input controls in an interface. In addition, when hovered, labels can display tooltips with useful information about the control, ensuring the user has proper information about its function.

See tooltip ->

Only use link labels for opening external applications

See typography guides ->

Action-oriented menu and button labels use verbs

Menu and button labels that perform actions are:

Verbs or verb phrases that describe the action being performed
Not longer than three words

Copy style guide ->

UI uses appropriate font sizes

UI uses the default font size of 12 px wherever possible.

If a font other than the default size is needed, this is chosen from the options described in the type scale chart.

Typography: Type Scale Charts

Padding exists between text and other UI elements

Padding exists between all text areas and other UI elements to keep the Editor’s interface cohesive and well defined.

Typography: Positioning

Text is aligned appropriately

Text in the Editor is left-aligned in windows, dialogs and components including tabs, dropdowns, and menus.

The only exception is in button labels, which are centered.

Typography: Alignment

Resources and API documentation

Labels in Figma ->

Icon indicating that the following content refers to a component.

Label: Interaction States

Overlays

Top guidance about using Overlays in the Scene view.

See overlays

Use shortcuts for "Open Overlays Menu" and "Toggle Overlays"

Toggling specific Overlays and Presets
‍Press the ` key to show the overlay menu at your mouse cursor, which lists available overlays and allows you to save (or revert to) overlay presets.

Editor Shortcut Manager ->

Use the presets to save and reset your overlays

Clearing your screen
Press CTRL ` to toggle the entire overlay system, allowing you to focus or retain UI when needed.

Right-clicking on an overlay header lets you see overlay options

View each overlay's options
Right-click on an overlay's header to see visual options, such as shape, contents, and styling.

Overlay Menus

Resources and API documentation

Overlays in Figma ->

Overlay content styling ->

Tooltips

Essential guidance on tooltip usage in the Editor.

See tooltips

Tooltips display contextual help for all UI elements

Tooltips display contextual help or information about all user interface (UI) elements when the user’s mouse hovers over that item.

All fields, controls, disabled elements, icons and visual elements without an associated label have a tooltip. These items can include buttons, menu items, and toggles.

When a UI control is disabled, a tooltip clearly explains why the control is disabled and how to enable it.

Component: Tooltips

In Inspector-like windows, input controls should have labels and tooltips

See tooltip ->

Tooltips are written in clear, complete sentences

Tooltips are written in clear, complete sentences and without confusing shorthand, system language, domain jargon, or obscure abbreviations.

Use a period at the end of a tooltip only if it's a complete sentence. If any tooltip has a second sentence, all sentences in the tooltip require a period.

Why is this a standard?

Ensures usability and consistency across Unity products through well-written tooltips that are human-readable, concise, complete, and jargon-free
Ensures tooltip guidance is clear, understandable and useful to novice Editor users

Tooltip content writing best practices

Resources and API documentation

Tooltips in Figma ->

Tooltips: When to use

Content best practices

Typography

Basics of typography and text styling in the Editor.

See typography guides

UI localization accounts for text resizing in translated languages

For responsive UI, the globalization, internationalization and localization process must account for text expansion and contraction in translated languages.

Why is this a standard?

Some languages use more words than others to convey the same message and therefore the localization process accounts for text expansion and contraction in translated languages

Accessibility: Globalization, Internationalization and Localization

Only use link labels for opening external applications

See typography guides ->

All UI elements use the appropriate font

All text in the UI uses the appropriate font. The primary font is “Inter” on every platform.

Secondary font options are available if "Inter" cannot be used. These secondary font options vary by operating system (OS) and are defined by the relevant OS font stack.

Typography: Font Stack by OS

UI uses appropriate font sizes

UI uses the default font size of 12 px wherever possible.

If a font other than the default size is needed, this is chosen from the options described in the type scale chart.

Typography: Type Scale Charts

Padding exists between text and other UI elements

Padding exists between all text areas and other UI elements to keep the Editor’s interface cohesive and well defined.

Typography: Positioning

Text is aligned appropriately

Text in the Editor is left-aligned in windows, dialogs and components including tabs, dropdowns, and menus.

The only exception is in button labels, which are centered.

Typography: Alignment

Resources and API documentation

Text Styles in Figma ->

Icon indicating that link goes to content about typography

Typography: Alignment

Font stack by OS

Windows

Essential guidance about windows in the Editor.

See windowing guides

Windows with no content use empty states

Windows with no displayable content use empty states rather than leaving the window empty.

Empty states are placeholder states that inform the user about the cause of an error or provide helpful links and actions.

Pattern: Empty States

Adapt your content layout for various window sizes

Unity Editor utilizes customizable modular layouts and dockable windows appear in different sizes when docked with other windows in the main app window. Use responsive layouts and consider how your content behaves in different window sizes.

Responsive windows on Figma ->

Dockable windows include tabs and window menus

If your function requires a dockable window, use the default window that has a tab and a window menu, which includes window commands like Collapse All, Lock, Maximize, Close and Add Tab.

API: Default window with a tab

Dockable windows remain functional through Editor restarts

If your function requires persistence through Editor restarts, use the default window. Using the default window serializes the location and size of dockable windows through Editor restarts, saving these attributes into the last-used layout.

Default Windows

The interface should support the set min and max sizes of the window

Most editor windows can be resized whether they are docked or floating. maxSize and minSize variables are used to provide the largest and smallest width and height that is supported.

There should be no horizontal scrolling when the Inspector is at its minimum width of 275px.

Scripting API: EditorWindow.maxSize ->

Resources and API documentation

Windows in Figma ->

Create a custom Editor window ->

EditorWindow.Show Scripting API ->

Legal Privacy Policy Cookies Do Not Sell or Share My Personal Information

Your Privacy Choices (Cookie Settings)

"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.

UX Essentials

What are UX Essentials?

Empty States

Essential guidance on effectively using empty windows.

Resources and API documentation

Interactions

Guidance on interaction state and methods in the Editor.

Resources and API documentation

Labels

Guidance on proper usage of labels.

Resources and API documentation

Overlays

Top guidance about using Overlays in the Scene view.

Resources and API documentation

Tooltips

Essential guidance on tooltip usage in the Editor.

Resources and API documentation

Typography

Basics of typography and text styling in the Editor.

Resources and API documentation

Windows

Essential guidance about windows in the Editor.

Resources and API documentation

Feedback form