Variant Organizer

About this plugin

Variant OrganizerA powerful Figma plugin that automatically organizes component variants into structured, easy-to-read tables. Perfect for design systems and component libraries where you need to visualize all variant combinations at a glance.✨ Features- Automatic Organization: Converts messy component variants into clean, structured tables- Smart Property Detection: Automatically identifies variant properties and their values- Intelligent Grouping: Groups variants by multiple properties for better organization- Dark Mode Support: Automatically detects and styles dark mode variants appropriately- State-Aware Sorting: Intelligently orders state-based variants (default, hover, focus, disabled)- Visual Grid Layout: Creates a clear matrix showing all variant combinations- **Missing Variant Detection**: Highlights missing variant combinations with visual indicators 🚀 How to Use1. Select a Component: Choose a Component, Instance, or Component Set in your Figma file2. Run the Plugin: Click "Organize Variants" in the plugin panel3. View Results: The plugin creates a structured table showing all your variants organized by properties📋 Requirements- Figma, FigJam, or Figma Slides- Component Set with multiple variants- Variants should have consistent property structures⚠️ Important LimitationsDue to Figma Plugin API restrictions, this plugin can only access:- Variant Properties: Properties defined in the component set's variant system- Component Names: Used for pattern detection and organization- Component Structure: Child elements and their namesNot Supported:- Component Properties: Boolean properties like "Has left icon?" or text properties set through Figma's component properties panel are not accessible through the Plugin API- Instance Properties: Properties set on individual component instances- Appearance Mode: The plugin cannot change or detect Appearance mode settings in variables or components- Variable Bindings: Dynamic properties controlled by Figma variables are not accessibleWorkarounds for Component PropertiesIf your components use boolean properties (like "Has left icon?"), consider these alternatives:1. Convert to Variant Properties: Create variants like "With Icon" and "Without Icon"2. Use Naming Conventions: Include property information in component names (e.g., "Button Primary With Icon")3. Structure-Based Detection: Name child elements clearly (e.g., "left-icon", "right-icon") for automatic detection🎯 Perfect For- Design Systems: Organize button, input, and component variants- Component Libraries: Create clear documentation of all available variants- Team Collaboration: Help team members understand available component options- Design Reviews: Present variants in an organized, easy-to-scan format- Developer Handoffs: Provide clear visual reference for implementation🔧 How It WorksThe plugin analyzes your Component Set and:1. Extracts Properties: Identifies all variant properties (size, state, theme, etc.)2. Detects Values: Finds all possible values for each property3. Creates Grid: Builds a table with properties as rows/columns4. Organizes Variants: Places each variant in the appropriate grid cell5. Groups Complex Sets: Handles multiple properties with intelligent grouping6. Applies Styling: Uses appropriate colors and layouts for different contexts📱 Supported Variant Types- Size Variants: Small, Medium, Large- State Variants: Default, Hover, Focus, Disabled- Theme Variants: Light, Dark, On Dark- Content Variants: With Icon, Without Icon, With Label- Any Custom Properties: The plugin adapts to your naming conventions🎨 Output FormatThe plugin creates a structured frame containing:- Title: Component Set name- Property Groups: Organized by variant properties- Grid Layout: Clear rows and columns for easy scanning- Visual Indicators: Color coding for different contexts- Missing Variants: Highlighted placeholders for incomplete combinations💡 Tips for Best Results1. Use Variant Properties: For best results, use Figma's variant system instead of component properties2. Consistent Naming: Use consistent property names across your variants3. Complete Sets: Ensure all logical variant combinations exist4. Clear Properties: Use descriptive property names (e.g., "size" instead of "s")5. State Ordering: The plugin automatically orders common states (default → hover → focus → disabled)6. Icon Detection: If using icons, include "icon", "left", or "right" in child element names for automatic detection📄 LicenseMIT License - feel free to use, modify, and distribute as needed.🤝 ContributingFound a bug or have a feature request? Write a comment, I will research the solution.---Made with ❤️ for the Figma community