[Question] How to make alias/references work in both Style Dictionary and Figma Tokens

[Vanals]

Hi,

I am trying to make an object, used with Style Dictionary, to also work within the Figma Tokens plugin.

As you can see below, the object has some properties, such as inkContrast which values are alias, internal references. So the path starts from the most external property NK-Light to the exact property with the value we need.

This works great in Style Dictionary but when I import this object in Figma Tokens the alias/references are not found. (see image below)

{
  "NK-Light": {
    "color": {
      "inkContrast": {
        "value": "{NK-Light.color.palette.purple100}",
        "type": "color",
        "description": "Headlines or copy where emphasis is needed"
      },
      "palette": {
        "purple100": {
          "value": "#2a205c",
          "type": "color",
          "description": "Purple100"
        },
        "purple200": {
          "value": "##7F00FF",
          "type": "color",
          "description": "Purple100"
        },
        
        


...


}

Full object here

As you can see I do have a few colors with a red circle. This is because they can't be found. Even if the path is correct, and Style Dictionary compiles the output variable correctly, here Figma Tokens, does takes into account Nk-Light and Nk-Dark as a level it is already inside.

So.. if I would change "value": "{NK-Light.color.palette.purple100}", to "value": "{color.palette.purple100}", Then Figma Tokens would find the color, but then I would get an error in Styled Dictionary.

Has anyone had the same issue to overcome? Are there better approaches to take? I am asking also in the Figma Tokens community, but thought worth asking here too!

Thank you.

[dbanksdesign]

@Vanals do you have the expected JSON the Figma Tokens plugin would want for your example? We could then work to see how to translate one to the other. My guess is to write the tokens and references without the 'NK-Light' in there and add it in the end in a custom format, something like:

StyleDictionary.registerFormat({
  name: '',
  formatter: ({ dictionary }) => {
    return JSON.stringify({
      'NK-Light': dictionary.tokens
    }, null, 2);
  }
});

[Ricardo-Oporto]

having the same issue

[six7]

👋 Maker of Figma Tokens chiming in:

I like to think about token sets in Figma Tokens as files in style dictionary, where the file name is also not part of a token name. As @dbanksdesign mentioned, writing without the NK-Light (set name) should solve your issue. You currently need to use the token-transformer package to transform output from the Figma plugin to the input style dictionary needs (which strips away the set keys).

The fact that the plugin currently can't handle multiple files means we have to resort to one giant json, which is a pain (and one I want to fix). I'm currently reworking how sets / themes work and my goal is to make this as seamless as possible to go from FT to SD and vice versa.

[jbltx]

I just encountered the same issue. In my case I use a custom format and the formatter needs a specific way to resolve token values. Basically I would need to register my own custom token value reference resolver.

Here's the input, coming from Figma Tokens:

{
  "global": {
    "components": {
      "button": {
        "primary": {
          "base": {
            "background-color": {
              "value": "{colorTokens.gray-10}",
              "type": "color"
            }
          }
        }
      }
    }
  },
  "dark": {
    "colorTokens": {
      "gray-10": {
        "value": "#000",
        "type": "color"
      }
    }
  },
  "light": {
    "colorTokens": {
      "gray-10": {
        "value": "#FFF",
        "type": "color"
      }
    }
  }
}

And the expected output

{
  "data": {
    "colorStopData": {
      "dark": {
        "colorTokens": {
          "gray-10": "#000"
        }
      },
      "light": {
        "colorTokens": {
          "gray-10": "#FFF"
        }
      }
    },
    "components": {
      "dark": {
        "button": {
          "primary": {
            "states": {
              "default": {
                "background-color": "$colorStopData.dark.colorTokens.gray-10"
              }
            }
          }
        }
      },
      "light": {
        "button": {
          "primary": {
            "states": {
              "default": {
                "background-color": "$colorStopData.light.colorTokens.gray-10"
              }
            }
          }
        }
      }
    }
  }
}

I tried to register a custom transitive value transformer in order to avoid SD to throw value resolution errors when building, but without any success.

Any idea?

[jam-awake]

@jbltx I've been playing around with FIgma Token Plugin's JSON output and Style Dictionary for the past few days. I feel like the way you've set up the tokens in Figma Plugin are backwards. Shouldn't global contain the core colors (e.g. what you have for #000 and #fff and then in dark and light you specify which of those colors is used for the button's primary base background color? In other words, shouldn't global contain primitive design tokens and dark/light contain decision design tokens?

[jbltx]

I agree that I could define #FFF and #000 as reference from properties inside the global set. The problem is more to avoid deduplication of properties. Two ways to fix the problem imply duplicating properties in different sets :

• Add colorTokens.gray-10 with a default value inside the global set, then override it in others sets
• Remove components.button.primary.base.background-color from the global set and add it in light and dark sets.

[mark-nicepants]

I just started playing around with this. And could you guys tell me if this is related?

https://github.com/aloisdeniel/style-dictionary-figma-flutter/issues/2

Thanks in advance

[mark-nicepants]

Nevermind, went a different route for Flutter and created a parser/generator specifically designed for targetting Flutter (https://pub.dev/packages/figma2flutter)