Variables Xporter (Variables to shadcn/ui, Tailwind CSS, or CSS Variables)

About this plugin

Variables Xporter exports Figma Variables to shadcn/ui theme variables, Tailwind CSS configurations, and CSS Variables, bridging design and development seamlessly.

⭐ NEW: Direct shadcn/ui theme variable export support

1. Comprehensive documentation
2. GitHub repository
3. Figma Variables template
4. Variable organization best practices

📤 Export Formats

1. shadcn/ui (Tailwind CSS V4) ⭐ - Direct theme variable export for shadcn/ui components
2. shadcn/ui (Tailwind CSS V3) ⭐ - Perfect shadcn/ui integration with V3 support
3. Tailwind CSS V4 - New CSS-first configuration with @theme syntax
4. Tailwind CSS V3 - Traditional configuration format
5. CSS Variables - Universal CSS custom properties

⚙️ Core Features

1. shadcn/ui theme variable support - Direct export to shadcn/ui format
2. Multi-mode system (light/dark, brands, responsive, density modes)
3. Complete variable reference chain tracking
4. Smart typography variable merging
5. Unit conversion (px ↔ rem)
6. Filter Tailwind default palette
7. Single Outlet Principle for complex design systems

💡 Perfect For

1. shadcn/ui projects - Seamless theme integration
2. Tailwind CSS applications
3. Multi-theme design systems
4. Design-development workflows
5. Component library theming

Transform your Figma Variables into production-ready code with shadcn/ui compatibility.

---

Variables Xporter 将 Figma Variables 导出为 shadcn/ui 主题变量、Tailwind CSS 配置和 CSS Variables，无缝连接设计与开发。

⭐ 新功能：直接导出 shadcn/ui 主题变量

1. 详细文档指南
2. GitHub 开源仓库
3. Figma Variables 模板
4. 变量组织最佳实践

📤 导出格式

1. shadcn/ui (Tailwind CSS V4) ⭐ - 直接导出 shadcn/ui 组件主题变量
2. shadcn/ui (Tailwind CSS V3) ⭐ - 完美适配 shadcn/ui V3 版本
3. Tailwind CSS V4 - 全新 CSS-first 配置，@theme 语法
4. Tailwind CSS V3 - 传统配置格式
5. CSS Variables - 通用 CSS 自定义属性

⚙️ 核心功能

1. shadcn/ui 主题变量支持 - 直接导出为 shadcn/ui 格式
2. 多模式系统（明暗主题、品牌、响应式、密度模式）
3. 变量引用链完整追踪
4. 排版变量智能合并
5. 单位转换（px ↔ rem）
6. 过滤 Tailwind 默认调色板
7. 单一出口原则，管理复杂设计系统

💡 完美适用

1. shadcn/ui 项目 - 无缝主题集成
2. Tailwind CSS 应用
3. 多主题设计系统
4. 设计开发工作流
5. 组件库主题定制

将您的 Figma Variables 转换为支持 shadcn/ui 的生产代码。