Add support for exporting colors from variables definitions in a JSON

[aduuub]

Our design team uses variables (which has been described as the new way of doing things- see the screenshot). It's a way of structuring your colours to use with a variable name with a "light" and "dark" scheme.

It would be great to be able to use this tool with them instead of Figma styles and although it's new, it's the way Figma is apparently going in and to me makes more sense having a single colour e.g. BackgroundDefault instead of BackgroundDefault_light

The API for this is still in beta and is for enterprise customers only. In the short-term, you can use a Figma plugin Variables to JSON to download the variables as JSON and specify a path to the file in the config. Each variable should have a "light" state, but can also include "dark", "lightHC", "darkHC" too.

If you want to provide the JSON yourself, the variables should be in the following format. It supports reading from hex and rgba along with traversing through the folder structures.

{
    "app-tokens": {
        "light": {
            "background-default": {
                "value": "rgba(255, 255, 255, 1)"
            },
            "background-secondary": {
                "value": "#e7134b"
            }
        },
        "dark": {
            "background-default": {
                "value": "rgba(255, 255, 255, 1)"
            },
            "background-secondary": {
                "value": "#e7134b"
            }
        }
    }
}

To use this should specify the following properties in the colors common config

useVariablesFromFileInstead: true
variableFilePath: 'path-to-styles.json'
variableGroupName: 'app-tokens-or-token-group-name'

[alexey1312]

It might be worth adding API support as well?

[markst]

radicool!

[AllDmeat]

Any plans to merge this PR?

[subdan]

Any plans to merge this PR?

FigmaExport already supports exporting colors from variables. See #236

Do you want to import variables from JSON file?

[AllDmeat]

FigmaExport already supports exporting colors from variables. See #236

Great, missed that one. thx