Use tokens in design

Design using tokens in Figma and preview new colors and tokens in products.

Understand how to use design tokens when applying our foundations in your designs.

Before you begin

Using tokens in Figma

1. Get access to our Figma libraries with design tokens built-in as styles and in components. Access figma libraries.

2. Install and use the Atlassian Design Tokens Figma plugin to simplify finding and applying Atlassian design tokens in your designs.

A promotional image showcasing the Atlassian Design Tokens Figma plugin. On the left, a screenshot of the plugin interface shows the tokens view with a search field and filters for finding tokens. On the right, another screenshot of the plugin interface shows the token migration view with pairs of matched tokens. A blue icon with a white Atlassian logo is displayed between the two screenshots, representing the plugin's icon.

3. (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 product

View new colors and styles in your product during migration using the Chrome plugin (Atlassians only).

New colors and other values won’t be visible until each product 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

Get help

Was this page helpful?

We use this feedback to improve our documentation.