Generated files

Learn more about the code generated by the Zeytal command-line interface (CLI) package.

File types

The CLI package will generate three categories of files:

1. Asset files — Figma frames turned into SVGs
2. Style and variable files — Figma styles and variables turned into code
3. TailwindCSS config files — Figma styles and variables turned into TailwindCSS config

Those three file categories work differently.

We explain their behavior below.

Asset files

All generated asset files are .svg files.

They are optimized following the CLI default config and your config files’ overrides.

Assets code tweaking

The code of the produced .svg files is optimized using SVGO.

It can be tweaked using the SVG optimization section of your config file.

Assets naming convention

Your extracted assets keep the exact names they have in Figma.

They’re only kebab-cased to facilitate their use in your development environment.

For example, the frame of a variant named Name=Arrow Down in an Icon component in Figma becomes icon-name-arrow-down.svg once extracted and optimized.

This way, when you use assets in your code, there’s no guesswork — just import and use them exactly as named in Figma.

Style and variable files

All styles and variables can be generated into .ts, .mjs, .cjs, .json, .css, .scss, .sass, and .less files.

They are transformed and translated following the CLI default config and your config files’ overrides.

Styles and vars languages

All your variable files are stored in your variables directory, which is .zeytal/variables by default, and named variables.[extension].

Same logic for your style files. They’re stored in your styles directory, which is .zeytal/styles by default, and named styles.[extension].

The only exceptions to these rules are the generated TailwindCSS configuration files named style-tw.css and variables-tw.css.

In the end, depending on your config file tweaks, you can generate the following files:

• styles-tw.css
• styles.ts
• styles.mjs
• styles.cjs
• styles.json
• styles.css
• styles.scss
• styles.sass
• styles.less
• variables-tw.css
• variables.ts
• variables.mjs
• variables.cjs
• variables.json
• variables.css
• variables.scss
• variables.sass
• variables.less

Styles and vars naming convention

All extracted styles and variables keep their Figma names and respect their nested structures.

They’re only kebab-cased or camel-cased, depending on the extraction languages you chose to generate them into.

Here’s the syntax we follow:

/* Syntax for variables */
var-collection-mode-name: value;

/* Syntax for styles */
style-name: value;

This way, when you use styles and variables in your code, there’s no guesswork — just import and use them exactly as named in Figma.

For example:

1
// Figma variable name: "Background/100"
2
// Variable collection: "Colors"
3
// Modes: `Light` and `Dark`
4
// Generated TS code:
5
export const varColorsLightBackground100: #fff;
6
export const varColorsDarkBackground100: #000;

1
/* Figma variable name: "Background/100" */
2
/* Variable collection: "Colors" */
3
/* Modes: `Light` and `Dark` */
4
/* Generated CSS code: */
5
--var-colors-light-background-100: #fff;
6
--var-colors-dark-background-100: #000;

1
// Figma style name: "Heading/Heading 36"
2
// Generated TS code:
3
export const styleHeadingHeading36: 36;

1
/* Figma style name: "Heading/Heading 36" */
2
/* Generated CSS code: */
3
--style-heading-heading-36: 36px;

For more information about how to tweak your generated styles values and variables values, see the CLI config files guide.

TailwindCSS config files

With Zeytal CLI, you can transform your extracted Figma styles and Figma variables into TailwindCSS v4 config files.

To learn how to do it, go to the TailwindCSS config section of the docs: