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

1. 🎨 Currently supports Colors: Auto-detects all colors (including gradients) from selected elements and their children.
2. 🔜 Coming Soon: Support for Typography, Spacing, Effects, and more properties is on the way.
3. 🏷️ Shows property names: Displays variable and style names alongside their values.
4. 📍 Shows property context: Identifies if properties come from variables, styles, or are locally applied.
5. 🔍 Reveals property usage: See where each color is applied (e.g., fills, strokes, effects).
6. ✨ Smart deduplication: Shows each unique color only once.

📋 Copy & Export

1. 👆 One-click copying: Click any color card to copy its value (Hex, RGBA) or name.
2. ⚡ Batch export: Use "Select All" then "Copy Value(s)" to copy all colors at once.
3. 🔤 Flexible formatting options: Format names exactly how your team needs them—from Title Case to snake_case.
4. 👁️ Customizable export formats: Choose what gets copied (Hex only, Hex + Name, Name: Hex, or Name only) with live preview.

✨ Sample Generation

1. 🎯 Generate Samples: Create visual property documentation directly on your canvas.
2. ⚡ Batch generation: Use "Select All" then "Generate Sample" to create samples for all properties at once.
3. 📐 Content Density Controls: Choose between Compressed, Balanced, or Spacious layouts for your samples.
4. 🎛️ Complete Customization: Toggle visibility of hex values, names, aliases, badges, and application info independently for both UI and samples.
5. 👁️ Live preview settings: Preview updates in real time as you customize your generated docs.
6. ⚙️ Personalize Everything: Control what appears in interface cards and generated samples with granular toggles.

🔄 Real-Time Updates

1. ⚡ Live updates: The property list refreshes automatically when you change your selection.
2. 💬 Bottom bar notifications: Feedback appears right in your selection bar—no more Figma popups.

🎵 User Experience

1. 👁️ Grid & List Views: Switch between compact grid view and detailed list view for your color cards.
2. 🎶 Magical audio: Enchanting multi-layered audio for a delightful workflow.
3. 🔊 Sound effects: Audio feedback for actions, with a toggle to enable or disable.
4. 😊 Emoji feedback: Expressive emojis (📋 🎨 ✨ ❌) for clearer, friendlier messages.
5. 🌍 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