Design System Tokens

What are tokens?

Tokens are the smallest pieces of our Design System. Their primary function is to store UI information that allows for building assets, components and patterns at a sustainable scale while securing consistency across our platforms.

In fact, tokens are a system design encryption method for the purpose of consistency in the product

How to Create Tokens?

There are two ways to create tokens:
The first method: This method is for people who know JSON.
The second method: a plugin called Token Studio, which can be easily outputted and the token can be connected to the figma file.

 "typeface": {
    "desktop": {
      "heading": {
        "h1": {
          "fa":{
            "value": {
              "fontFamily": "{fontfamily.fa}",
              "fontWeight": "{fontweight.bold}",
              "lineHeight": "{lineheight.title}",
              "fontSize": "{fontsize.desktop.h1}",
              "letterSpacing": "{letterspacing.default}",
              "paragraphSpacing": "{paragraphspacing.default}",
              "textDecoration": "{textdecoration.none}"
            },
            "type": "typography"
          },
          "en":{
            "value": {
              "fontFamily": "{fontfamily.en}",
              "fontWeight": "{fontweight.bold}",
              "lineHeight": "{lineheight.title}",
              "fontSize": "{fontsize.desktop.h1}",
              "letterSpacing": "{letterspacing.default}",
              "paragraphSpacing": "{paragraphspacing.default}",
              "textDecoration": "{textdecoration.none}"
            },
            "type": "typography"
          }
        },

Structure fo JASON depends a lot on your product and should be customized for your product, for example, when several products use the same design system and their colors are different in only the component, you should remove the colors from the global layer and for each Product the required values and give them that in this case you need a complex nested structure.

How to communicate with developers about tokens?

You can give the JSON file to the programmer or use a package called style dictionary to generate a series of variables.

--cd-spacing-internal-space-xxs: 0.2rem;
--cd-spacing-internal-space-xs: 0.4rem;
--cd-spacing-internal-space-s: 0.8rem;
--cd-spacing-internal-space-md: 1.2rem;
--cd-spacing-internal-space-lg: 1.6rem;
--cd-spacing-internal-space-xl: 2.4rem;
--cd-spacing-internal-space-xxl: 3.2rem;
--cd-spacing-internal-space-xxxl: 4.8rem;

If you still have questions in this field, you can contact me via email