Super Design System Pro
by Ahmed Qurany
Generate color scales, typography systems, and design tokens (variables + styles) from a single base
FreeFigma
Installs
21
Likes
11
Users
123
Views
192
Preview
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 doesColorsGenerate accessible 25 → 900 color scales from one base color (cap 15 steps).Create Variables and/or Paint Styles with Light/Dark + extra custom modes.Build Semantic aliases (success/info/warning/error, etc.) from primary families.Map Properties (e.g., prop/surface/success/bg) from primary or semantic tokens.Export/Import your palette config for reuse.TypographyDefine a Group (e.g., “English”, “Arabic”) and choose Font Family.Select Base Size + Scale ratio (Major 3rd, Golden Ratio, etc.).Add “steps” above (bigger) or below (smaller) the base; rename (e.g., H1…H6, Body, Caption).Edit per-step Line Height, Letter Spacing, Paragraph Spacing.Pick font weights available for the chosen family (checkbox list).Generate Variables (grouped as typography//...) and Text Styles (Group / Step / Weight).Add extra Modes to the typography variable collection (e.g., “Brand B”, “Arabic”).Import/ExportExport just Variables, just Styles, or Both.Re-import JSON to instantly repopulate the UI and regenerate.How teams use it (examples)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.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.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.1Bug fixingVersion 1.0.2Save all changes you made to the plugin interface even if you closed isResets the plugin to its default state. Does not affect the Figma document.Option to delete all variables and styles created by this plugin from the Figma file.Version 2.0.0NEW: Brand new user interfaceIMPROVED: Font dropdown with search & scroll (fixes overflow)IMPROVED: Primary button contrastIMPROVED: Feature pill badge designFIXED: Font menu overflow issueFIXED: Content alignment with header
More file organization plugins plugins
View allTable Creator
by Gavin McFarland
Easily create tables that can be edited, resized and maintained using your design system
183.6K 6.8K
Rename It
by Rodrigo Soares
169K 3.7K
Clean Document
Paidby Yuan Qing Lim
Automagically organize and clean up your Figma document
106.3K 3K
Table Generator & Creator
Paidby Appcano
Generate and customize tables in seconds
104.1K 1.2K