Super Design System Pro

About this plugin

Super Design System helps you go from one seed color and a base type size to a fully structured token system—variables and styles—in minutes.

What it does

Colors

1. Generate accessible 25 → 900 color scales from one base color (cap 15 steps).
2. Create Variables and/or Paint Styles with Light/Dark + extra custom modes.
3. Build Semantic aliases (success/info/warning/error, etc.) from primary families.
4. Map Properties (e.g., prop/surface/success/bg) from primary or semantic tokens.
5. Export/Import your palette config for reuse.

Typography

1. Define a Group (e.g., “English”, “Arabic”) and choose Font Family.
2. Select Base Size + Scale ratio (Major 3rd, Golden Ratio, etc.).
3. Add “steps” above (bigger) or below (smaller) the base; rename (e.g., H1…H6, Body, Caption).
4. Edit per-step Line Height, Letter Spacing, Paragraph Spacing.
5. Pick font weights available for the chosen family (checkbox list).
6. Generate Variables (grouped as typography/<Group>/...) and Text Styles (Group / Step / Weight).
7. Add extra Modes to the typography variable collection (e.g., “Brand B”, “Arabic”).

Import/Export

1. Export just Variables, just Styles, or Both.
2. Re-import JSON to instantly repopulate the UI and regenerate.

How teams use it (examples)

1. Brand palette → product UI: Start with #22D3C5 → generate 25, 50, 100…900, set green/500 as semantic/success/bg, map to prop/surface/success/bg, then export tokens for Dev.
2. Multi-language typography: Group “English” (Inter 16 @ 1.25 scale, steps H1–H6, Body1–Body4) and a second mode “Arabic” for a regional brand variant—same steps, different metrics.
3. Design system adoption: Publish a library with variables + styles. Designers apply styles quickly; developers consume variables via the JSON export.

Change Log:

Version 1.0.1

1. Bug fixing

Version 1.0.2

1. Save all changes you made to the plugin interface even if you closed is
2. Resets the plugin to its default state. Does not affect the Figma document.
3. Option to delete all variables and styles created by this plugin from the Figma file.

Version 2.0.0

1. NEW: Brand new user interface
2. IMPROVED: Font dropdown with search & scroll (fixes overflow)
3. IMPROVED: Primary button contrast
4. IMPROVED: Feature pill badge design
5. FIXED: Font menu overflow issue
6. FIXED: Content alignment with header