Vary Good

VaryGood is a Figma plugin that generates a complete, production-ready design system from a guided configuration wizard. Define your colours, typography, spacing, radius, and shadows — and the plugin builds all the variables, styles, components, and documentation you need.

Built around Base UI conventions, VaryGood produces perceptually uniform OKLCH colour scales, semantic tokens with light and dark mode support, variable-bound components, an icon slot system, and an auto-generated documentation page, all wired together with native Figma variables and scoped for publishing.

When you need to make changes, VaryGood tracks every edit and offers safe incremental updates that preserve your customisations. The Selection Inspector can scan any frame, detect unstyled elements, and bind matching variables automatically or swap conflicting component instances in bulk.