figma.css

A CSS library for Figma Semantic Color Tokens that converts them to CSS variables.

Features

• 🚀 Convert Figma color tokens to CSS variables
• 💄 Support for light and dark themes
• 🍱 Easy to integrate with any CSS-in-JS library

Usage

Step1: Installation

npm install --save @sherotree/figma.css

Step2: Importing the Library

Next, you need to import the library into your JavaScript or TypeScript file:

import "@sherotree/figma.css";

This will make the CSS variables available in your project.

Step3: Using the CSS Variables

You can now use the CSS variables in your CSS files. Here's an example:

.my-element {
  background-color: var(--figma-color-bg);
  color: var(--figma-color-text-brand);
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT