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.
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. To get access, see Figma onboarding at Atlassian.
Understand the basics of design tokens before using them in Figma.
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)
Use the legacy ADS colors and components (B100, B200): Figma libraries (current colors)
Atlassian Design Tokens plugin: use this to apply design tokens, swap designs to dark mode, and migrate old Atlassian colors to tokens: Atlassian design tokens Figma plugin
Our newest public Figma libraries use design tokens to apply our new color and spacing systems.
Use the ADS Foundations and ADS Components libraries together to apply our foundations, components, and design tokens.
Cloud apps or 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 or anyone using the old colors (B100, B200), use the libraries without design tokens.
To access these libraries, see figma.com/@atlassian.
Was this page helpful?
We use this feedback to improve our documentation.