By Dani Beaumont
With Design Tokens in Adobe XD, you can use a common set of names for colours 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 customised names carry over.
Notice here in the Assets panel I’ve assigned some customised names to my colours. 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 colours 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 colours towards the bottom and the named character styles as well.
For any of the colours or fonts I did not name, XD automatically creates a unique class using the character style properties and “unnamed” prefix.
Other colours 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 customised names to colours 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.
