Member-only story
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
