Button Generator - Component Design System
Generate Figma button components, variants, and styles from design tokens.
Plugin Preview
About this plugin
Create consistent Figma button components and variants faster with Button Generator, a design system automation plugin for UI/UX designers and product teams.Generate button component sets from configurable styles, sizes, emphases, and design tokens without manually creating every variant.Keep your design system consistent while reducing repetitive component-building work.FeaturesFull variant matrix — Style, Type (Solid/Outline/Ghost), Size, Content layout and State, combined into one real Figma component setLive preview that mirrors the generated output — fills, borders, elevation, focus rings and disabled states, visible before you generateBind every token to a Figma variable, a paint/text style, or set a custom value — your choice, per propertySpacing, typography, border and elevation configured per size, with recommended defaults you can unlink and overrideBuilt-in WCAG contrast checking — failing color pairs are flagged in the config UI and in a dedicated Accessibility tabDetects an existing generated system on the page and lets you update it in place or create a new one — nothing is silently overwrittenAuto-generates a documentation board alongside your componentsRemembers your full configuration between sessions, so reopening the plugin restores your setupHow to useOpen the plugin and choose which styles, types, sizes, content layouts and states to includeAdjust colors, spacing, typography, borders and elevation — link tokens to variables/styles or set custom valuesWatch the live preview update as you configureCheck the Accessibility tab and resolve any contrast warningsClick Generate — the plugin creates your component set, variables, styles and a documentation boardReopen anytime to update the same system or start a new oneUse CasesDesign-system teams standing up a button family from scratchProduct designers who need a consistent button set without hand-building every variantAuditing an existing button system for accessibility contrast issuesRebuilding a legacy button component onto variables/styles instead of flat colorsQuickly prototyping a new brand's button styles before committing to a full system
Plugin Details
| Version | 2 |
|---|---|
| Created | August 3, 2026 |
| Last Updated | September 27, 2026 |
| Category | ui-kits |
| Creator | Anna Chilingaryan |
| Stats | 4 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the ui-kits category.
UI Components Kit
pre-built UI component to be used in you design from Material UI , Chakra UI , and more ...
UI Kit
Turn technical debt into design consistency.
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries