VaryGood
Variables and design system generation for Figma
About

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, six fully variable-bound components (Button, Input, Select, Checkbox, Radio, Switch), 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.

Features
Colour Scales
OKLCH-based 11-step scales with per-step overrides and granular control over lightness, saturation, and hue shift
Semantic Tokens
Light & dark mode tokens mapped from your palettes with a guided visual flow, inline swatch picker, and live card preview
Typography
Searchable font picker, configurable type scale (xs–8xl), semantic role mappings, variable-bound text styles with cap-height trim
Spacing & Radius
4px or 8px base unit with derived multiplier scale. Radius presets from 0–24px generating a full xs–full variable set
Components
Button (4 variants, 3 sizes, 5 states), Input, Select, Checkbox, Radio, Switch — all bound to variables with icon slots
Icon Slot System
Master icon component with semantic colour variants. Set up once, use everywhere — components reference icon slots via instance swap
Safe Updates
Real-time change tracking across every step. Incremental patching updates variables, styles, and component docs without destroying customisations
Selection Inspector
Scan frames for unstyled elements, auto-match variables, search for similar across the page, detect component conflicts, and swap instances in bulk
Shadows & Elevation
Optional shadow effect styles across 7 levels (xs–2xl, none) with editable values and safe add/remove
Documentation Page
Auto-generated “VaryGood Design System” page with colour swatches, typography samples, spacing scale, and radius preview
Global Colours
Single-value colour primitives (White, Black, custom) alongside palette scales for absolute tokens
Component Docs
Markdown descriptions embedded in every component set — anatomy, token bindings, layout specs, and Base UI links
Changelog
v0.1.0 February 2026
  • Initial release of VaryGood
  • Configuration Wizard — 5-step guided setup: Setup, Colours, Typography, Extras, Tokens
  • Colour System — OKLCH-based 11-step colour scales with per-step overrides, lightness/darkness/hue/saturation controls, and quick-add presets (Danger, Success, Warning, Info)
  • Global Colours — Single-value primitives (White, Black, custom) alongside palette scales
  • Dark Mode — Light and dark mode variable modes with semantic mappings for both
  • Semantic Token Mapping — Guided visual flow with inline swatch picker, categorised token list, and live card preview reflecting your choices
  • Typography — Searchable font picker across all available Figma fonts, configurable type scale (xs–8xl), semantic role mappings (heading-xl through caption/code), variable-bound text styles with cap-height to baseline trim
  • Spacing — 4px or 8px base unit with derived multiplier scale (0.25–24×) and live spacing preview
  • Radius — Base value presets (0–24px) generating a full variable set (xs, sm, md, lg, xl, 2xl, full)
  • Shadows — Optional elevation effect styles across 7 levels (xs–2xl, none) with editable shadow values
  • Components — Button (Filled, Outline, Ghost, Danger × sm/md/lg × default/hover/pressed/loading/disabled), Input, Select, Checkbox, Radio, Switch — all fully bound to variables
  • Icon Slot System — Master icon component with 5 semantic colour variants (primary-foreground, foreground, danger-foreground, disabled-foreground, foreground-muted), setup instructions frame, and instance swap support in Button, Input, and Select
  • Component Documentation — Markdown descriptions embedded in every ComponentSet with anatomy, token bindings, layout specs, and Base UI reference links
  • Documentation Page — Auto-generated “VaryGood Design System” page with colour swatches, typography samples, spacing scale, and radius preview
  • Safe Incremental Updates — Real-time change tracking across every wizard step with diff indicators, floating Review & Apply bar, and safe patching of variables, styles, and component docs without destroying customisations
  • Selection Inspector — Scan any selection for fills, strokes, and text styles; auto-match to VaryGood variables; apply individually or in bulk; search for similar across the page; full undo support
  • Component Conflict Detection — Detect non-VG components sharing the same name, archive conflicting components, and bulk-swap instances to VaryGood equivalents
  • Live Selection Listening — Selection changes trigger debounced auto-rescan in the inspector
  • Existing File Detection — On open, shows VG vs total counts for variables, text styles, effect styles, and components with quick actions to edit, export, or inspect
  • Organised Pages — Components on “VaryGood Components”, icons on “VaryGood Icons”, documentation on “VaryGood Design System” — avoids overwriting existing user pages
  • Variable Scoping — Proper scope assignment (STROKE_COLOR, TEXT_FILL, FRAME_FILL, CORNER_RADIUS, GAP, WIDTH_HEIGHT) for clean variable pickers
  • Post-generation navigation — After first-time generation, automatically navigates to the Design System page
Roadmap
done 5-step configuration wizard with live preview
done OKLCH colour scales with dark mode
done Typography, spacing, radius, and shadow generation
done Base UI components (Button, Input, Select, Checkbox, Radio, Switch)
done Icon slot system with semantic colour variants
done Safe incremental updates with change tracking
done Selection Inspector with scan, match, apply, and undo
done Component conflict detection and instance swap
done Search for similar (bulk variable binding across page)
done Auto-generated documentation page
done Component description markdown
planned Preset icon pack integration (Lucide, Heroicons, Material, Font Awesome)
done Token export (CSS, Tailwind, DTCG JSON, TypeScript)
planned Import from existing file (analyse, reconcile, merge/archive)
planned Additional component kits (shadcn/ui, Radix UI)
planned Theme switching (swap entire colour schemes)
planned Sync with code repos (GitHub integration)