v0.3.0 variables2json support!

[d01000100]

After a lot of silence we finally have a new minor release! 🎉 This version now supports parsing variables exported with the Figma plugin variables2json

How to use

1. Declare tokens with variables in a Figma file (You can even use multiple Figma files with variables referring between files!)
2. Open the plugin variables2json and export the variables from all the Figma files your using.
3. Configure the FTE with the .tokens.config.json file like:

{
  "tokenFormat": "variables2json",
  "variableFiles": ["./global-tokens.json", "./component-tokens.json"],
  "outputDir": "./src/styles/tokens",
  "platforms": [
    "css",
    "scss",
    "scssMap",
    "less",
    "js",
    "ts",
    "json"
  ],
  "parsedTokenFile": "./tmp/parsed-variables.json"
}

There are a couple of new fields for the variables2json format:

• variableFiles. Required string | string[]. File or files of exports from variables2json. It receives more than one in the case you are using variables from multiple files. Even if they're alias between files!
• parsedTokensFile: Optional string. Filename and location to write the parsed variables into. They're the data just before entering the StyleDictionary pipeline. Useful when debugging. If undefined, it will be written on a temporary file.

And the inputFile field is not necessary for variables2json format

Why this plugin?

For all the other input formats, I'm using the Figma API to fetch the information I need directly from the Figma File. This is very useful to create automatic pipelines that don't require direct access (or even installing) to Figma.

However, at the time of this version, Figma Variables API is only for Enterprise Accounts, and I don't have access to one. That's why I had to rely on Figma plugins to extract and somewhat parse the variables data. Unfortunately, this makes the process more manual, as it requires someone to open the Figma file(s), run the plugin, save the token file and run the token engine.

I chose variables2json because it exports an easy to process format and the process to export it is straightforward enough. Also, because in cases where you're referencing a file's variables in another file, variables2json doesn't try to resolve it and mantains the name of the connection, which I need.

I was working on a version using the Figma Variable API output, from a brief moment I had access to an Enterprise account. The branch is feature/variables-input and if you have an enterprise account and are willing to check it out and continue the work, I'd be very grateful.

---

Feel free to try it and add any issues if you find any bugs. ¡Enjoy!

---

This discussion was created from the release v0.3.0 variables2json support!.