Hey there! Button Generator Pro is your ultimate algorithmic design system companion. If you are tired of spending hours creating endless button variations, this tool does it all in seconds with mathematical precision. You simply pick your primary color, and the engine automatically calculates WCAG 2.2 compliant text contrasts. It also instantly generates all state colors like hover, pressed, and disabled without you lifting a finger.
Everything is perfectly aligned to a strict 4px grid system to keep your designs pixel-perfect. We are talking about dynamic border radius support, smart icon placements, and flawless shadow integrations. When the generation is done, you get a fully structured, ready-to-use Figma Component Set with native properties already linked up. It even comes packed with framework presets like Tailwind, Shadcn, and Material Design to kickstart your workflow. Stop drawing buttons and start focusing on your actual design architecture!
📏 4px Grid System
⭕ Dynamic Border Radius
☁️ Drop Shadow Support
🖼️ Smart Icon Placement
🧩 Native Figma Properties
👀 Live Docs Preview
📤 One-Click Export
🎚️ Advanced HSL Tuning
Using Button Generator Pro is super straightforward. Just open the plugin and start by picking your primary color or selecting a quick preset like Tailwind or Shadcn. Next, simply toggle the specific variants, sizes, states, and icon placements you need for your project. You can check how everything looks in the live preview right away. Once you are happy with the setup, just hit the "Generate to Figma" button. That's it! Your fully configured, WCAG-compliant Component Set will appear on your canvas instantly.
| File | Description |
|---|---|
manifest.json |
Plugin configuration and permissions |
code.js |
Core plugin logic — component generation engine |
ui.html |
Plugin UI — configuration panel |