Design Tokens: Creating global, alias and component tokens — Part 2

This is part of design system series, in this 2nd part, we’ll delve into the making global, alias, and component tokens in figma. check part 1 here

Figma currently supports four variable types: color, number, string, and boolean. As of now we are going to create color tokens

Understanding Token Types

Global, alias, and component tokens are what we’ll work with.

Create Tokens in Figma

1. Deselect everything on the Figma canvas.
2. Find “Local Variables” in the right side panel.
3. Click “Create Variable” and select “Color.”

4. Choose a simple name, like “Blue 5” for the blue color palette.

5. Rename the collection, Organize these under a collection named “Global Tokens.”

Automated Token Creation with Tailwind Plugin

Alternatively, you can use the Tailwind plugin to automate color variable creation. Just input the color and click “Create Variables.”

Creating Alias Tokens

1. Create a collection named “Alias Tokens.”
2. Create a color alias token within this collection, like “Primary Brand Color,” inheriting values from global tokens (e.g., “Blue 5”).

Creating Component Tokens

1. Create a collection named “Component Tokens.”
2. Following the established naming convention, create color tokens for components, using values from alias tokens (e.g., “Primary Brand Color”).
3. Based on the naming convention we came up with in previous part. we name the tokens. instead of entering random hex value, call it from alias token for this example we are creating “button background color” token.. means color is coming from alias which is “primary brand color”

By organizing tokens systematically and reusing values, we ensure a cohesive and efficient design process. In the next part we will learn how to use these tokens for components.

Thank you for reading :)