Add support for exporting colors from variables definitions in a JSON

aduuub commented 6 months ago

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'