{"id":3545,"date":"2020-03-05T11:55:39","date_gmt":"2020-03-05T10:55:39","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=3545"},"modified":"2020-03-05T11:55:43","modified_gmt":"2020-03-05T10:55:43","slug":"design-tokens-and-cross-platform-coherence-part-2","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence-part-2\/","title":{"rendered":"Design Tokens and Cross Platform Coherence – Part 2"},"content":{"rendered":"\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. Design Tokens<\/a>
  2. Start Using Style Dictionary<\/a>
  3. What's next?<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    Design tokens bridge the gap between design and development, allowing teams to keep together indivisible pieces of an interface like colors, font-sizes, spaces, animations. Follow this 3-issue mini serie about design tokens and Danny Banks speech at Codemotion Rome 2019.<\/p>\n\n\n\n

    Design Tokens<\/h2>\n\n\n\n

    In the previous issue of this series<\/a> of articles dedicated to design tokens we briefly listed the features that should be offered by a good token design management tool. This tool must be agnostic, structured, and relational. Before going any further and explaining how Style Dictionary, the instrument presented by Danny Banks to Codemotion Rome 2019, works and what it offers, a brief but fundamental in-depth analysis of these characteristics is needed.<\/p>\n\n\n\n

    Since each design token goes to store a specific information, it is particularly effective to structure those tokens following a criterion similar to the one used in biological classification.<\/p>\n\n\n\n

    Biological classification defines taxonomic rank, i.e. the relative level of a group of organisms in a hierarchy. In this way, it is possible to go down to more and more specific levels, starting from the domain and then passing through kingdom, phylum, class, order, family, genus, up to arriving at the single species.<\/p>\n\n\n\n

    In the domain of the (visual and UX) design system can be, therefore, useful to distinguish the realms of “time”, “color”, and “size” and within them create the most appropriate taxonomy for their own purposes. An example of this structure is shown in the image below.<\/p>\n\n\n\n

    \"\"
    Representation of a level-structured taxonomy to identify the background color for a success alert <\/figcaption><\/figure><\/div>\n\n\n\n

    The real effectiveness of a level-structured taxonomy is evident when defining the values of each token through relationships to other tokens. For example, suppose you have 3 different oranges in the reference palette, labeled by the color.core.orange.100<\/code>, color.core.orange.200<\/code>, and color.core.orange.300<\/code> tokens. <\/p>\n\n\n\n

    Given those reference tokens, you can define a color.brand.primary.base<\/code> token that uses the same color as the value stored by the color.core.orange.100<\/code> token and, at the same time, is able to self-describe its role and purpose. This approach helps to define any kind of token for any use, such as for example color.background.button<\/code> and color.font.link<\/code>.  Those specific token can use the value stored or referenced by color.brand.primary.base<\/code> token.<\/p>\n\n\n\n

    It is clear that, by creating the appropriate relationships, it will be sufficient to make changes that will spread throughout the entire chain of relationships.<\/p>\n\n\n\n

    \"\"
    How to manage relationships between tokens with and without semantic meaning <\/figcaption><\/figure><\/div>\n\n\n\n

    Start Using Style Dictionary<\/h2>\n\n\n\n

    Style Dictionary<\/a> is a build system for design tokens. It allows to define and edit style properties once and generate relevant snippets for any platform and language. It can be used as CLI application or as a NodeJS module to extend its feature.<\/p>\n\n\n\n

    Why is it so cool? Keep in mind what we just said about the structural and relational approach to design tokens and let\u2019s see the basic usage example for Style Dictionary.<\/p>\n\n\n\n