Figma CSS Variables Converter & Exporter
Turn your Figma design variables into production-ready CSS custom properties in seconds.
Plugin Preview
About this plugin
This plugin converts Figma variables into modern, developer-friendly CSS using OKLCH color space and rem-based sizing, ensuring consistency, accessibility, and future-proof design tokens. Variables are displayed in Dev Mode as real CSS (var(--token-name)) and can be exported directly to GitHub with a clean, automated workflow.
Key features
•Convert Figma variables to CSS custom properties
•Export colors in OKLCH for better perceptual consistency
•Automatically convert px values to rem (16px base)
•Generate CSS for typography, spacing, and sizing
•Update Dev Mode to show copy-paste-ready var(--...) tokens
•Export tokens to GitHub with automatic branch creation and commits
•Generate one CSS file per theme (light, dark, etc.)
Perfect for teams that want a single source of truth between design and code, without manual token management.
Plugin Details
| Version | 2 |
|---|---|
| Created | December 11, 2025 |
| Last Updated | December 18, 2025 |
| Category | Import & export plugins |
| Creator | Lukáš Chylík |
| Stats | 1 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://api.github.com
- Codegen Languages:
- CSS(css)
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML