Tokens Exporter to CSS

Export Figma design tokens to CSS variables

Plugin Preview

Tokens Exporter to CSS transforms your design tokens into production-ready code. Works with standard CSS and Tailwind CSS v4.

🎨 EXPORT FORMATS

• CSS Variables — :root for light theme, custom selector for dark mode, wrapped in @layer tokens

• Tailwind — @theme directive with @layer utilities

📦 WHAT GETS EXPORTED

• Color Variables — Hex, rgba, and variable references preserved

• Number Variables — Smart unit detection (px, rem, %, deg, opacity)

• Typography Styles — Complete CSS classes or property blocks with all font properties

• Effect Styles — Shadows and blurs as proper CSS

• Color Styles — Solid colors and gradients as variables

✨ FEATURES

• Automatic dark mode detection (modes with "dark" in the name)

• Intelligent unit detection from variable names

• Variable aliases preserved as var() references

• Custom prefixes for each token category

• Format-aware live preview on hover

• Single file or organized ZIP export

• Configuration presets (Tailwind v4 / CSS)

• CSS cascade layers (@layer tokens) for better cascade control

• Format for Figma Styles (CSS Classes / CSS Properties)

⚙️ SETTINGS

• Unit mode: px or rem with custom base

• Style format: CSS classes or property blocks

• Custom dark mode selectors

• Font fallback chains

• Minification for production

Perfect for design systems, component libraries, and any project that needs consistent tokens across design and code.