With the Tokens Studio plugin, something that is really handy while managing themable components is the ability to add none or null values to fills and strokes. It allows us to keep a variable connected to a component attribute and apply different values per brand theme. For example, we want a border on a button for one theme and no border for another.

Currently with color variables, it’s required to input a color value with a opacity of 0% to create a none variable. A transparent color is a very different output than a null value for our eng partners and our theming framework.

For background, our team pre-processes our figma token/variable outputs through Style Dictionary and have a transform to resolve a “none” string in a color value into each platform’s preferred null value.