Assets configuration

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

Available assets settings

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

• assets.figmaFilesVersion
• assets.directoryPath
• assets.optimize.svg

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

Default value: "live"

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

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

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

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

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

In the example above, all the generated Figma assets 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/assets"

This is the directory path into which your optimized assets will be written. This path is relative to your root directory.

1
{
2
  "assets": {
3
    "directoryPath": "public/zeytal-assets"
4
  }
5
}

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

SVGs optimization

Type: Pick<SVGOConfig, "multipass" | "floatPrecision" | "plugins">

Default value: {}.

For more info about the SVGO config, see the official SVGO docs.

1
{
2
  "assets": {
3
    "optimize": {
4
      "svg": {
5
        "floatPrecision": 3,
6
        "plugins": [
7
          {
8
            "name": "preset-default",
9
            "params": {
10
              "overrides": {
11
                "removeViewBox": false
12
              }
13
            }
14
          },
15
          "removeDimensions",
16
          "removeXMLNS"
17
        ]
18
      }
19
    }
20
  }
21
}

Code example

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

Config defaults

1
{
2
  "assets": {
3
    "figmaFilesVersion": "live",
4
    "directoryPath": ".zeytal/assets",
5
    "optimize": {
6
      "svg": {}
7
    }
8
  }
9
}