Use tokens in design
Design using tokens in Figma and preview new colors and tokens in apps.Understand how to use design tokens when applying our foundations in your designs.
Before you begin
Make sure you understand the basics of design tokens.
Using tokens in Figma
Get access to our Figma libraries with design tokens built-in as styles and in components. Access Figma libraries.
Install and use the Atlassian Design Tokens Figma plugin to simplify finding and applying Atlassian design tokens in your designs.
(Atlassian employees only) Use the Figma plugin convert old design files to use design tokens, and to convert your designs to dark mode.
Review tokens and styles in your app
View new colors and styles in your app during migration using the Chrome plugin (Atlassians only).
New colors and other values won’t be visible until each app officially releases their changes when after testing is complete. The chrome plugin allows you to view the latest tokens behind the scenes during testing.
What's next
- Search all of our available design tokens and their descriptions in all tokens.
- For extra help choosing the right token, use our Token picker.
- Review new usage guidance in our color, elevation, and spacing foundations.
- Check out our design tokens onboarding video resources (for Atlassians only).
Get help
- Atlassians can get help with tokens in Slack.
- For general help with the Atlassian Design system, contact us.