Variables to CSS
The plugin do one simple thing: convert your variables into CSS readable format
Plugin Preview
About this plugin
✨ Key Features:
Smart Export: Detects variable types (colors, spacing, typography, effects)
Theme Support: Exports light mode as :root and dark mode as [data-theme="dark"]
Variable References: Properly handles variables that reference other variables
CSS Compatible: Generates CSS that works with document.style Sheets API
Preview: See generated CSS before export
This plugin was created for our internal team use. The main problem to solve is that in the process of development soon or later you will face with situation where your tokens is slightly differ.
On other hand in Storybook I made a story where we compare tokens from project variables.css with this File, and show Diffs.
I would like to be published so I don't need to run it locally, but if somebody finds it helpful, Welcome!
Plugin Details
| Version | 1 |
|---|---|
| Created | July 7, 2025 |
| Last Updated | July 7, 2025 |
| Category | Software development |
| Creator | Vlad Zatsniy |
| Stats | 0 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:plugin.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
SkewDat
Skew any layer or group with all layers preserved to edit.