How to save time building a Design System in Figma with Figma Tokens
Interview with Esther Cheran, Co-Creator of Figma Tokens
Who is Esther Cheran?
Esther is a Design System Specialist and the co-creator of the Figma Tokens Plugin. She is the master behind Headless Multibrand Design System, which Figma Tokens fully automate. Esther is experienced in connecting code and design, design tokens, framework agnostic components, and Figma plugin development. She is doing all the magic from the Himalayas 🏔.
What is the Figma Tokens plugin?
Figma Tokens is the most advanced plugin that can save your design tokens in Figma. It allows you to save time, manage and switch between multiple themes effortlessly and have more control. You can control design tokens from one dashboard, all linked to one source of truth. Designers can push changes directly to Github or export files as .json. This workflow is a shortcut for syncing the world of design and development.
Esther, can you please briefly tell us what you’re trying to achieve with the Figma Tokens plugin?
Esther:
We want to allow designers to return to where they work in a design tool and use design tokens to create designs. Designers can see how designs function before the developers put them in the code.
You launched Figma Tokens Pro during the last Into Design Systems Conference. People loved the new features. How is it going with Figma Tokens Pro?
Esther:
Yes, it has been going quite well, and we’ve been slowly launching more features in the PRO version. The next big thing we’re launching is the nonlocal styles that will help published styles be used in other files and linked to tokens.
Some people might be worried about relying on plugins because they might think the plugin publisher will stop shipping updates, or the plugin might disappear overnight. How do you deal with this? Is Figma Tokens still open source?
Esther:
One of the reasons to go PRO is having enough resources for stability. With funds from PRO users, we can keep maintaining the plugin, adding new features, and making the plugin more powerful.
Right now, Figma Tokens is an open source, both the free version and the PRO version.
Do you think Design Tokens are helpful, especially for design agencies where you work on many projects and potentially create multiple design systems for clients?
Esther:
I’ve been building a headless design system. The idea for this came from an agency’s point of view because I was consulting and building design systems for some clients. We were building a design system for a new client every time, so that led me to think about how can we reduce the time to create a design system for a client.
At the same time, according to the branding, everything might look different for different clients. So I built a design system that doesn’t have any branding, but you can style everything by using Figma Tokens.
How does this work in your Headless Design System?
Esther:
In my headless Multibrand Design System, you have a global set of tokens, semantic tokens, and you have component-specific tokens, and you tokenize every aspect of your components.
Once you have tokenized your components, you can have the semantic layer as the theming layer. So if I needed to change how my design system looked, I would switch the theming layer or the semantic layer, which would change how the whole design system looked.
What does that mean for agencies building Design Systems?
Esther:
From the point of an agency, instead of building a design system for each client, you could have a base design system, and using the tokens or the branding of each client, you create the semantic layer for that client and switch that out. And you can change the whole design system for the client according to the branding.
I think that cuts out a lot of time.
Would it be possible to create such a headless Design System without Figma Tokens — is it possible to achieve something similar with Styles in Figma? Would that be possible without the Figma Tokens plugin?
Esther:
Unfortunately, it is not possible only by using styles in Figma.
We are limited to colors, typography, shadows, and simple effects. But with Figma Tokens, you can also change and control design tokens like:
- Border radii
- Aliases
- Spacings
- Duration
- Composition tokens
- Multi-file sync
- Sync options (Local, jSONBin.io, Github, GitLab)
- Export as .json
- Branch switching
- Documentation tokens
- Using math with with other tokens
- Token Sets
So that becomes powerful because you can change your design system’s whole look.
You will learn more from Esther Cheran and Jan Six in the second part of the blog post. Stay tuned.
Resources:
Figma Tokens Plugin
