Before you begin

Different libraries or plugins are available depending on whether your experience supports design tokens or not:

Tooling with design tokens

It is essential to understand the basics of design tokens before beginning to use them. Learn more in design tokens.

Figma libraries for Marketplace Partners:

  • ADS Foundations (Beta) - Our colors, grid, and basic visual styles

  • ADS Foundations: Design Tokens (Beta) - Design tokens as Figma paint styles

  • ADS Components (Beta) - All of our UI elements, in both light and dark theme

To access these libraries, see figma.com/@atlassian.

Figma libraries for Atlassian employees:

  • ADS Foundations (Beta) - Our colors, grid, and basic visual styles

  • ADS Foundations: Base Tokens (Beta) - The base color system as Figma paint styles

  • ADS Foundations: Design Tokens (Beta) - Design tokens as Figma paint styles

  • ADS Components (Beta) - All of our UI elements, in both light and dark theme

To access these libraries, see Figma libraries (internal).

Atlassian Design Tokens Figma plugin

Use our new plugin to make working with design tokens and themes inside Figma fast and easy to use. With the plugin, you can:

  • Apply design tokens much faster than Figma's native style panel

  • Get additional information on each design token

  • Migrate from colors like (B300) to design tokens (Atlassian employees only)

  • Preview dark theme within the same project or page

Download the Atlassian Design Tokens Figma plugin

Tooling without design tokens

If you’re using colors that are named B50 or N100, use these libraries. Access the Atlassian Figma libraries for experiences without enabling design tokens:

Figma libraries for Marketplace Partners:

  • ADS Foundations - Our colors, grid, and basic visual styles

  • ADS Components - All of our UI elements, without design tokens

To access these libraries, see figma.com/@atlassian.

Figma libraries for Atlassian employees:

  • ADS Foundations - Our colors, grid, and basic visual styles

  • ADS Components - All of our UI elements, without design tokens

To access these libraries, see Figma libraries (internal).

Need to migrate to design tokens in Figma?

If you need to move your designs from old colors to design tokens, please see our migration guide.

Migration guide

Was this page helpful?

We use this feedback to improve our documentation.