My Figma variable collections are being embedded in "value", which are not accepted by style-dictionary

[JeroenRoodIHS]

Given a library of variables in Figma which consists of a few collections that reference one another to set up a hierarchy resembling the structure of reference > semantics > component (context below), I am running in an issue with the output. It is not accepted by style-dictionary.

I get a few similar errors like the one quoted below. I'd like to find out what is causing this, and with that, try to resolve it. However, I have trouble understanding what is going on here. For brevity's sake, I would like to focus on one of the issues outputted by style-dictionary:

Property Reference Errors:
Reference doesn't exist: variables.sem-brand-primaries.light.kc.brig-color-background-primary.value tries to reference sem-themed-colors.light.app-themes.brig-color-theme-background-blue, which is not defined

The thing is, sem-themed-colors.value.light.app-themes.brig-color-theme-background-blue, as referenced, exists under sem-themed-colors.value.light.app-themes.brig-color-theme-background-blue. Though that I have read that style-dictionary should be able to skip "value" keyword when traversing a token structure, this doesn't seem to be the case here.

I am not sure wherein the problem lies: is it how I structured my variables in Figma? How I setup up the JSON export of the tokens? Or maybe I need to perform additional actions when importing the tokens JSON into style-dictionary?

---

Context

To provide some context, Here is one example aliased variables in this structure:

On the left, you see a variable that references another variable with a few modes (intended for adapting to semantic statuses), which references "base" variables that serve the purpose of being design options (right-most list of variables).

Additional resources

• A copy of the Figma file, containing the variable structure that I use: https://www.figma.com/file/j1pMEiVNIGgIDiL2mIolkf/Brigade-Design-Tokens-(Copy)?type=design&node-id=0-1&mode=design&t=llitLGWEV9oLx9jP-0)
• The actual JSON export: https://pastebin.com/X1dbT3KX

[JeroenRoodIHS]

Soon enough, I learned that the "value" property was due to a misconfiguration in the settings I applied to the design-tokens plugin. However, my problem wasn't solved just yet. Here is how I got it to work. It might be helpful for others, even though it is opinionated to my own situation.

I continued debugging my own tokens setup. I learned that the setup as illustrated above might need some streamlining. I used to have literal tokens like: sem-themed-colors/brig-color-courseStatus-background-fired.

...this doesn't make use of either Figma's, design-token's or Style Dictionary's potential.

Instead, I restructured the literal tokens to groups, which basically is what I was trying to do initially: sem/background/courseState/fired.

...the latter exports into a more sensible JSON structure, which can be used by Style Dictionary after all. As it turns out, in my naming convention, I was doing the grunt work that Style Dictionary is intended to do. Restructuring the tokens into token groups inside Figma simplified my debugging process.

What I actually had to do to resolve my issue, was to play nice with the exported JSON according to my own preferences. Since I selected font styles, effects and Figma Variables, I got the top-level JSON properties "font", "effect" and "variables". Since the alias variables reference from within the context of the property "variables", any alias token reference could not be resolved, as the absolute reference would miss the top-level parent property "variables". So before I could actually work with Style Dictionary, I processed my variables as such:

let reshapedTokens = {
  ...tokens.effect, // putting shadows and blur effects on the top level
  font : tokens.font, // leaving font properties in their "font" group
  ...tokens.variables // putting my structure of variables on the top level (e.g. a tiered layout like "base", "sem", "comp")
}

This resolved the issue with references not resolving correctly in Style Dictionary.