Design
Explore design guidelines, and access Figma libraries and plugins.
How designers use and access the design system
Atlassian Design System (ADS) is the core system that powers Atlassian app user interfaces. Most designers use ADS alongside team UI Kit Figma libraries and documentation (for example, Confluence Cloud UI Kit).
ADS is the basis of pattern libraries used by multiple teams (for example, AI pattern library). You can find additional components in Atlaskit that teams have built specifically for their apps, like Confluence Editor.
Access Atlassian's foundations and components
Follow our guidelines on foundations, components, and content to create harmonious experiences across our apps.
Foundations
Create engaging user experiences with foundations. These include our tokens, guidelines, and visual styles: color, spacing, typography, and more.
Components
Combine reusable building blocks to meet specific interaction needs and create consistent user experiences.
Content
Follow content guidance on our voice and tone, language and grammar, inclusive language, Atlassian vocabulary, and date and time.Discover accessibility and voice and tone guidelines
Learn more about accessibility at Atlassian, and how to incorporate the Atlassian voice and tone into your designs.
Access Figma libraries to apply the design system
Use the newest ADS components, foundations, and styles in our Figma libraries.
Figma libraries
Access the latest libraries for components, foundations, tokens, and styles.Discover accessibility annotations
Accessibility annotations library
Communicate the functionality, hierarchy, and behavior of elements in designs to engineering partners with accessibility annotations.Use the Figma plugin to apply design tokens
Use the Atlassian design tokens Figma plugin to apply design tokens faster than Figma's native style panel.
Atlassian design tokens Figma plugin
Apply design tokens, swap designs to dark mode, and migrate old Atlassian colors to tokens.Learn more about design tokens
Understand how to use design tokens when applying our foundations in your designs.
Using tokens in design
Design using tokens in Figma and preview new colors and tokens in products.Discover Atlassian training courses and design practices
Get started with Absorb courses about Figma, the design system, and accessible content design. Discover Atlassian design practices that support high-quality design across teams.
Figma at Atlassian
Obtain licenses, and create basic prototypes with interactive components.
The Atlassian Design System
Understand the Atlassian Design System and how it can benefit you and your team.
Accessible content design
Learn about writing accessible content, inclusive language, and testing content for accessibility.Design Hub
Explore the Design Hub for practices, rituals, training and resources.Explore the asset library