Extract variable rest api

[origami-z]

Demonstrate the workflow to extract variables from Figma REST API, then use StyleDictionary to generate cross-platform style output (with some modification of data detailed below).

Below 2 env variables are needed for the code to run (in .env file)

• FIGMA_FILE_ID, click the share button in Figma, get the id after /file/
• FIGMA_ACCESS_TOKEN, see Figma doc to generate

The script (src/index.js) covers:

1. Get data from REST API callFigmaAPI (requires FIGMA_FILE_ID and FIGMA_ACCESS_TOKEN present as env variables) or load from a local cached version loadLocalMockData
2. updateApiResponse filters remote variables and appends "/default" to any variable name which also served as a nested group name (not supported by StyleDictionary mentioned here)
3. writeTokensToFile writes tokens into tokens output folder, which is grouped by each folder and mode names like below

|- Collection 1
  |- Mode 1.json
  |- Mode 2.json
|- Collection 2
|- Collection 3

4. buildUsingStyleDictionary uses style-dictionary-utils to parse token data using design tokens draft spec format and output end result, e.g. CSS variables and iOS Swift file.

Given tokens are grouped in folders (in step 3), common tokens can be consumed and referenced. e.g. If light and dark modes both reference a common color palette (defined in a different collection), both mode build pipelines can consume the same common source.

Previous experiment from Salt: jpmorganchase/salt-ds#58.

Additional notes

#### Style Dictionary

• Couldn't find any documentation around the use of prefix in platform config, but it can be used to prefix DS name, e.g. "salt". See name/cti/kebab in code.
• Default style dictionary attribute (attribute/cti) relies on token name location, likely we will need a different attribute system
• Given "/default" is added to accommodate reference, we should play with a custom transform to remove -default
  • outstanding question: will value referenced be impacted / updated at the same time by using a name transform? Reference css/variables format, when using outputReferences, and doc on Custom format with output references
• Any capital letter in the token name will be converted to a new part, e.g. Grey/600/40A will become var(--grey-600-40-a)