Styles configuration

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

Available styles settings

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

• styles.figmaFilesVersion
• styles.directoryPath
• styles.formats.targets
• styles.formats.colors.format
• styles.formats.fonts.usePostscriptFontNames
• styles.formats.fonts.unit
• styles.formats.fonts.relativeLineHeight
• styles.formats.effects.combine
• styles.formats.grids.extractColors

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.

Figma files version

Available options: "published", "saved", "live"

Default value: "live"

When set to "live" your Figma styles will be extracted from the latest live version of your files.

If set to "saved", your styles will be extracted from the last “saved version” in the history of your Figma files.

If set to "published", your styles will be extracted from the last “published version” of your Figma files.

1
{
2
  "styles": {
3
    "figmaFilesVersion": "published"
4
  }
5
}

In the example above, all the generated Figma styles will be extracted from the latest published versions of your Figma files.

Figma files pages batch size

Type: number

Default value: 5

This setting lets you tweak the number of pages that will be fetched at the same time for a given Figma file.

This way, you will be able to load small Figma files without unnecessary delays and huge Figma files without getting a “Request too large” error from Figma’s REST API.

1
{
2
  "assets": {
3
    "figmaFilesPagesBatchSize": 7
4
  }
5
}

Directory path

Type: string

Default value: ".zeytal/styles"

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

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

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

Output formats

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

Default value: []

This setting controls the format of your generated styles files.

1
{
2
  "styles": {
3
    "formats": {
4
      "targets": [
5
        "tw",
6
        "ts",
7
        "esm",
8
        "cjs",
9
        "json",
10
        "css",
11
        "scss",
12
        "sass",
13
        "less"
14
      ]
15
    }
16
  }
17
}

In the example above, all the extracted Figma styles 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 styles are generated.

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

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

Use PostScript font names

Type: boolean

Default value: false

Used to tell the CLI to extract the fontPostScriptName property of your Figma type style instead of its fontFamily property and use it as your generated font style fontName.

1
{
2
  "styles": {
3
    "formats": {
4
      "fonts": {
5
        "usePostscriptFontNames": false
6
      }
7
    }
8
  }
9
}

Fonts unit

Available options: "px", "rem"

Default value: "px"

This setting allow you to choose the unit of your generated font styles fontSize, lineHeight, and letterSpacing values.

1
{
2
  "styles": {
3
    "formats": {
4
      "fonts": {
5
        "unit": "rem"
6
      }
7
    }
8
  }
9
}

In the example above, all generated font styles will be formatted to rem, not px.

Fonts relative line height

Type: boolean

Default value: false

If set to true, the lineHeight value will be unitless and normalized (meaning 1 equals 100%.) Otherwise, it will be set in the same unit as your font unit.

1
{
2
  "styles": {
3
    "formats": {
4
      "fonts": {
5
        "relativeLineHeight": true
6
      }
7
    }
8
  }
9
}

Combine effects

Type: boolean

Default value: true

Choose whether or not to combine effects that belong to the same CSS property.

If set to true, all Figma effects are combined into a single string.

If set to false, each effect is output as a separate string in an array, matching the properties of your saved style.

1
{
2
  "styles": {
3
    "formats": {
4
      "effects": {
5
        "combine": false
6
      }
7
    }
8
  }
9
}

Extract grid colors

Type: boolean

Default value: false

If set to false, the color value in each property of any grid style will be omitted.

If set to true, the color value will be included as defined in Figma.

1
{
2
  "styles": {
3
    "formats": {
4
      "grids": {
5
        "extractColors": true
6
      }
7
    }
8
  }
9
}

Code example

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

Config defaults

1
{
2
  "styles": {
3
    "figmaFilesVersion": "live",
4
    "directoryPath": ".zeytal/styles",
5
    "formats": {
6
      "targets": ["ts", "css"],
7
      "colors": {
8
        "format": "hex"
9
      },
10
      "fonts": {
11
        "usePostscriptFontNames": false,
12
        "unit": "px",
13
        "relativeLineHeight": false
14
      },
15
      "effects": {
16
        "combine": true
17
      },
18
      "grids": {
19
        "extractColors": false
20
      }
21
    }
22
  }
23
}