• Zeytal Product Tour

    How to sync your dev environment with Figma in 5 minutes.

  • 1. Create styles and variables in Figma.

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

  • 2. Add export settings on your SVGs

    Add an SVG export setting to your frames to let Zeytal know which assets to extract.

  • 3. List your Figma files

    Log into your Zeytal dashboard, open your project, and list the Figma files from which you want to extract assets, styles, and variables.

  • 4. Install Zeytal CLI

    Open a terminal and install the `zeytal` NPM package as a dev dependency.

  • 5. Personalize your config

    Create a zeytal.json file to tweak the CLI default settings.

  • 6. Extract and generate code

    Type "pnpm zeytal".
    Hit enter.
    Relax.

  • 7. Enjoy the result

    Import and use the data from the files you just generated.
    Never copy-paste values from Figma again.

  • Nice job!

    Your dev environment is synced with Figma using only one command line.

BackLog In