Figma CSS Theme Generator

Figma plugin that generates CSS custom properties from your document's text and color styles.

What does it do?

Figma Styles ♻️ CSS Custom Properties

This plugin can generate CSS custom properties from your Figma document's color and text styles. It parses all the styles and generates a CSS stylesheet you can use in your CSS-based projects. This way you can take your design to code and remove a layer of translation between designers and developers.

Development

This project uses Typescript and Webpack for compiling code to a production bundle.

Getting Started

1. Install Figma plugin using manifest.json in project repo.
2. Install dependencies: yarn
3. Run Webpack in "watch" mode: yarn dev
4. Run the plugin in Figma

Figma Guide

You can find more information about Figma's plugin setup here:

https://www.figma.com/plugin-docs/setup/

Credits / Shoutout

• Diez CLI
• Figma Plugin DS by @thomas-lowry
• deepmerge