Use Atlassian Design System Figma libraries and tools to apply our foundational styles, design tokens, components, and other helpers.
Our newest libraries match 1:1 with the React components developers use, simplifying handoff and implementation.
Before you begin
Anyone with a Figma account can use our community Figma libraries.
Atlassian employees need an account with an Atlassian email address to access our private libraries: Figma onboarding at Atlassian (Atlassians only).
Before using tokens in Figma, understand the basics: Design tokens.
Atlassian Figma resources (Atlassians only)
Access our private design system Figma libraries for components, foundations, and styles.
Use the newest ADS components, styles, and paint styles with design tokens: Figma libraries (design tokens).
Apply design tokens, swap designs to dark mode, and migrate old Atlassian colors to tokens: Atlassian design tokens Figma plugin.
Communicate the functionality, hierarchy, and behavior of elements in designs: Accessibility annotations Figma library.
Use the legacy ADS foundations and components Figma libraries (without design tokens).
Figma community resources (public)
Use the ADS Foundations and ADS Components libraries together to apply our foundations, components, and design tokens: figma.com/@atlassian.
Our newest public Figma libraries use design tokens to apply our color and spacing systems.
Cloud apps
Cloud apps and anyone using our new design tokens system, use our ADS Foundations and ADS Components libraries labelled for `design tokens support`.
Use our Atlassian design tokens Figma plugin with these libraries to help with applying design tokens and dark mode previews.
Data Center apps
Data Center apps and anyone using the old colors (B100, B200), use the libraries without design tokens.