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

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.