Prop Spell

About this plugin

Instantly analyze and extract design properties from your Figma designs, starting with a deep dive into Colors. Prop Spell automatically scans your selection—including nested components and child elements—to reveal not just property values, but their complete context and meaning within your design system.🔮 Analyze Properties🎨 Currently supports Colors: Auto-detects all colors (including gradients) from selected elements and their children.🔜 Coming Soon: Support for Typography, Spacing, Effects, and more properties is on the way.🏷️ Shows property names: Displays variable and style names alongside their values.📍 Shows property context: Identifies if properties come from variables, styles, or are locally applied.🔍 Reveals property usage: See where each color is applied (e.g., fills, strokes, effects).✨ Smart deduplication: Shows each unique color only once.📋 Copy & Export👆 One-click copying: Click any color card to copy its value (Hex, RGBA) or name.⚡ Batch export: Use "Select All" then "Copy Value(s)" to copy all colors at once.🔤 Flexible formatting options: Format names exactly how your team needs them—from Title Case to snake_case.👁️ Customizable export formats: Choose what gets copied (Hex only, Hex + Name, Name: Hex, or Name only) with live preview.✨ Sample Generation🎯 Generate Samples: Create visual property documentation directly on your canvas.⚡ Batch generation: Use "Select All" then "Generate Sample" to create samples for all properties at once.📐 Content Density Controls: Choose between Compressed, Balanced, or Spacious layouts for your samples.🎛️ Complete Customization: Toggle visibility of hex values, names, aliases, badges, and application info independently for both UI and samples.👁️ Live preview settings: Preview updates in real time as you customize your generated docs.⚙️ Personalize Everything: Control what appears in interface cards and generated samples with granular toggles.🔄 Real-Time Updates⚡ Live updates: The property list refreshes automatically when you change your selection.💬 Bottom bar notifications: Feedback appears right in your selection bar—no more Figma popups.🎵 User Experience👁️ Grid & List Views: Switch between compact grid view and detailed list view for your color cards.🎶 Magical audio: Enchanting multi-layered audio for a delightful workflow.🔊 Sound effects: Audio feedback for actions, with a toggle to enable or disable.😊 Emoji feedback: Expressive emojis (📋 🎨 ✨ ❌) for clearer, friendlier messages.🌍 Internationalization: Available in English and Spanish with automatic language detection.Perfect for design system documentation, developer handoff, and maintaining consistency across your designs. More than a simple inspector—it's a complete design intelligence tool that helps you understand your system at a glance.Part of the Design Tokens Wizards toolkit!www.designtokenswizards.com