By Matte Rae
W
hen collaborating with development teams, it's often helpful to speak the same language so that communication is clear and understood. Handing off colours and character styles has traditionally been rather cumbersome, as development teams often need to align hex codes and css attributes with variables in the code base to ensure repeatability.
Teams have worked around this in many ways, from printing colour conversion sheets with both the hex value and the variable name or looking up a variable definition within the codebase everytime a design spec is handed over with hex codes defined.
Design tokens in Adobe XD help you to create more efficiency in the handoff of colours and character styles. In this guide we’ll take a look at how to set up your assets in Adobe XD to take advantage of design tokens.
What is a Design Token?
A Design Token or Variable is an entity that houses visual design attributes about an element. On the surface it may look like a label or a simple text string, but on the backend it contains all the vital visual information a system needs to render that element appropriately.
Starting with a simple example, colour. Colours can be defined in different ways, with the most common types in development being hex codes and RGB. When these colours are defined in code, they render the appropriate colour for an element. However, when a colour changes in the system, say the main blue colour for a brand, the hex or RGB value being used must be updated everywhere that it occurs in code. This can be a tedious and error prone process.
Design tokens remove the burden of ‘find and replace’ by defining the colour once and using the token (i.e. --primary-blue) everywhere that the colour is defined in code. This means, that when the blue colour needs to be updated, changing the definition of --primary-blue happens once and propagates everywhere in the design. This saves significant development time and reduces the chance of a value being missed.
Defining design tokens in Adobe XD
In Adobe XD, defining design tokens is as simple as renaming your assets. By default, colours and character styles are named with their properties.
Double-clicking an asset name will enable editing for that field. Simply rename the colour to the appropriate value, i.e. ‘primary-blue’. This is a great time to consult with your engineering team and understand what naming conventions are being used in code to define variables and design tokens. Adobe XD will format your name entry to the appropriate JSON formatting (i.e. --primary-blue) so don’t worry about including the double dash at the front of the name.
Now that your colour assets are defined, the same process can be repeated to character styles in the Assets panel. Double-click a character style and rename it appropriately (i.e. h1-header, subtitle, paragraph) so that it can easily be recognised in the list of tokens.
Sharing design tokens
With assets renamed to match the design tokens, they can be shared to development for consumption. Adobe XD makes sharing these tokens simple and requires no change to the process for sharing specs to development. Simply select the flow you wish to share or deselect the home board to share all screens and select the ‘Development’ option in Share mode.
In the web view, developers will now see a new tab option underneath the View Specs tab called Variables. Selecting this will reveal the full list of design tokens and their definitions. Clicking the ‘Download CSS’ button at the bottom of the page will save this list to a CSS file on your local disc.
Design token names will also appear when an element is selected in the View Specs mode. Colour names will display to the right of the colour swatch in the ‘Appearance’ section and character style names will appear in the ‘Styles’ section above the type properties. Hovering over a colour swatch will reveal the hex code for that token.
Whether you’re building a personal website or a full scale enterprise application, design token variables will save you time and energy as you update styles across the product. Design token support in Adobe XD helps you to set up your designs for more efficient communication with development teams and helps put your design in their language.
