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)=====================Semantic TokensCreate meaningful design tokens by mapping your primitives to real UI roles. Instead of using raw values like `primary/500` directly, you can generate structured tokens such as `color/text/primary`, `color/background/surface`, or `spacing/layout/container`.The plugin automatically fetches **existing variables from your Figma file** and lets you assign them to semantic tokens through a simple dropdown. It intelligently filters variables based on token type — showing **color variables for color tokens, string variables for typography, and number variables for sizes and spacing**.Tokens follow the common structure:`category / type / role`Users can customize categories, types, roles, and token separators to match their design system.For color tokens, the plugin also supports **multi-mode variables (Light/Dark)** when available in Figma.More features coming soon:• Multi-mode support (Light/Dark)• JSON export• Auto-binding––––––––––––––––––––Build your design system like a pro — not manually.