The vision behind Zeytal

As the leader of the Zeytal team, I am writing this vision document to publicly share what we aim to do with Zeytal.

My goal is to clearly state what we want to accomplish so you know now if Zeytal will work for you in the future.

— Alban Mezino

The product’s backstory

I’m a developer.

I’ve been making stuff by typing on a keyboard for almost ten years.

During this time, I saw many projects go wrong.

Not because of the usual problems designers and developers face but because of a much bigger one.

In my experience, projects don’t fail because of a lousy framework choice or some villain sabotaging your beautiful code. Projects often fail because they don’t stand the test of time.

Technical debt accumulates in design and dev environments. A gap forms between designers and developers. And, sometimes, this gap becomes too large to handle.

Then, once again, the Eternal Gap of Doom is created.

Yet, product designers and developers don’t give up. They still try to reduce that gap, or at least manage it.

I tried a lot of stuff to narrow the Gap of Doom in my projects:

  • Arcade
  • Bravo Studio
  • Diez
  • Figmagic
  • Interplay
  • Knapsack
  • Specify
  • Storybook
  • Toolabs (RIP)
  • Zeplin
  • Zeroheight

What I wanted was simple, yet nothing really worked.

I just wanted to get rid of redundant actions that, when forgotten, increase the debt of a project, like:

  • copy-pasting a hex code... again.
  • exporting and optimizing SVGs... again.
  • updating style names... again and again.
  • etc., etc.

The real problem

Most tools add middle management to the process.

They don’t allow us to ship confidently while reducing the gap between the design and development worlds. Instead, they try to fill this gap with new tools we must manage and maintain.

These tools don’t help our products endure; they add risk and make us lose time.


We need tools that allow designers and developers to be more efficient without forcing them to manage more stuff.


We don’t have a people problem.

We have a tooling problem.

Helping developers suffer less

Developers shouldn’t live with the frustration of manually updating CSS-related code and copy-pasting values from design to dev.

Developers need tools that reduce their design-to-code workload without complicating their workflow.

What they need is a magical tool that does the boring work for them and works just as expected.

We don’t need professional hexadecimal-code-copy-pasters.

We need developers to code what designers can’t.

Helping designers suffer less

Other than Figma, designers shouldn’t have to manage or maintain extra tools to enhance developer handoff.

Designers need a tool that doesn’t change how they work in Figma but profits from it.

What they need is to know that the development team uses a reliable magical tool to improve their design-to-code workflow.

We don’t need professional figma-plugin-design-tokens-managers.

We need designers who imagine incredible user experiences.

The solution your product needs

Your product needs a stable, predictable, easy-to-use, easy-to-forget tool that, once configured, runs without requiring you to maintain it and enables the product team to sync their dev and design worlds easily.

The boring work done for you

This solution needs to do the tedious work for you:

  • Auto-extract your Figma variables and generate them in dev
  • Auto-extract your Figma styles and generate them in dev
  • Auto-export your Figma assets (SVGs, PNGs, ...), optimize them, and generate them in your dev env
  • Auto-generate front-end config files using your variables and styles (like a tailwind config for example)
  • Auto-generate storybook components based on your variables, styles, and assets
  • etc.

Agnostic, easy, and fast

Handing off the boring work is cool but must also be painless.

This tool must work in any environment for any project and any team.

So, Zeytal has to:

  • Be fast AF
  • Support Mac, Linux, Windows, and CI environments
  • Be fully customizable while being zero-config friendly
  • Generate everything you need with short and simple command lines
  • Generate variables and styles in multiple file formats
  • Be agnostic and support every great CSS framework
  • Extract data from multiple Figma files at once
  • Be invisible from a designer workflow perspective
  • Have the simplest and clearest documentation ever

Big leap = Small steps

To move a moutain, move millions of small stones.

To reliably make Zeytal do big things like generating front-end config files or whole components, we’ll need to do all the small things right 100% of the time.

So, we start with many small building blocks today to build tommorow’s big things.

We intend to generate the following:

  1. Variables, assets, and styles.
  2. Front-end config files.
  3. Small components.
  4. Bigger components.
  5. A complete design system documentation.

For each step, the main focus is to translate real stuff from Figma, not invent or manage things in between.

So, for example, we’ll generate front-end components that your “back-end” components will be able to use, leverage, and override.

Why create Zeytal?

The 2024 StackOverflow survey shows that the most common frustration amongst developers is the amount of technical debt they have to deal with. As developers and designers ourselves, we share that pain.

And we never found anybody who can name a product with a painless design system and a clean design-to-code workflow.

As superhero movie fans, we know that in any story, the protagonists must make a choice that will define them forever.

By choosing how to respond to pain, we either choose to be the villain or walk the path of the hero.


Either we become the villain by swearing:

The world hurt me, so I will hurt it back as much as I can.

Or we start on the hero’s path and decide instead:

The world hurt me, so I won’t let this happen to anybody else.


We swore to fight the Eternal Gap of Doom forever.

We chose the light side of the force.

We started to build Zeytal.

What’s in it for you?

With Zeytal, we’re creating the best design-to-dev workflow possible for all Figma based digital products and websites.

We’re building Zeytal, so it feels like using a Mac.

We want people to forget the tool and focus on what they create.

People who develop Figma-based products or websites have the opportunity to:

  1. Reduce technical debt
  2. Do less boring work
  3. Sync design and dev easily

In other words:

  1. Never forget to update a color hex code again
  2. Never forget to export and optimize SVGs again
  3. Never maintain a design token manager ever again

Type zeytal generate to make all your problems go away.

Next steps

  1. Explore Zeytal with our interactive product tour.
  2. Read our doc to see how easy it is.
  3. Stop wasting time and money. Sign up.

This is just the beginning

Together, we will shape the tool that developers only dream of, that designers won’t regret, and that your product will never forget.