Design Tokens with Token Wizard

Design Tokens Sample Image

What is this Design Token?

Design Tokens are essentially a set of variables or key-value pairs that define design properties such as colors, typography, spacing, and more. Design tokens provide a common language for designers and developers to use when creating and implementing design elements in digital products, making it easier to maintain a consistent visual style across different platforms and devices.

Using design tokens offers several important benefits for design systems and the development of digital products such as consistency, efficiency, scalability, and Reusability.

How Design Tokens should be?

Design tokens should be defined and structured in a way that is clear, organized, and easy to use across design and development teams.

Here are some examples of design tokens:

These tokens are core tokens, they don’t specify any theme…

--blue-100: #CAF0F8;
--blue-200: #ADE8F4;
--red-100: #FFCCD5;
--red-200: #FFB3C1;
--yellow-100: #FFDD00;
--yellow-200: #FFD000;
--gray-100: #F8F9FA;
--gray-200: #E9ECEF;

These tokens are color tokens, they can be used for any theme…

--color-primary: #0070FF;
--color-secondary: #FF9900;
--color-background: #F5F5F5;
--color-text: #333333;
--color-error: #FF0000;

These tokens are spacing tokens, they can be used for any theme…

--spacing-padding-small: 8px;
--spacing-padding-medium: 16px;
--spacing-margin-small: 8px;
--spacing-margin-medium: 16px;
--spacing-grid-gutter: 24px;

How do we create Design tokens correct way?

To ensure the proper generation of tokens, it’s advisable to implement an automated script. By doing so, we can easily maintain and generate documentation.

For this, you can write your own script or some library can be used. let’s try to use one of them named **token-wizard.**

Firstly, let's install the library.

npm i token-wizard --save-dev

We will use generateToken() method from token-wizard that also supports typescript and we will define our theme that includes colors, spacing, and typography.

import { generateToken } from "token-wizard";

const tokens = generateToken({
  tokens: {
    blue: {
      900: "#03045E",
      800: "#023E8A",
    },
    red: {
      900: "#590D22",
      800: "#800F2F",
    },
    primary: {
      color: "${this.blue[900]}",
    },
    white: "#ffffff",
  },
});

console.log(tokens.toCss());
/*
{
  '--blue-800': '#023E8A',
  '--blue-900': '#03045E',
  '--red-800': '#800F2F',
  '--red-900': '#590D22',
  '--primary-color': '#03045E',
  '--white': '#ffffff'
}
*/

console.log(tokens.toScss());

/*
{
  '$blue-800': '#023E8A',
  '$blue-900': '#03045E',
  '$red-800': '#800F2F',
  '$red-900': '#590D22',
  '$primary-color': '#03045E',
  '$white': '#ffffff'
}
*/

console.log(tokens.toJS());
/*
{
  blue800: '#023E8A',
  blue900: '#03045E',
  red800: '#800F2F',
  red900: '#590D22',
  primaryColor: '#03045E',
  white: '#ffffff'
}
*/

Also, you can put these tokens in a file that is defined.

tokens.toCss("./tokens.css"); // it will crate a file that name is token.css under :root
tokens.toScss("./tokens.scss"); // it will crate a file that name is token.scss
tokens.toJS("./tokens.js"); // it will crate a file that name is token.js

Until now, the tokens are created by best practice If you want to make the files or tokes more customized you can change the library config like:

import { generateToken } from "token-wizard";

const tokens = generateToken({
  targetCase: "kebab-case", // PascalCase | camelCase | kebab-case | snake_case
  delimeter: "--", // we can use delimeter whatever we want like --, **, __ etc.
  tokens: {
    blue: {
      900: "#03045E",
      800: "#023E8A",
    },
    red: {
      900: "#590D22",
      800: "#800F2F",
    },
    primary: {
      color: "${this.blue[900]}",
    },
    white: "#ffffff",
  },
});

Well, we learned how we create design tokens for our application by using the token wizard. We should this library because the library is updating and the next feature will really game-changer You can follow it in develop branch.

The new features are:

• typescript support
• auto-documentation
• dark and light theme support

References

• **Token wizard**