Reference doesn't exist: global.spacing.sm.value tries to reference spacing.xs, which is not defined

[josefie]

Describe the bug
References are not resolved in style-dictionary, when using multiple token sets.
Maybe a duplicate of #480

To Reproduce
Steps to reproduce the behavior:

1. Create multiple token sets
2. Reference another token, e.g. {spacing.xs}
3. Select "Export"
4. Check the box "All token sets"
5. Use the exported token.json in style-dictionary
6. It outputs the error: "Reference doesn't exist: global.spacing.sm.value tries to reference spacing.xs, which is not defined"

Expected behavior

1. Either the export should include the token set name in front of each reference so that style-dictionary can resolve the references correctly
2. Or Figma Tokens should be able to resolve the references including the token set name (e.g. {global.spacing.xs})

Screenshots or Screencasts
When using the full reference (including the token set name), the references are broken.

Example JSON export

{
  "global": {
    "spacing": {
      "scale": {
        "value": "2",
        "type": "spacing"
      },
      "xs": {
        "value": "4",
        "type": "spacing"
      },
      "sm": {
        "value": "{spacing.xs} * {spacing.scale}",
        "type": "spacing"
      },
      "md": {
        "value": "{spacing.sm} * {spacing.scale}",
        "type": "spacing"
      },
      "lg": {
        "value": "{spacing.md} * {spacing.scale}",
        "type": "spacing"
      },
      "xl": {
        "value": "{spacing.lg} * {spacing.scale}",
        "type": "spacing"
      }
    }
  }
}

[six7]

Think of token sets as files in style dictionary. The filename is never part of the token name.

To use it correctly with style dictionary, in your JSON the "global" should not be there, instead the filename would be "global". To export all token sets you'd need to split the output object into multiple files. We'll introduce a way to export to multiple files to make that a seamless experience.

[apart-edgar]

Hi @six7,

First of all, thank you for all the good work you put into this Plugin. This is pushing forward the community building and thinking Design Systems worldwide!

Now, allow me to re-open this thread as I am falling into this problem myself.

If I follow your recommendation I can't make the Style Dictionary build to work because my Token Key names does not include the file name or Token Set name.

The problem is that the way Tokens are referenced between Token Sets in the Figma plugin is not reflected after the Tokens are exported. At export, we have to manage the Token Set level that is not reflected in the name of Token Reference in the Plugin (either as the file name if we export Token Sets individually or as the Token Set levels in the JSON file if we export All Token Sets at once). Let me explain below:

Explanations

Here is an example if you want to reproduce the situation.

In the Figma Tokens Plugin, my Tokens are organized around 2 Token Sets:

• core: lists all the private tokens I'll need for my public tokens
• public: lists all the public tokens that reference private tokens from the Core Token Set

As described in your Token Set documentation, this allows us to "semantically separate tokens".

A Core Token could be for example: color.white

{
   "core": {
      "color": {
         "white": {
            "value": "#ffffff"
            }
         }
    }
}

A Public Token that references this Core Token could be for example: color.primary

{
   "public": {
      "color": {
         "primary": {
            "value": "{color.white}"
            }
         }
    }
}

To use this token as a reference for a Public Token in the Figma Plugin I would use {color.white} but the path to this value in Style Dictionary would be core.color.white. It doesn't matter if I export All Token Sets or Token Sets individually the Style Dictionary build would not work because token references can't be found. The Token Set level has to be managed at some point.

Examples

Style Dictionary using the All Token Sets export

The exported file looks like this:

// tokens.json
{
   "core": {
      "color": {
         "white": {
            "value": "#ffffff"
            }
         }
    }
   "public": {
      "color": {
         "primary": {
            "value": "{color.white}"
            }
         }
    }
}

Result: Style Dictionary can't find {color.white} because it should be looking for {core.color.white} instead.

Style Dictionary exporting Token Sets as individual files

// core.json (using the Token Set name as the filename and excluding it at the JSON level like you recommend)
{
   "color": {
      "white": {
         "value": "#ffffff"
        }
    }
}

// public.json (using the Token Set name as the filename and excluding it at the JSON level like you recommend)
{
   "color": {
      "primary": {
         "value": "{color.white}"
        }
    }
}

Result: Style Dictionary can't find {color.white} because it should be looking for {core.color.white} instead.

---

The only workaround I found is to:

• Rename my Core Token Set by "private"
• Prefix all the Tokens name in my Private Token Set with .core
• And finally, export Token Sets individually to have the right token name path for references to work during the Style Dictionary build.

This workaround prevents me from using the All Token Sets file (the file used as the single source of truth in sync with Github or JSONbin) because the reference path to the core Tokens would be {core.token-name} in place of {private.core.token-name}. In the All Token Sets export, the Token Set is automatically used as a level to structure the JSON but is not in the nomenclature used to reference tokens in the Figma Plugin.

Look forward to having your opinion on that.

Cheers!

[jam-awake]

@apart-edgar you may want to read through the thread starting with this comment: #703 (comment)

In short, your pipeline should be "export" -> token-transformer for each token set -> style-dictionary.

[apart-edgar]

Hi @jam-awake,

Thank you for your quick reply and the solution!

I've written my own documentation if this can help anyone in the future.

https://github.com/apart-edgar/figma-tokens-with-style-dictionary

[jam-awake]

Nice.
And just to clarify, I tried using the "Export -> token-transformer -> style-dictionary" approach. However, I ran into issues with the typography tokens and some token referencing. My conclusion was that this approach works for some use cases, but not all. Unfortunately, it didn't work for my use case. So, I ended up replacing the "Export -> token-transformer -> style-dictionary" approach with a tool I wrote in PureScript in the meantime.

[apart-edgar]

Hmmm, interesting. Thank you for your feedback!

I might be confronted with some difficulties soon too as I was only focusing on making a basic Style Dictionary build to work. I did not really start to use variables, build mixins or transform CSS property values yet.

I'll update my documentation in case I run into some issues.