figma-variables2css-to-tailwind-colors-converter

I created this repo to add the missing link between defining color schemes in Figma and have them available in Tailwind taken the following requirements into account:

• not too many manual work or adjustments should be required 😅,
• in Figma, colors are defined as variables so we can have modes for light and dark color themes,
• we use the tailwind-mode-aware-colors plugin to define the colors in Tailwind - this will automatically 'generate dynamic colors that will automatically switch between light and dark mode variants' so we don't need to add separate classes (e.g. dark:bg-primary-400) for dark mode.

All this is possible with Figma plugins, however I didn't succeed in generating a tailwind.config.js with colors structured as described by the tailwind-mode-aware-colors plugin. So I wrote a simple script to accomplish this.

Prerequisites

You will need the following properly installed on your computer:

• Git
• Ruby

Installation

$ git clone [email protected]:bazzel/figma-variables2css-to-tailwind-colors-converter.git
$ cd figma-variables2css-to-tailwind-colors-converter
$ chmod a+x var-parser

Running

To run this script successfully, you need to define your colors as variables in Figma and the colors should have modes named light and dark. The image below shows an example - it uses the names Colors for the collection, primary, secondary, etc. for the groups and has a variable every shade (50, 100, ...), however the names are subordinate, as long as the modes are named properly.

To work with variables, you need a paid account.

• Once you have defined you variables, switch to Figma and run the plugin variables2css.
• Select the collection that contain the colors.
• Select Json as Type and hex as Color.

• Generate the output and copy it to a file (here we name the file export.json).
• Transform the file's content that we can use in Tailwind:

$ cd figma-variables2css-to-tailwind-colors-converter
$ ./var-parser ./export.json

• You now have a file colors.js. Move this file to the same folder where tailwind.config.js is located.
• Adjust tailwind.config.js as follows:

const myColors = require(./colors);

module.exports = require('tailwind-mode-aware-colors')({
  theme: {
    colors: myColors.colors,
  },
  ...
});

Notice that require('tailwind-mode-aware-colors') is added. You need this plugin for mode-aware colors.

And that's it.

Figma plugins:

• Tailwind CSS Color Generator
• variables2css
• Dark Mode Magic