Core concepts

To get started with Zeytal, it's helpful to understand some core concepts like:

Organizations

A Zeytal organization is the top-level container where you manage everything related to a specific company.

As a user, you can create or join multiple organizations. Each organization has only one administrator and can host an illimited number of members.

Real-life examples would be organizations named “Spotify”, “Apple”, “Linear”, etc.

Projects

A Zeytal project represents a specific dev environment.

Each project within an organization lets you generate code directly from your Figma files.

This way, your iOS app, Android app, web app, website, …, can each have their own config files.

Real-life examples would be projects named “Spotify iOS”, “Spotify Android”, “Spotify Web App”, “Spotify Website”, etc.

Figma source files

In Zeytal, what we call “source files” are the Figma files you list in your projects so you can extract data and auto-generate code from them.

The source files you list are split in categories:

  • Assets files: These files will be used only to extract and optimize your Figma SVGs.
  • Styles files: These files will be used only to extract and transform your Figma styles.
  • Variables files: These files will be used only to extract and transform your Figma variables. To extract Figma variables, you’ll need to use the Zeytal Figma Plugin.

Sometimes, you will have to list one file in multiple categories to extract assets, styles, and variables from it. Don’t worry, it’s completely normal.

Figma personal access token

To extract and auto-generate code from your files, your Zeytal project needs access to your Figma files.

To grant reading access to your Zeytal project, you'll need to provide a Figma personal access token.

The setup is really easy and explained in your Zeytal dashboard.

To ensure you don't encounter any problem down the road, visit the specific part about access tokens in Figma's docs.

Dashboard

You won’t have to use a middle manager with a list of design tokens and other stuff to edit, maintain, and monitor.

Unlike other tools, we purposefully keep the management side of things to a bare minimum.

To bridge the gap between design and dev, you will only have to:

  1. create a Zeytal user account
  2. create/open a project in your dashboard
  3. list the Figma files you want to extract data from
  4. provide your project with a Figma personal access token
  5. copy and paste your project id in your .env file
  6. type pnpm zeytal in your terminal and hit Enter.

So, your dashboard will mainly help you with:

  • listing Figma source files
  • managing your Zeytal project subscription plan
  • managing your Zeytal organization users

And, that's all.

Zeytal CLI package

The CLI package is the NPM package we created to exploit your Figma files’ data. It will use your Figma source files and Figma personal access token to generate code from Figma.

Figma file code generation example with Zeytal CLI

The CLI has its own dedicated chapter in the docs, so you can learn everything about it.

Zeytal Figma Plugin

Figma users cannot use its REST API to extract Figma variables without paying for the Enterprise plan (Figma ultra premium subscription plan).

To remedy this and enable any Figma user to safely extract their variables, we made the Zeytal Figma Plugin.

Figma variables extraction example with the Zeytal Figma Plugin

This Figma plugin will help you extract and store Figma variables in your project’s dashboard. Zeytal CLI will use these extracted values to generate variables in multiple languages, such as CSS, TS, ESM, etc.

You only have to run the plugin on the desired Figma files to extract your Figma variables.

The plugin will ask you to pass your Zeytal project’s secret token just as the CLI does to bind the extracted values to your Zeytal project.


Get Zeytal Figma Plugin
PreviousIntroduction
NextGet started