How I Structured My Design System Using Figma’s New Variables

I will walk you through how I used Figma’s new variables to create smart Design Tokens for a comprehensive design system in just a few days.

Announced in June 2023, Figma released a series of new features that greatly improves the way we build and use design systems, lowering our dependancy on third-party plugins.

Figma clearly understand the power and success of Design Tokens, and have now made it possible for us to create them using Variables. For a more comprehensive explanation, read Figma’s release notes here.

In this article, I will demonstrate how I’ve organised a design system using these Variables. I will also explain how these Variables will be used throughout my daily design process.

Variable Collections

Collections are Figma’s name for grouping Variables of the same type. This is the main way your Variables will be organised.

I created the following collections of Variables:

• Base Colors
  (edit: Figma suggests naming these ‘Primitive Colors’ or ‘Primitive Tokens’)
• Color Tokens
  (edit: Figma suggests naming these ‘Semantic Colors’ or ‘Semantic Tokens’)
• Number Tokens
• Devices

Color Variables

Creating Variables for color styles allows us to style components in a smart way, making the most of the capabilities of Variables.

The Relationship Between Base Colors and Color Tokens

To create Variables that resemble the structure of design tokens, I’ve create two collections:

1. Base Colors: Defining the Hexadecimal color value (#123456) of all of the colors in your team’s color palette.
2. Color Tokens: Defining the semantic colors / use cases that will be used to style objects and components.

Base Colors