SparkGen

About this plugin

SparkGen: The AI Design Assistant (v6)The world's first Bilingual AI Design Assistant. Generate production-ready design systems, color palettes, font pairings, and AI prompts — all inside Figma. Now with Dark Mode & Real-time Sync.Official Website: https://www.sparkgen.net━━━━━━━━━━━━━━━━━━━━━━📦 FREE FIGMA FILE — See it in actionWe built a complete design system using SparkGen and shared it for free.→ Duplicate it, explore the variables, and use it as your starting point:SparkGen Design System Kit ━━━━━━━━━━━━━━━━━━━━━━NEW IN v6 - Components & Documentation GenerationStop designing common UI patterns from scratch. Generate 20 production-grade, auto-layout components instantly bound to your design system variables.Turn your variables and styles into a publication-ready, interactive design specification artboard in one click.Core Features:AI Design System GeneratorStop building from scratch. Generate a complete, scalable variable structure in one click.3-Tier Architecture: Primitives → Semantic Tokens → ComponentsResponsive by Default: Built-in Mobile, Tablet & Desktop modes — with independent Smart Scale toggles for Spacing and Radius. Mix and match exactly what adapts across devices.One-Click Dark Mode: Auto-generate a complete Light + Dark variable system. Every color, component, and state mapped perfectly for both modes.5 Framework Presets: Tailwind CSS, Radix UI, Material Design 3, Essential SaaS, or Apple HIG — get framework-aligned color scales instantly.Smart Bindings: Automatically binds created styles to variables.2. Abstract Background DesignerCreate stunning, unique backgrounds for your mockups and social posts.Mesh Gradients: Fluid, organic color blends.Geometric Patterns: Dots, grids, and hexagons with gradient support.Vector Export: All outputs are infinite-resolution SVGs.3. Smart Color PalettesGenerate harmonious accessibility-ready palettes.AI Harmony: Split-Complementary, Triadic, Tetradic, and more.Accessibility Check: Real-time WCAG contrast checking with "Auto-Fix".Colorblind Simulator: Preview your palette as Protanopia/Deuteranopia users see it.4. Intelligent Font PairingFind the perfect typography for your brand.Context-Aware: Suggests fonts based on Industry (Tech, Fashion) and Mood.Bilingual Support: Perfect pairings for English & Arabic layouts.Live Preview: Test fonts on real canvas text before applying.Typography Scaling: Control your hierarchy! Use our smart scale selector to scale your fonts with ratios like the Golden Ratio or Major Third.Quick Styles is unified with our Variables engine! Use AI or select fonts to generate responsive typography sizes.5. Smart UI Kits & Components — NEW!360° Token-Bound: Every component automatically inherits your local color, spacing, radius, and typography tokens with purple variable pills preserved.6 Curated Suites: Forms (inputs, date pickers, selects, toggles, textareas), Actions (full button hierarchy, tab bars, tag chips), Modals, Navigation (stepper wizards, breadcrumbs, pagination), and Feedback (status badges, alert banners, toasts).Auto Layout 5.0: Built with responsive constraints, fluid flex properties, and min/max boundaries that adapt seamlessly across Mobile, Tablet, and Desktop.Flexible Insertion: Drop single elements, insert an entire functional suite (1 credit), or generate all 20 components onto your canvas in a clean multi-column layout (3 credits).Bilingual & RTL Ready: Symmetrical spacing and typography alignments built for English and Arabic interfaces out of the box.6. Intelligent Linker — Connect your canvases to variables asynchronously in seconds.Multi-Style Bindings: Links typography, colors, spacings, corner radiuses, shadows, and grids natively.Asynchronous Matching: Processes layers in chunks of 50 with a 20ms sleep buffer, keeping Figma's single-threaded canvas viewport completely responsive.RGB Euclidean Color Distance: Compares raw color codes, calculates distances against active document color profiles, and applies semantic name tie-breakers.Shadow & Grid Proximity: FUZZY-matches columns, square grids, offset values, blur, and spread properties against active local styles. Parallel Font Loading: Concurrently loads required web font family signatures to prevent isolated iframe sandbox write errors.7. Automated Design System Docs — NEW!Full Document Audit: Dynamically scans your active Figma file for color variables, float tokens (spacing & radius), text styles, elevation effects, and component sets.Live Variable Swatches: Generates detailed specimen cards displaying token names, HEX/RGB values, opacity, scopes, and semantic aliases — natively bound to variables so updates reflect in real-time.Modular Section Toggles: Pick exactly what to document — Project Cover & Metadata, Color Scales, Typography Hierarchies, Spacing Rulers, Corner Radius Pills, Elevation/Shadows, and Component Galleries.Smart Canvas Placement: Automatically detects existing canvas boundaries and positions the 1,360px documentation master frame neatly beside your workspace with zero overlap.Seamless Dev Handoff: Delivers a clean, centralized visual specification for developers and stakeholders, eliminating inspection confusion and manual style-guide maintenance.Platform ReliabilityLive Sync — Credits and plan status update in real-time. No refreshing needed.Fully Bilingual — Every screen, error, and button localized in Arabic & English with native RTL layout. Switch languages in one tap, even from the Welcome screen.Why SparkGen?🇪🇬 Fully Bilingual: The first plugin built from the ground up for Arabic (RTL) and English users.Single-ID System: Seamless sync between Plugin and Dashboard.Fair Pricing: Pay only for what you use. Standard tasks cost 1 credit; complex responsive tasks cost 3.PlansFree: 25 Credits/mo (Forever free!)Starter: 100 Credits/moPro: 500 Credits/moUltra: 5,000 Credits (For Agencies)━━━━━━━━━━━━━━━━━━━━━━📦 Want to see a real output first?Explore the free Figma file built entirely with SparkGen:SparkGen Design System Kit ━━━━━━━━━━━━━━━━━━━━━━Start creating smarter today!