Introduction

Welcome to the Zeytal documentation.

What’s Zeytal?

Zeytal is a CLI tool that bridges Figma designs and code.

You use Zeytal to automatically export your Figma SVGs, extract your Figma styles and variables, and generate front-end configuration files.


In other words, by typing a simple command in your terminal:

terminal

$
pnpm zeytal

This Figma file ↓ Figma file example with variables, styles, and assets

Becomes these generated files ↓ Figma file extraction example with Zeytal CLI

Under the hood, Zeytal handles all the setup for extracting Figma variables, styles, and SVGs — including SVG optimization and converting styles and variables in different languages — so you don’t have to.

This allows you to focus on building your application instead of spending time trying to close the gap between design and dev.

Whether you’re an individual developer or part of a larger team, Zeytal can help you auto-generate code from any design system file, even the big ones.

Design-to-code philosophy

Zeytal’s core philosophy is cutting unnecessary complexity, simplifying workflows, and making everything intuitive.

Our mission is to eliminate technical debt.

We see three levels of action to reduce tech debt:

  1. Education
  2. Standardization
  3. Automation

There are:

  • things you can educate about, standardize, and automate
  • things you can only educate about and standardize
  • things you can only educate about

With Zeytal, our approach is:

  1. Automate everything that can and should be automated
  2. Follow industry standards, standardize where possible, and educate along the way
  3. Educate when automation or standardization isn’t possible

How we apply this philosophy

We’re not here to reinvent the wheel.

That’s why:

  1. No bloated management layers — our dashboard is minimal and built for real use
  2. Extracted assets (SVGs) keep the exact names they have in Figma; they’re only kebab-cased
  3. Extracted styles keep their Figma names and respect their nested structures; they’re only kebab-cased or camel-cased depending on the extraction languages you chose
  4. Extracted variables keep their Figma names and respect their nested structures; they’re only kebab-cased or camel-cased depending on your chosen extraction languages.

Here’s the syntax we follow:

/* Syntax for assets */
dashed-name.svg


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


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

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.
  • The style Heading/Heading 36 in Figma becomes style-heading-heading-36 in your generated style files.
  • The variable Background/100 in a collection named Colors with Light and Dark modes in Figma becomes var-colors-light-background-100 and var-colors-dark-background-100 in your generated variable files.

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

You can learn more about the specifics of the files you generate in the related section of the docs.

Main features

Some of the main Zeytal features include:

  • Figma data fetching
  • Figma variables extraction
  • Figma variables translation (TailwindCSS, CSS, TS, JS, JSON, SCSS, etc.)
  • Figma styles extraction
  • Figma styles translation (TailwindCSS, CSS, TS, JS, JSON, SCSS, etc.)
  • SVGs extraction
  • SVG files optimization
  • Extraction preferences via a config file
  • Figma source files management

Before you begin

To get started, create an account with Zeytal. You can start with the 2-week free trial and then choose the plan that is right for you.


Log in with Figma

Starting your journey

This tutorial is framework agnostic but Zeytal supports many frontend configurations and tools. As you go through the docs, we will provide specific instructions for these tools.

If you don’t find what you need, give us feedback and we’ll update them.

While some of our instructions use the dashboard, the rest use Zeytal CLI to carry out your Figma files data extraction. In this tutorial, look for the “Zeytal CLI” section for the CLI steps.

Pre-requisite knowledge

Although our docs are designed to be beginner-friendly, to get the most out of our docs, it’s recommended that you have a basic understanding of Figma and JS dev environments.

We’ll provide links to relevant documentation whenever we introduce a new concept.

Next steps

Learn how to use Zeytal by understanding its core concepts.


NextCore concepts