Learn how to use design tokens to assign custom names to colors and character styles.

You can add design tokens in Adobe XD to provide customized common names to colors and character styles that are present in the Assets panel.

design tokens in xd

With design tokens, you don't need to remember long and complex hexadecimal codes and CSS snippets for your assets. You can add simpler names that are easy to recognize. 

After you publish your design spec and share it with other stakeholders, the customized names are visible to them.

 If you do not assign custom variables, Adobe XD automatically creates a unique name and class using the color and character style properties and unnamed prefixes.

Before you proceed

Ensure that:

  • You are familiar with Design Specs and Design Systems.
  • You share the common naming conventions for colors and character styles with your developers.

Create design tokens

You can create design tokens for a new artboard or for an existing artboard where you already added colors and character styles.

 Adobe XD currently does not support renaming of font name, size, or other such properties.

design-mode
A. Color panel B. Double click to add a new name 

In Design mode:

  1. Navigate to the Assets panel. Click + to view the colors and character styles. 
  2. Double-click the default name for the asset and type a new name. The names are used to create corresponding variables and classes for colors and character styles.

 XD automatically creates names for colors and character styles that are not renamed and they typically begin with–unnamed.

Share design tokens

After you create the design tokens, you can share them with the developers through the design specs.

share-design-token
A. In View Setting, choose Development 

In Share mode:

  1. From the View Setting drop-down, choose Development. 
    Ensure that the Export for Web is selected because the link sharing feature is supported only in design spec links that have been exported for web.
  2. Click Create link. Copy the generated link and share it with developers. For more information, see share design prototypes.

To validate the link created in the Share mode, see View design tokens.

 

View design tokens

view-design-tokens
View and inspect design tokens

To view the design tokens in a shared design specs link, open the shared link in a browser and do the following:

  • To view the design token and their hex code, click </>.  The panel displays the corresponding design tokens. Mouse-over the design tokens to view their hex code.
  • To view the variables, click { }

Download design tokens

download design tokens
Download the design tokens

To download the design tokens from a shared design specs link:

  1. Open the shared link in a browser.
  2. Navigate to the CSS code snippets or select the { } icon.
  3. Click Download CSS to download these variables as CSS code snippets that also contain the design tokens.
  4. After you download the snippets, copy and paste them in your implementation code.

Learn more

To learn more about design tokens, watch this video.

Viewing time: 4 minutes


What's next?

We've got you started with creating and sharing your design tokens with your stakeholders. Take a step forward and learn how to inspect design specs.

Have a question or an idea?

ask_community

If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.