Design System Generator

About this plugin

Transform your design system with this plugin crafted to automate color and button creation and code generation in One-Click! Get instant generation of color design system and button components with properties and variants pre-built into the Figma design panel for your convenience! Get ready to use react code in a single click that directly integrates on your web apps.Features:Color Selection: Pick from our palette or automatically match your design system's colors!Define Your Style: Adjust the radius, choose your font, and personalize your buttons.Smart Sizing: With adaptive sizing, padding and flexible dimensions, ensure your buttons are proportionate and legible across devices.Interactive Button Previews: Proof your work before generating buttons as components.Light & Dark Mode: Plugin interface adapts to your work environment.1-Click to 48 Button Variants: Automatically generate 48 button variants with a single click, covering:Sizes: Small, medium, and large.Types: Primary, secondary, text, and elevated.States: Enabled, hovered, pressed, and disabled.Figma Integration: flexibility to tweak any button directly within the Figma inspect panel.Auto-Layout: Yes, all buttons are Figma-ready for seamless integration!Dynamic Color Variables/Styles: Now color variables/styles directly get linked to the button. No need to manually give color variable values.React Code: Development-Ready Exports to CSS and React code.Color Contrast Ratio Checks: Check color contrast ratio according to the WCAG guidelines.Color Design System Generator: From the Colors section in the plugin, you can create a color design system by providing a base color, specifying the number of complementary colors you want to generate, and selecting light or dark mode. With one click, you will get your color design system, complete with color variables, similar to Tailwind CSS.Edit Design Systems: Now you can edit the generated design systems by selecting the design system frame and opening the plugin from the right side panel in figma and clicking on edit design system.Upcoming Features:AI-Powered SuggestionsShould you encounter any issues, have questions, or wish to share feedback, please contact us at [email protected]. We are committed to supporting you and making your design process as efficient and productive as possible!