My Figma variable collections are being embedded in "value", which are not accepted by style-dictionary #288
-
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 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:
The thing is, 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? ContextTo 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
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Soon enough, I learned that the "value" property was due to a misconfiguration in the settings I applied to the 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: ...this doesn't make use of either Figma's, Instead, I restructured the literal tokens to groups, which basically is what I was trying to do initially: ...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:
This resolved the issue with references not resolving correctly in Style Dictionary. |
Beta Was this translation helpful? Give feedback.
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 in…