By Matt 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 colors 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 color 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 create more efficiency in the handoff of colors 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, color. Colors can be defined in different ways, with the most common types in development being hex codes and RGB. When these colors are defined in code, they render the appropriate color for an element. However, when a color changes in the system, say the main blue color 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 color once, and using the token (i.e. --primary-blue) everywhere that the color is defined in code. This means, that when the blue color 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, colors and character styles are named with their properties.
Double-clicking on an asset name will enable editing for that field. Simply rename the color 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 color 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 recognized 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. Color names will display to the right of the color swatch in the ‘Appearance’ section, and character style names will appear in the ‘Styles’ section above the type properties. Hovering over a color 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 set up your designs for more efficient communication with development teams and helps put your design in their language.
