Variables Xporter
Export Figma Variables as production-ready shadcn/ui theme variables, Tailwind CSS configuration files, or CSS Variables.
shadcn/ui theme integration
Directly export Figma Variables as shadcn/ui theme configurations. Support multi-brand, multi-theme design systems with streamlined development workflow.
Multi-mode variable system
Manage complex design systems with light/dark themes, brand variations, responsive breakpoints, and density modes in combined exports.
Merge typography variables
Automatically merge font-size, line-height, letter-spacing, and other styles into Tailwind-compliant configurations.
font-size:1rem
font-size:16px
Smart unit conversion
Intelligently convert px to rem, em, and other units, ensuring accessibility compliance and consistent scaling across devices.
Media query mode export
Export Design Tokens that have different values under different media query conditions for responsive design variable management.
Basic principles
Naming and grouping of variables
Color system
Suggestions for organizing color variables
Typography system
Suggestions for organizing text and typography variables
Spacing system
Suggestions for organizing spacing variables
Other variables
Suggestions for organizing other variables
Multi-mode support
Building powerful multi-dimensional variable systems
