Material Design Tokens

Handing over a design project can be hectic, especially when it comes to maintaining consistency across designs. However, Material Design Tokens can make your life as a UI/UX designer easier. They are a set of variables that define the visual properties of your design system, such as color, typography, spacing, and more. In this article, we’ll explore how Material Design Tokens work, and how they can help you create more cohesive and consistent designs.

What are Material Design Tokens?

Material Design Tokens are a set of variables that define the visual properties of your design system. They help maintain consistency across designs and create visual harmony. Tokens can be defined in a JSON file, and each token is given a unique name.

What is JSON and how to use it?

JSON, or JavaScript Object Notation, is a lightweight data interchange format. It is easy for humans to read and write, and easy for machines to parse and generate. In the context of Material Design Tokens, JSON is used to define the values of each token.

JSON uses a key-value pair structure, where each key is a unique name and each value is the data associated with that name. For example, a color token might be defined as follows:

{
  "colors": {
    "primary": "#2196F3"
  }
}

In the example above, “colors” is the name of the token group, and “primary” is the name of the token. The value associated with “primary” is “#2196F3”, which is the hex code for the color blue.

Types of Tokens

There are two types of tokens: Reference Tokens and System Tokens.

Reference Tokens

Reference Tokens refer to a specific value, such as a color or font. They are the building blocks of your design system and are used to define the visual properties of your UI elements. Here’s an example of how Reference Tokens can be defined in a JSON file:

{
  "colors": {
    "primary": "#2196F3",
    "secondary": "#FFC107",
    "accent": "#9C27B0"
  },
  "typography": {
    "fontFamily": "Roboto, sans-serif",
    "fontSize": "14px",
    "lineHeight": "1.5",
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500,
    "fontWeightBold": 700
  },
  "spacing": {
    "unit": 8,
    "small": "4px",
    "medium": "16px",
    "large": "24px"
  }
}

In the example above, we’ve defined three types of tokens: colors, typography, and spacing. Colors are defined with hex codes, typography with font sizes and weights, and spacing with a unit and various size values.

System Tokens

System Tokens are variables that can be used to define Reference Tokens. They provide a way to create consistent values across your design system. For example, if you have a System Token called “spacing.unit,” you can use it to define Reference Tokens for margins, paddings, and other spacing-related properties.

Here’s an example of how System Tokens can be defined in a JSON file:

{
  "spacing": {
    "unit": 8
  }
}

In the example above, “spacing” is the name of the token group, and “unit” is the name of the token. The value associated with “unit” is 8, which is a variable that can be used to define

Reading Token Names

When working with tokens, it’s important to be able to understand their names. Typically, token names consist of two parts: the category and the name. The category describes the type of property being defined (such as color, typography, or spacing), while the name describes the specific value being defined within that category. For example, a color token might be named “color.primary” or a typography token might be named “typography.fontFamily”.

By following this naming convention, it becomes easier to find and use specific tokens within a design system. Additionally, using clear and consistent naming conventions helps ensure that everyone on a design team can easily understand and use the tokens.

Contexts: Different Default Values

Another important feature of Material Design Tokens is the concept of “contexts”. A context is a way to define different default values for a token, depending on the context in which it is being used. For example, a text color might have a different default value when used in a button versus when used in a form field.

To define a context for a token, you can add a suffix to the token name. For example, a button text color might be defined as “color.textButton” while a form field text color might be defined as “color.textInput”. By using contexts, you can ensure that your design system remains consistent and cohesive across different contexts.

Introducing Figma Plugins for Design Tokens

While defining and managing design tokens in a JSON file is a common practice, it can be tedious and time-consuming, especially for larger design systems. That’s where Figma plugins come in. Figma is a popular design tool used by many UI/UX designers, and there are several plugins available that can help streamline the process of defining and using design tokens.

One such plugin is Figma Tokens. This plugin allows you to create and manage design tokens directly in Figma, using a user-friendly interface. With Figma Tokens, you can define colors, typography, spacing, and other design properties, and then use them directly in your Figma designs. The plugin even allows you to export your tokens as CSS or SCSS files, making it easy to use them in your web projects.

To use Figma Tokens, follow these steps:

1. Install the Figma Tokens plugin from the Figma Community.
2. Open your Figma file and select Plugins > Tokens.
3. Create a new token set by clicking the “+” button.
4. Define your tokens by clicking the “+” button next to your token set.
5. Enter the token name, value, and any additional properties.
6. Use your tokens in your Figma designs by clicking the “Insert Token” button in the properties panel.

Conclusion

Material Design Tokens are a powerful tool for creating cohesive and consistent design systems. By defining variables as tokens, you can create a single source of truth for your design system, making it easy to update and maintain over time. Whether you’re a beginner or an experienced designer, Material Design Tokens can help streamline your design process and make your designs more efficient and enjoyable to create. By understanding the types of tokens available, how to use them in a JSON file, and how to manage them using Figma plugins, you can take your design skills to the next level and create stunning designs that are both beautiful and functional.