This documentation is for a prerelease version of O3DE. Click here to switch to the latest release, or select a version from the dropdown.

Version:

Icon of a magnifying glass.
  Edit on GitHub

IN THIS ARTICLE

Tools UI Developer’s Guide for Open 3D Engine

A banner of the Blue Jay Design System

The Blue Jay Design System is the modular UI framework of Open 3D Engine (O3DE). This guide provides information for developers on the framework and how to use it when developing components, tools, and extensions for O3DE Editor.

This guide includes guidelines and information on the custom Qt widget library, the Qt Control Gallery tool, and a gallery of UI icon assets for O3DE. This guide also provides O3DE brand guidelines and O3DE brand assets that you can incorporate into your own projects.

If you have any questions regarding the Blue Jay Design System or have a suggestion to improve it, you can file an issue with the UI/UX Special Interest Group on GitHub.

Feel like having a chat? Check out our #SIG-UX-UI channel on Discord . The community is always happy to help!

Tools UI Developer’s Guide Contents

TopicDescription
O3DE’s Branding GuidelinesAn overview of O3DE’s branding guidelines, where you can download the logo assets, read about the recommended guidance for brand application, and review the details on our accepted brand colors.
O3DE UI Component Development GuidelinesAn overview of O3DE UI component development and the custom Qt widget library.
O3DE’s Message GuidelinesReference and best practices for O3DE’s UI message components, where you can find specifications, examples, and best practices for different message types, including toasts and dialogs.
O3DE Qt Control Gallery ToolA tool included with O3DE that demonstrates the custom Qt widget library in action. Also includes sample code related to each component.
O3DE UI Component LibraryAn introduction to each UI component in O3DE and guidelines for their usage.
O3DE UI Icon AssetsA library of icon assets used in the O3DE development environment.
TopicDescription
Extend the Editor TutorialsTutorials to extend the O3DE Editor by creating a custom tool Gem with O3DE UI components.
Blue Jay Design System (BJDS) on Figma A Figma library that contains visual and functional building blocks to create consistent designs across O3DE.