Tailwind Theme Gen

A Figma Plugin that generates Tailwind Theme based on Figma design tokens

Stack

Typescript
React
Figma

Live

View site →

Repo

Check code →

Project's Goal

This plugin aims to speed up the process of converting Figma design tokens into a Tailwind theme.

Origin Story

Figma is a design tool that I tend to use quite often. When I learned about the Figma team releasing a dev mode VSCode plugin, it got me excited about possible integrations. Around that time, I was also into doing Frontend Mentor challenges. This practice mainly consisted of taking Figma designs and implementing them with React and Tailwind. Each time I started a new project, I found myself repeatedly copying design tokens from Figma into my Tailwind theme. That made me think, wouldn't it be great to have a tool that could do it for me?

Challenges

Learning Figma Internals

As this was my first Figma plugin, I had to learn a lot about Figma's Plugin API, its security, and release policy. While working on this, I discovered a bunch of internal quirks and deepened my understanding of two primary features used for design tokens in Figma, Styles and Variables.

ES6 Target

Figma's plugin environment supports the ES6 target. Before this project, I always targeted evergreen browsers while using the latest JS features. During this project, I came to realize that some built-in syntax I'd been taking for granted didn't exist in ES6 yet and also it cannot be transpiled to it. Hence, I had to work around it by using alternatives. In the end, it wasn't hard but definitely caught me by surprise. I always thought code like Object.entries() must have been part of JS forever.

Cross-Origin Communication

Due to security reasons, plugins in Figma usually consist of two parts. The first is the Figma plugin code, which runs inside a QuickJS sandbox and has very limited access to browser APIs. The second part is the UI of a plugin, a web app with complete access to the browser but effectively no access to Figma's APIs. Because of this division of labor, in order for the plugin to work as a unit, these parts must communicate. As they run each inside of a different origin, information must be exchanged via the window.postMessage API. This was my first time implementing cross-origin communication, and even though it had some intricacies, it was a lot of fun. It reminded me of my networking job at Red Hat.

Lessons Learned

This was not the biggest project I have ever done, but it was quite different from what I had been working on before. It taught me a lot about the Figma development environment and I got to use techniques like cross-origin communication between windows, which was cool.

I'm planning to keep working on this. As the next step, I'd like to extend the range of tokens the plugin is able to convert. I hope that more users will find this project useful as it grows in features.