Photo by Monstera from Pexels

UI/UX Design: Tokenized Design

This is a potential game-changer, and you need to know about it

Overview

In all my years of doing this, I have never once heard of this new style of continuous design/development hand-off that is now being referred to as “tokenized design.”

After looking into it further, I believe that it has the potential to be a real game-changer, and today I’m going to share with you what you need to know about it.

What are design tokens?

Based on my research and this awesome article by Robin Rendle here, design tokens are essentially:

A programmatic object that defines the specific parameters of your design system in a global, tech-agnostic fashion.

Mouthful, right? What does it mean?

Basically imagine that ALL of the styles that you define in your design system are encapsulated in one, single source of truth as a markup file, that can generate styles for a wide range of platforms.

{
     "standardSize": {
          "width": "100px",
          "height": "40px"
     },
     "baseColors": {
          "primary": "#6BBAFF",
          "secondary": "#ffb300",
          "dark": "#282828"
     },
     "etc": {
         "etc": "etc"
     }
}

Still confused? Don’t worry, we’ll cover more of this as we move along.

What do design tokens do?

Crucially, design tokens take the work of having to translate CSS/SASS/etc. to multiple design markup formats, and automate the process using technology-agnostic methods.