Design System Generator from Figma make

About this plugin

🎨 Design System Generator — Instant Design Tokens from Any DesignTurn any Figma selection into a complete, production-ready design system in seconds.━━━━━━━━━━━━━━━━━━━✦ WHAT IT DOESSelect any frames, components, or screens in your Figma file, and the plugin will:• 🎨 Extract all colors and auto-generate complete primitive palettes (50–900 scales)• 🏷️ Create semantic tokens with context-aware role assignment (bg/primary, text/success, indicator/info, etc.)• 🔤 Build text styles from your typography (Display, Heading, Title, Body, Label, Caption)• 🌈 Capture gradients as reusable paint styles with variable-bound stops• 🌑 Extract shadows and create effect styles (shadow/sm → shadow/2xl)• 📐 Detect spacing tokens (border-radius, gap, padding) from Auto Layout• 📋 Generate beautiful preview boards showing your entire system at a glance━━━━━━━━━━━━━━━━━━━✦ SMART COLOR INTELLIGENCEUnlike basic color extractors, this plugin understands HOW colors are used:• Context-aware analysis — Tracks layer depth, parent backgrounds, font weights, and icon containers• Semantic role assignment — Automatically assigns roles like text/primary, bg/secondary, indicator/success based on actual usage patterns• WCAG contrast calculation — Pairs each text color with its background for accessibility validation• Indicator detection — Recognizes icon container patterns (40–80px squares with vector children)• On-accent detection — Identifies light text on saturated backgrounds (buttons, banners)━━━━━━━━━━━━━━━━━━━✦ OUTPUT STRUCTUREVariables are organized into two collections:Primitives — Raw color values organized by hue family (blue/500, neutral/100)Semantic — Role-based aliases pointing to primitives (text/primary → neutral/900)Each semantic token includes detailed descriptions explaining when and where to use it.━━━━━━━━━━━━━━━━━━━✦ FEATURES• One-click generation — Select → Generate → Done• Full undo — Revert everything with one click• Preview boards — Visual documentation of your entire system• Auto Layout preview — Boards use HUG sizing and auto layout for clean presentation• Dark/light UI — Syncs with Figma's theme automatically• No internet required — 100% local, your designs never leave Figma━━━━━━━━━━━━━━━━━━━✦ USE CASES• Kickstart a design system from existing screens• Audit color consistency across a project• Generate tokens for handoff to developers• Create visual documentation for stakeholders• Standardize design tokens across teams━━━━━━━━━━━━━━━━━━━Built with ❤️ for designers who want structure without the tedium.