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. To get access, see Figma onboarding at Atlassian.

  • Understand the basics of design tokens before using them in Figma.

Atlassian Figma resources (Atlassians only)

Access our private design system Figma libraries for components, foundations, and styles.

Figma community resources (public)

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.

  • 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.