Variables Theme Creator

Intro

Over the past several years, like many designers, my work primarily revolved around design systems. The love for well-designed and well-executed design systems bloomed gradually, given their potential to transform the workflow of a designer drastically.

However, when Figma announced and implemented design tokens variables during the Config of 2023, the feature was still in beta which meant that some aspects could be further improved.

One of the improvements that I observed was to facilitate the development of new themes based on a design system. That’s why I created “Variables Theme Creator” to assist me and other designers in this task.

Motivation

My inspiration to create this plugin stemmed from my experience at Synaps, where I worked on a multi-brand design system. I had to work on two different products with distinct brand identities that shared the same system. As these brand identities were evolving, updating colors for evolving brand identities was time-consuming. To simplify this, I wanted a solution that facilitates color updates and experiment with colors on interfaces directly through layers.

The plugin

It aims to enhance existing design systems by enabling users to create themes using collections from those systems. I have also added the option to import or export collections from other files to allow designers to generate themes from any design system provided by the community.

Next steps

The plugin is being developed to gradually improve. I have added a new feature that lets users sync a color palette with the current mode, helping basic Figma plan users test colors in their design systems. The goal is to make the plugin a vital tool for designers efficiently testing multibranding and design systems.

If you’re interested to use this don’t hesitate to try it here: Variables Theme Creator