Design System Like Pro

About this plugin

Design System Like Pro helps designers generate structured design tokens using Figma Variables — without manual setup.Stop creating color scales, typography tokens, and spacing systems manually. This plugin automatically generates primitive tokens and exports them into properly structured Figma Variable collections.––––––––––––––––––––✨ WHAT YOU CAN DO––––––––––––––––––––🎨 Generate Smart Color ScalesEnter a single base color and automatically generate 100–900 shades.Brightness-aware logic detects if your input color is light or dark and assigns the correct base shade dynamically (not always 500).🌗 Lightness Mode & Opacity ModeSwitch between:• Lightness-based shade generation• Opacity-based shade generationPerfect for overlays, states, and layered UI systems.🎯 Automatic Shade Position DetectionIf your base color is:• Light → it becomes 200–400 range• Dark → it becomes 700–900 range• Mid-tone → it becomes 500This ensures natural and balanced scales every time.🅰 Typography Tokens• Select font families from Figma• Auto-generate available font weights• Auto-create size scale (4px to 96px, increment 4px)• Line-height and letter-spacing tokens📏 Dimension TokensAuto-generate:• Radius (2px–96px)• Spacing (2px–96px)• Custom scalable dimension systems📦 Structured CollectionsAutomatically creates and manages:• Primitives collection• Group-based naming (primary/100, secondary/500)• Clean variable hierarchy using slash naming🔄 Safe Export to Variables• Creates collection if missing• Updates existing variables (no duplicates)• Exports color tokens properly as Figma COLOR variables––––––––––––––––––––💡 WHY USE THIS?––––––––––––––––––––Manual token setup is slow and inconsistent.This plugin:• Enforces scalable token architecture• Saves hours of setup time• Prevents naming mistakes• Keeps variables structured and production-readyBuilt for:• UI Designers• Design System Teams• SaaS Product Designers• Agencies––––––––––––––––––––🚀 WORKFLOW––––––––––––––––––––1. Create color groups inside Primitives2. Adjust lightness or opacity scale3. Generate shades4. Export to Figma Variables5. Start building with clean tokens––––––––––––––––––––⚙️ CURRENT VERSION––––––––––––––––––––• Color primitive generator• Lightness & Opacity modes• Auto brightness detection• Variable export (Primitives collection)More features coming soon:• Semantic tokens• Multi-mode support (Light/Dark)• JSON export• Auto-binding––––––––––––––––––––Build your design system like a pro — not manually.