Using ADG and AUI
We at Atlassian provide a toolkit to help you create beautiful features for our products. The toolkit combines the Atlassian Design Guidelines (ADG) and the Atlassian User Interface (AUI) library. The two work harmoniously together to provide a set of tools for you.
Atlassian Design Guidelines (ADG)
The ADG guides you on how your feature should behave and how it should look. You should reference the ADG in your conceptual phases to figure out:
- which components or patterns you can use in your add-on
- how your add-on components should interact
- how to arrange your components on the screen
- which visual attributes such as colors, font sizes, etc. work best
The guidelines were developed by Atlassian's own design team. Following the ADG will make your feature more familiar to users, easier to use and harmonious with the Atlassian product family.
Atlassian User Interface (AUI) library
The AUI library is cross-product compatible. This means that JIRA, Bitbucket, Confluence and all other Atlassian hosted applications use the same AUI library to create a dropdown or label. There may be instances where a product-specific API provides extra or different functionality.
Where to go next
If you have never built a plugin, make sure you have installed the SDK and worked through Set up the Atlassian Plugin SDK and Build a Project. If you are familiar with the SDK but want to learn more about AUI, start with the Getting started with AUI tutorial in this space.