Variables configuration

Learn how to use the command-line interface (CLI) config file to personalize and override the default behavior of the CLI Figma variables generation.

Available variables settings

With your config files, you can override the settings for:

• variables.directoryPath
• variables.collectionsIgnorePrefix
• variables.formats.targets
• variables.formats.colors.format
• variables.formats.numbers.format

To configure and override the default behavior of the CLI commands you use, we recommend you create a zeytal.json file in your project’s root directory.

To learn about the basics of Zeytal’s config files, see the CLI config files docs.

Directory path

Type: string

Default value: ".zeytal/variables"

This is the directory path into which your transformed variables will be written. This path is relative to your root directory.

1
{
2
  "variables": {
3
    "directoryPath": "styles/ds-variables"
4
  }
5
}

In the example above, all the generated variable files will be written into "styles/ds-variables" instead of ".zeytal/variables".

Collections ignore prefix

Type: string

Default value: ""

If set, Figma variable collections starting with the chosen collectionsIgnorePrefix value will be ignored when generating variable files.

1
{
2
  "variables": {
3
    "collectionsIgnorePrefix": "_"
4
  }
5
}

In the example above, all the Figma variable collections prefixed with _ are ignored and won’t be generated.

Output formats

Type: Array<"tw", "ts" | "esm" | "cjs" | "json" | "css" | "scss" | "sass" | "less">

Default value: []

This setting controls the format of your generated variables files.

1
{
2
  "variables": {
3
    "formats": {
4
      "targets": ["tw", "ts"]
5
    }
6
  }
7
}

In the example above, all the extracted Figma variables will be generated into TailwindCSS, and TypeScript files.

For more info about the TailwindCSS config file generation, see the TailwindCSS config docs.

Colors format

Available options: "hex", "rgba", "hsla"

Default value: "hex"

This setting controls the color format in which your color variables are generated.

1
{
2
  "variables": {
3
    "formats": {
4
      "colors": {
5
        "format": "rgba"
6
      }
7
    }
8
  }
9
}

In the example above, all generated color variables will be formatted to rgba.

Numbers format

Type: Array<{ mapping: string[], unit: "px"|"rem" }>

Default value: []

This setting specifies the number format in which some of your number variables will be generated. This is useful for targeting and formatting specific variables, such as font size, letter spacing, line height variables, etc.

Mapping strings:

The mapping property allows you to target specific variables by name through an array of strings. The matching variables will be formatted based on the provided unit.

Unit:

The variables matching your mapping strings will be formatted in the provided unit.

1
{
2
  "variables": {
3
    "formats": {
4
      "numbers": {
5
        "format": [
6
          {
7
            "mapping": ["font-size-", "letter-spacing-", "line-height-"],
8
            "unit": "rem"
9
          }
10
        ]
11
      }
12
    }
13
  }
14
}

In the example above, all generated variables with a name matching font-size-, letter-spacing-, or line-height- will be formatted to rem.

Code example

A complete code example is available in the code examples section of our docs.

Config defaults

1
{
2
  "variables": {
3
    "directoryPath": ".zeytal/variables",
4
    "collectionsIgnorePrefix": "",
5
    "formats": {
6
      "targets": ["ts", "css"],
7
      "colors": {
8
        "format": "hex"
9
      },
10
      "numbers": {
11
        "format": []
12
      }
13
    }
14
  }
15
}