Variables exporter

About this plugin

Figma Variable Exporter 🎨Transform your Figma variables into production-ready code with one click!This powerful Figma plugin streamlines your design-to-development workflow by exporting your design variables in multiple formats, with support for all your variable modes (Light, Dark, Mobile, etc.).✨ What This Plugin DoesTurn your carefully crafted Figma variables into:- CSS Custom Properties ready for your stylesheets- JSON data for your design tokens- Visual Style Guides generated directly in Figma- Multi-mode exports for Light/Dark themes and responsive breakpoints🚀 Key Features🎯 Smart Export Options- All Variable Types: Colors, typography scales, spacing values, and more- Multi-Mode Support: Export Light mode, Dark mode, or all modes at once- Clean Variable Names: Automatically removes duplicate words (`accordion-accordion` → `accordion`)- Custom Prefixes: Add your own prefixes like `--ds-` or `--brand-`🎨 CSS Custom PropertiesPerfect for modern web development:```css:root {/* Colors */--color-primary: #007AFF;--color-background: #F2F2F7;/* Spacing */--spacing-lg: 24px;--spacing-md: 16px;}/* Dark mode variables */[data-mode="Dark"] {--color-primary: #0A84FF;--color-background: #1C1C1E;}```📊 Organized JSON ExportGet structured data for your design system:```json{"metadata": {"fileName": "Design System","modes": ["Light", "Dark", "Mobile"],"totalVariables": 156},"variablesByType": {"COLOR": { "count": 24, "variables": [...] },"FLOAT": { "count": 12, "variables": [...] }}}```🖼️ Visual Style Guide GeneratorCreate professional style guide frames in Figma showing:- Color swatches with hex values- Organized layout with up to 20 variables per row- Proper spacing and typography- All variable types beautifully displayed📋 How to UseStep 1: Open1.Run Plugins → Variable ExporterStep 2: Choose Your ExportThe plugin automatically detects all your variable modes:For CSS Export:- Choose specific mode (Dark, Light, etc.) or "All modes"- Toggle variable prefix on/off- Enable/disable grouping by type- Export generates clean CSS custom propertiesFor JSON Export:- Select organized format or flat structure- Choose indentation level- Pick specific mode or export all modesFor Style Guide:- Click "Create Style Guide"- Generates a visual frame with all your variables- Colors show as swatches, other variables as labeled itemsStep 3: Integrate Into Your Project- CSS files are ready to import into your stylesheets- JSON files work with design token tools and build processes- Style guides help communicate design decisions to your team🎨 Real-World ExamplesDesign System TeamsExport your complete design system with all modes:```bashMyDesignSystem_variables_all_modes.cssMyDesignSystem_variables_Dark.jsonMyDesignSystem_variables_Light.json```DevelopersGet clean, prefixed CSS variables:```css--ds-color-primary: #007AFF;--ds-color-secondary: #5856D6;--ds-spacing-xl: 32px;--ds-spacing-lg: 24px;```Design DocumentationCreate visual style guides showing:- All color variables with hex codes- Spacing values organized in rows- Typography scales and other design tokens🌟 Advanced FeaturesVariable Alias ResolutionThe plugin automatically resolves variable references:- If Color A references Color B, you get the actual color value- No more `[object Object]` in your exports- Works with nested references (A → B → C → actual value)Multi-Mode CSS GenerationWhen exporting all modes, get CSS ready for theme switching:```css/* Default/Light mode */:root {--color-text: #000000;}/* Dark mode */[data-mode="Dark"] {--color-text: #FFFFFF;}```Smart File NamingFiles are automatically named with mode information:- `DesignSystem_variables.json` (default export)- `DesignSystem_variables_Dark.json` (Dark mode only)- `DesignSystem_variables_all_modes.css` (all modes)💡 Tips & Best Practices1. Organize Before Export: Clean up your Figma variable names for better CSS output2. Use Descriptive Modes: Name your modes clearly (Light/Dark vs Mode1/Mode2)3. Test Exports: Preview the CSS/JSON before integrating into your codebase4. Style Guides: Use generated style guides for design reviews and documentation5. Version Control: Keep exported files in version control to track design changes🚨 TroubleshootingPlugin shows "No variables found"- Make sure your Figma file contains local variables- Variables must be published to collectionsColor shows as [object Object]- This is fixed in the latest version! Variable aliases are now properly resolvedExport button not working- Try refreshing the plugin- Check browser console for any error messages📄 LicenseMIT License - Feel free to use in personal and commercial projects.---**Made with ❤️ for the design and development community**Have feedback or suggestions? [Open an issue](https://github.com/akhalizev/figma-variable-exporter/issues) or contribute to make this plugin even better!