Zeytal CLI

Learn how to use the Zeytal command-line interface (CLI) to extract data from your Figma files and auto-generate front-end code.

With the CLI package, you can interact with the Zeytal dashboard and your Figma files using a terminal or an automated system.

It enables you to:

• Extract and optimize your SVGs
• Extract and translate your Figma styles and variables into various code languages like CSS, TS, SCSS, JSON, etc.

Installing Zeytal CLI

To download and install the Zeytal CLI package, run one of the following commands:

$
pnpm i -D zeytal

Updating Zeytal CLI

When there is a new release of Zeytal CLI, running any command will show you a message letting you know an update is available.

The easiest way to update it is by running the installation command yet again:

$
pnpm i -D zeytal@latest

Canary version

To update to the latest canary version run the following command:

$
pnpm i -D zeytal

Checking the version

The --version option can be used to verify the version of Zeytal CLI currently being used.

$
pnpm zeytal --version

Project authentication

Zeytal CLI doesn’t require you to log in using a CLI command in any way before performing a task.

You must simply pass your Zeytal project’s secret token as an environment variable. Once set up, you can perform any task you want with the CLI. It will recognize your project secret token and perform your tasks using the context of this specific project.

You’ll find your project secret token in the overview and settings tabs of your project’s dashboard.

Zeytal has built-in support for loading environment variables from your .env file.

So, you can paste your project secret token into your .env file like this:

ZEYTAL_PROJECT_TOKEN=ABCDEFGHIJKlmnopqrstuvwxyz123456789

Using in a CI/CD environment

Since you already don’t need a manual input to log in with zeytal in your terminal environment, working with CI/CD environments will work pretty much the same way.

Simply store your project secret token as an environment variable in your favorite CI/CD tool config, then use the CLI commands like you always do.

CI/CD warning

Even though zeytal works in a CI/CD environment, we don’t recommend using Zeytal in one.

If used foolishly, you’ll reach Zeytal API requests daily limits quickly, which will cause a Zeytal command failure. If this happens, the parts of your front-end code that depend on code generated by Zeytal will fail, too.

We advise you to type commands manually to generate code from your Figma files and push the generated files to GitHub.

If you want to integrate zeytal commands so badly in your CI that you can’t help but do it anyway, at least ensure that you auto-generate code as rarely as possible.

The Zeytal API daily limits evolve depending on Zeytal users’ usage of the tool. The more users overuse the API, the more strict daily limits become.

Generation directory

A new .zeytal directory will be added to your root directory when using a CLI command. The .zeytal dir contains the code generated by your CLI commands for your Zeytal project.

Inside this directory, you’ll find 3 sub-directories:

• assets
• styles
• variables

Each of those 3 dirs can be moved to others places inside your project’s root dir if you need to.

You will have to specify a new path for them in your CLI config file.

Running a CLI command clears the content of the .zeytal/assets, .zeytal/styles, and .zeytal/variables directories. If you don’t want to lose code, don’t add code manually in there.

Zeytal CLI global options

Global options are commonly available to use with multiple Zeytal CLI commands.

Debug

The --debug option, shorthand -d, can be used to provide a more verbose output when running Zeytal CLI commands.

$
pnpm zeytal --debug

Help

The --help option, shorthand -h, can be used to display more information about Zeytal CLI commands.

$
pnpm zeytal --help

$
pnpm zeytal assets --help

Root directory

The --root-dir option, shorthand -R, can be used to set the path to the project’s root directory.

$
pnpm zeytal --root-dir=./path-to/root-dir

Zeytal CLI Commands

Learn how to use Zeytal CLI commands.

Command aliases

The zeytal command is an alias of the zeytal generate command.

Running one or the other will produce the same results.

zeytal assets

The zeytal assets command extracts and optimizes the SVGs you marked with an export setting from the Figma files you listed in your project’s dashboard.

You can use this command separately from the others if you want to generate assets only.

You can override the assets generation default settings in your CLI config file.

Usage

$
pnpm zeytal assets

Extended usage

$
pnpm zeytal assets --root-dir=./path-to/root-dir

zeytal generate

The zeytal generate command generates your variables, styles, and assets.

Under the hood, it calls zeytal variables, zeytal styles, and zeytal assets exactly in that order.

The command is executable from the project’s root directory or by specifying a root directory path.

You can omit generate in zeytal generate, as zeytal is the only command that operates without a subcommand. The following sections of the docs will use zeytal to refer to zeytal generate.

You can override the variables, styles, and assets generation default settings in your CLI config file.

Usage

$
pnpm zeytal generate

$
pnpm zeytal

Extended usage

$
pnpm zeytal generate --root-dir=./path-to/root-dir

$
pnpm zeytal --root-dir=./path-to/root-dir

zeytal styles

The zeytal styles command extracts and transforms the saved and implemented Figma styles from the Figma files you listed in your project’s dashboard.

We stress the word implemented here because Figma’s REST API is what it is; it’s simply impossible to fetch styles not implemented in your designs.

To ensure all your styles are retrieved and transformed by the CLI, save them AND use them in your files.

You can use this command separately from the others if you want to generate styles only.

You can override the styles generation default settings in your CLI config file.

Usage

$
pnpm zeytal styles

Extended usage

$
pnpm zeytal styles --root-dir=./path-to/root-dir

zeytal variables

The zeytal variables command transforms the Figma variables collections from the pre-extracted Figma files listed in your project’s dashboard.

Note: You must manually extract your variables with the Zeytal Figma Plugin. For a more detailed explanation, see the the dashboard variables tab guide.

You can use this command separately from the others if you want to generate variables only.

You can override the variables generation default settings in your CLI config file.

Usage

$
pnpm zeytal variables

Extended usage

$
pnpm zeytal variables --root-dir=./path-to/root-dir