Context
When I started designing a Figma wireframe kit (coming soon 😉), I wanted to create multiple themes, each with both dark and light modes. While my initial goal was to make a traditionally black-and-white wireframe kit more playful, I also realized this feature has real-world applications. For example, a premium offering in an airline or hotel booking app could have a distinct UI theme, or a credit card or payment app could dynamically change its theme based on the selected credit card or bank.
We have seen many demos and tutorials of switching between light and dark mode all across the internet. Which can be represented in a 2 dimensional array
But this approach comes with a drawback of maintaining a ton of extra variables and component variants and this list will keep growing each time we introduce a new theme in our product.
I wanted to streamline this implementation which can be represented using a multi-dimensional array
It seemed like a good approach in theory, the question was how do I implement this in figma. With Figma’s variables I was able to add another layer of abstraction in our color system.
Let’s take a look how we can do this
Setup primitive variables
Like any other design system, we start by setting up our primitive colors, including brand colors, neutral colors, and state colors (critical, warning, success, etc.). This process is fairly straightforward all you need to do is add your colors to Figma variables.
Setting up modes
Next, we need to define light and dark modes by setting up Level 1 semantic tokens. Start by creating a new collection called "Modes" and adding your tokens. In this collection, assign colors for both dark and light modes for each theme. To keep things organized, and to keep the naming convention consistent  create a separate group for each theme you want to include. For example, here’s how I structured three essential tokens for a button component.
Tip: If you want to keep your system simple, you can apply these semantic colors directly to your components, and it will work seamlessly. However, to support multiple themes, you'll either need to create separate component sets for each theme or add theme-specific variants to your components
Setting up themes
Now that our Level 1 semantic tokens are set, it's time to define the themes using Level 2 semantic tokens.
Start by creating a new collection called Themes and add any necessary color tokens.However, instead of referencing the primitive colors, reference the variables from the Modes collection.With this step completed, you should now have two different options available in the Figma appearance section
And you’re done,  now you should have the option  of selecting different themes with each having their own dark and light modes.
Hope you enjoyed this experiment with Figma variables. If you want to see this in action here’s an example Figma file
Themes and modes
