From Figma to code in one command line.

Zeytal allows designers and developers to sync their work by auto-generating code from their Figma files.

Figma to Prod.Anytime. Anywhere.

  • Auto-extract Figma SVGs.

    Extract and optimize your icons and other SVG assets in one command line.

  • Auto-extract Figma variables.

    Extract variables from your Figma files and generate code from them.

  • Auto-extract Figma styles.

    Extract styles from your Figma files and generate code from them.

  • From design to TailwindCSS in seconds.

    Generate code and config files from Figma in one command line using zeytal CLI.

  • Generate in multiple file formats.

    Generate your styles and variables in TailwindCSS, TS, JS, JSON, CSS, SCSS, SASS, and LESS.

  • Sync with multiple Figma files at once.

    Zeytal can extract data from multiple Figma files at the same time.

  • Designed to live in CI environments.

    Local or CI. Same commands.

  • Fully customizable.

    Zero-config dark magic tool shipped with your craziest overriding needs in mind.

  • No design efforts or sacrifices required.

    No need to change how you design stuff. Use it. Love it. Forget it.

  • Works with everything.

    If you can install NPM packages, it will work.

Simple wasn’t enough.We also made it easy.

  • 01

    Design in Figma.

    Create styles and variables. Design stuff. Set export settings on your SVGs.

  • 02

    Setup Zeytal.

    Create an account. Create a new project. List your Figma files.

  • 03

    Use the CLI.

    Install zeytal in your dev env. Setup your config file. Type “pnpm zeytal”.

Product Tour

Explore Zeytal through an interactive product tour and discover how it works.

my-project

  • ~/ pnpm add -D zeytal

  • ~/ pnpm zeytal

Simple. Easy.But is it perfect?

  • Reunite Design and Dev.

    Less doing. More magic! Close the gap between design and dev by doing less.

  • No useless management.

    Forget about managing design tokens. Download them already ready.

  • F*ck technical debt.

    Don’t maintain your design system in two places. Clean on Figma. Auto-sync in dev.

  • Does it come in black?

    CSS or SCSS? Hsla over hex? Rem instead of px? Never settle. Override Zeytal’s default config and get what you want.

  • Don’t export assets. Auto-sync them.

    Stop exporting and optimizing SVGs by hand. Download and optimize them automatically.

  • Never copy-paste stuff ever again.

    No more endless copy-pasting. Type one command line and hit Enter.

Design and maintain without pain today.

Your product won’t blame you for taking a shortcut.