Different libraries or plugins are available depending on whether your experience supports design tokens or not:
If you’re using design tokens, see tooling with tokens
If you’re not using design tokens, see tooling without 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
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.
Was this page helpful?
We use this feedback to improve our documentation.