By Dani Beaumont
With Design Tokens in Adobe XD, you can use a common set of names for colors and character styles in your designs and make them easily accessible to your developer. That way, you can use simple names like “Primary Blue” or “h1 header,” instead of having to remember hex codes and CSS attributes.
Simply tag your assets in the Layers panel, and when your work is published as a Design Spec, the custom names carry over.
Notice here in the Assets panel I’ve assigned some custom names to my colors. Rather than sticking with the default HEX value I’ve defined these as Primary-Blue, Primary-Red and Primary-Orange.
I’ll leave these other colors with their default name just as a comparison.
In the Character Style area, any names I assign here will be used in their corresponding class definitions.
I’ll go ahead and name these H1 with the family name, H2 and P for paragraph. Next I’ll go ahead and publish this to the web for Development.
Here in the browser when I bring up the Specifications for this artboard, notice I have the named colors towards the bottom, and the named character styles as well.
For any of the colors or fonts I did not name, XD automatically creates a unique class using the character style properties and “unnamed” prefix.
Other colors and character styles used in the design and not added to the Assets panel, will be treated as usual and not have tokens created for them.
I encourage you to give Design Tokens a try in your next XD developer handoff.
Make sure everyone has a common frame of reference. Add custom names to colors and character styles in your design, then share them with developers in Design Specs. Design Tokens let you to add descriptive variable names to your assets. Designers and developers can communicate more efficiently. Your XD developer handoff references project assets by name for easy identification.
