Log-in required.

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.

Open in New Tab
Arrow icon indicating link goes to an external source
Getting Started
Changelog
Feedback
Fundamentals
Accessibility
Color Palette
Iconography
Interactions
Typography
UI Copy StyleNEW
UX Essentials
Patterns
Authoring FlowsNEW
Content OrganizationNEW
Contextual ToolingNEW
Empty States
Errors and Messaging
Inheritance
Menus and Entries
Overlays
Windows
Components
Button
Color Field
Dropdown
Foldout
Help Box
Label
List View
Multi-column Views
Numeric Field
Object Field
Progress Bar
Radio Button
Scroll View
Search Field
Slider
Tab NEW
Text Field
Toggle
Toolbar
Tooltip
Tree View
Resources
Figma Toolkit  ↗
Icon Library  ↗
Unity Docs ↗
UX Cheatsheet ↗
Getting Started
Changelog
Feedback
Fundamentals
Accessibility
Color Palette
Iconography
Interactions
Typography
UI Copy StyleNEW
UX Essentials
Patterns
Authoring FlowsNEW
Content Organization NEW
Empty States
Errors and Messaging
Inheritance
Menus and Entrance
Overlays
Windows
Components
Button
Color Field
Dropdown
Foldout
Help Box
Label
List View
Multi-column Views
Numeric Field
Object Field
Progress Bar
Radio Button
Scroll View
Search Field
Slider
Tab NEW
Text Field
Toggle
Toolbar
Tooltip
Tree View
Resources
Figma Toolkit  ↗
Icon Library  ↗
Unity Docs ↗
UX Cheatsheet ↗

What are UX Essentials?

The User Experience Essentials is a collection of best style practices, pattern building guidance and UX standards (VPN required), authored specifically for teams working on building Unity Editor experiences.

This collection is designed to help you catch common problems early, so you don’t have to waste time iterating late in the development process.

->

Make a cheatsheet of your own

Click below to make a copy of this collection with checkboxes, and use it as a cheatsheet to test your solutions, catch common problems early and prepare for handover.

Make a copy of UX Essentials ->

Accessibility

Collection of robust accessibility practices for the Editor.

See Accessibility guides
UI does not use color as the only interaction indicator
US-0171
Blue plus sign icon indicating that clicking on this will expand this content
UI meets minimum contrast ratios for accessibility
US-0173
Blue plus sign icon indicating that clicking on this will expand this content
Contrast ratios of opaque or disabled elements are accessible
US-0174
Blue plus sign icon indicating that clicking on this will expand this content
All UI elements are accessible using the keyboard
US-0180
Blue plus sign icon indicating that clicking on this will expand this content
Colors are legible in both light and dark themes
US-0209
Blue plus sign icon indicating that clicking on this will expand this content
Media includes alt text and descriptions
US-0215
Blue plus sign icon indicating that clicking on this will expand this content
Tooltips display contextual help for all UI elements
US-0240
Blue plus sign icon indicating that clicking on this will expand this content
UI localization accounts for text resizing in translated languages
US-0201
Blue plus sign icon indicating that clicking on this will expand this content
UI follows color system in Unity Style Sheet
US-0163
Blue plus sign icon indicating that clicking on this will expand this content
Semantic colors convey common meanings only
US-0166
Blue plus sign icon indicating that clicking on this will expand this content
Color is only used to improve UI usability
US-0169
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon indicating that link goes to a resources page
Accessibility Resources
Icon indicating link goes to a page with foundational content
Keyboarding
Icon indicating link goes to a page with foundational content
Localization

Color

Essential guidance on color usage in the Editor.

UI does not use color as the only interaction indicator
US-0171
Blue plus sign icon indicating that clicking on this will expand this content
Colors are legible in both light and dark themes
US-0209
Blue plus sign icon indicating that clicking on this will expand this content
UI follows color system in Unity Style Sheet
US-0163
Blue plus sign icon indicating that clicking on this will expand this content
Semantic colors convey common meanings only
US-0166
Blue plus sign icon indicating that clicking on this will expand this content
Color is only used to improve UI usability
US-0169
Blue plus sign icon indicating that clicking on this will expand this content
Colors follow the Editor base layer structure system
US-0210
Blue plus sign icon indicating that clicking on this will expand this content
Errors and other feedback states use correct message theming
US-0211
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Color Styles in Figma ->
Icon indicating that link goes to a resources page
Editor themes
Icon indicating link goes to a page with foundational content
Color palette

Empty States

Essential guidance on effectively using empty windows:

Windows with no content use empty states
US-0205
Blue plus sign icon indicating that clicking on this will expand this content
When to disable controls or hide them altogether
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Window states in Figma ->
Icon displaying the Unity logo
Copywriting Style Guide ->

Errors and Messaging

Essential guidance about effective ways of messaging:

Errors and warnings are logged to the Console window
US-0203
Blue plus sign icon indicating that clicking on this will expand this content
“Context” parameter assigns console messages to GameObjects
US-0204
Blue plus sign icon indicating that clicking on this will expand this content
Errors and warnings are relevant, well-written, and actionable
US-0202
Blue plus sign icon indicating that clicking on this will expand this content
Errors and other feedback states use correct message theming
US-0211
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Help Boxes in Figma ->
Icon indicating that the following content refers to a component.
Help Box: When to use
Icon indicating that the following content refers to a component.
Patterns: Errors and Messaging

Icons

Guidance on icon usage in the Editor.

Uses correct Editor icons
US-0220
Blue plus sign icon indicating that clicking on this will expand this content
Uses appropriate Editor icon type and size
US-0221
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon indicating that link goes to an Airtable resource
Icons on Airtable ->
Icon in the shape of the Figma logo indicating Figma content
Icons on Figma ->
Icon indicating link goes to a page with foundational content
Icon color palette

Inheritance

Effective ways of using inheritance and overrides:

Do not use override UI patterns outside of the context of inheritance
Blue plus sign icon indicating that clicking on this will expand this content
Provide in-context hints to show where an inherited value is coming from
Blue plus sign icon indicating that clicking on this will expand this content
Provides in-context hints to show origin of inherited values
US-0321
Blue plus sign icon indicating that clicking on this will expand this content
Uses UI overrides only on objects with inheritance relationships
US-0322
Blue plus sign icon indicating that clicking on this will expand this content

Interactions

Guidance on interaction state and methods in the Editor.

See interaction guides
UI does not use color as the only interaction indicator
US-0171
Blue plus sign icon indicating that clicking on this will expand this content
Sliders, numeric fields, and toggles can be interacted with via their label
Blue plus sign icon indicating that clicking on this will expand this content
When to disable controls or hide them altogether
Blue plus sign icon indicating that clicking on this will expand this content
Only use link labels for opening external applications
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Mouse cursors in Figma ->
Interaction States
Interaction Methods

Labels

Guidance on proper usage of labels.

Sliders, numeric fields, and toggles can be interacted with via their label
Blue plus sign icon indicating that clicking on this will expand this content
Labels do not end with punctuation
US-0213
Blue plus sign icon indicating that clicking on this will expand this content
In Inspector-like windows, input controls should have labels and tooltips
Blue plus sign icon indicating that clicking on this will expand this content
Only use link labels for opening external applications
Blue plus sign icon indicating that clicking on this will expand this content
Action-oriented menu and button labels use verbs
US-0212
Blue plus sign icon indicating that clicking on this will expand this content
Use ellipses ("...") in labels if the action requires additional input
Blue plus sign icon indicating that clicking on this will expand this content
UI uses appropriate font sizes
US-0217
Blue plus sign icon indicating that clicking on this will expand this content
Padding exists between text and other UI elements
US-0218
Blue plus sign icon indicating that clicking on this will expand this content
Text is aligned appropriately
US-0219
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Labels in Figma ->
Icon indicating that the following content refers to a component.
Label: Interaction States

Menus

Best practices to provide access points to contextual actions, items or windows.

When to disable controls or hide them altogether
Blue plus sign icon indicating that clicking on this will expand this content
Provide access points to your feature in predictable locations.
Blue plus sign icon indicating that clicking on this will expand this content
Avoid having more than 2 levels of submenus.
Blue plus sign icon indicating that clicking on this will expand this content
Use divider in context menus to group actions
Blue plus sign icon indicating that clicking on this will expand this content
Action-oriented menu and button labels use verbs
US-0212
Blue plus sign icon indicating that clicking on this will expand this content
Context menu actions are accessible via other access points
Blue plus sign icon indicating that clicking on this will expand this content
Use ellipses ("...") in labels if the action requires additional input
Blue plus sign icon indicating that clicking on this will expand this content
Window titles should match action labels that initiate them
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Menu types in Figma ->

Overlays

Top guidance about using Overlays in the Scene view.

See overlays
Use shortcuts for "Open Overlays Menu" and "Toggle Overlays"
Blue plus sign icon indicating that clicking on this will expand this content
Use the presets to save and reset your overlays
Blue plus sign icon indicating that clicking on this will expand this content
Right-clicking on an overlay header lets you see overlay options
Blue plus sign icon indicating that clicking on this will expand this content
All applicable tools are shown in the Tools overlay
US-0248
Blue plus sign icon indicating that clicking on this will expand this content
Overlays use default visuals and behaviors
US-0249
Blue plus sign icon indicating that clicking on this will expand this content
Tool settings are shown in the Tool Settings overlay
US-0250
Blue plus sign icon indicating that clicking on this will expand this content
Non-GameObjects in the Scene view are selectable through the Tool Context
US-0251
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Overlays in Figma ->
Icon displaying the Unity logo
Overlay content styling ->

Tooltips

Essential guidance on tooltip usage in the Editor.

See tooltips
Tooltips display contextual help for all UI elements
US-0240
Blue plus sign icon indicating that clicking on this will expand this content
In Inspector-like windows, input controls should have labels and tooltips
Blue plus sign icon indicating that clicking on this will expand this content
Tooltips are written in clear, complete sentences
US-0241
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Tooltips in Figma ->
Icon indicating that the following content refers to a component.
Tooltips: When to use
Icon indicating that the following content refers to a component.
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
US-0201
Blue plus sign icon indicating that clicking on this will expand this content
Only use link labels for opening external applications
Blue plus sign icon indicating that clicking on this will expand this content
All UI elements use the appropriate font
US-0216
Blue plus sign icon indicating that clicking on this will expand this content
UI uses appropriate font sizes
US-0217
Blue plus sign icon indicating that clicking on this will expand this content
Padding exists between text and other UI elements
US-0218
Blue plus sign icon indicating that clicking on this will expand this content
Text is aligned appropriately
US-0219
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Text Styles in Figma ->
Icon indicating that link goes to content about typography
Typography: Alignment
Icon indicating that link goes to content about typography
Font stack by OS

Windows

Essential guidance about windows in the Editor.

Windows with no content use empty states
US-0205
Blue plus sign icon indicating that clicking on this will expand this content
Window titles should match action labels that initiate them
Blue plus sign icon indicating that clicking on this will expand this content
Adapt your content layout for various window sizes
Blue plus sign icon indicating that clicking on this will expand this content
Dockable windows include tabs and window menus
Blue plus sign icon indicating that clicking on this will expand this content
Dockable windows remain functional through Editor restarts
Blue plus sign icon indicating that clicking on this will expand this content
The interface should support the set min and max sizes of the window
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Icon in the shape of the Figma logo indicating Figma content
Windows in Figma ->
Icon displaying the Unity logo
Create a custom Editor window ->
Icon displaying the Unity logo
EditorWindow.Show Scripting API ->
Overview
Make your copy
Accessibility
Color
Empty States
Errors and Messaging
Icons
Inheritance
Interactions
Labels
Menus
Overlays
Tooltips
Typography
Windows
↑ Back to top
"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.

Copyright © 2024 Unity Technologies