1. Create styles and variables in Figma.

Create your variables and styles in your Figma files. No specific order or name is needed. Do whatever you like.

2. Use your styles and variables in your designs.

Zeytal will only extract the variables and styles you implement in your designs.

3. Add export settings on your SVGs and images.

Simply add export settings to let Zeytal know which assets to export.

4. List your Figma files.

Log into Zeytal's web platform, open your project, and list the Figma files from which you want to extract data.

5. Install Zeytal CLI.

In your dev project, open a terminal and install zeytal either as a dev dependency or globally.

6. Personalize your config.

If you want, you can create a zeytal.config.ts file and override Zeytal CLI default settings.

7. Extract and generate your variables, styles, SVGs, PNGs, ...

Type "zeytal generate", hit enter, and feel your shoulders getting lighter.

8. Design. Generate. Build.

Add "zeytal generate" to your package.json scripts and watch Zeytal generate your stuff before building on Vercel, Netlify, or whatever.