Figma tooling

Our Figma libraries contain the latest foundations, components, and patterns for designing and building Atlassian products.

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.

  • Use the newest ADS components, styles, and paint styles with design tokens: Figma libraries (design tokens).

  • Use the legacy ADS foundations and components: Figma libraries (without design tokens).

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

  • Communicate the functionality, hierarchy, and behavior of elements in designs: Accessibility annotations Figma library.

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.

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