🎨 Color Finder – Figma Plugin

Color Finder is a powerful Figma plugin that helps designers quickly locate where specific colors or color variables are used across a file.

Whether you're auditing a design system, fixing inconsistencies, or debugging tokens — Color Finder makes it effortless.

---

🚀 Features

• 🔍 Search by Hex Code

  • Find all elements using a specific color (e.g. #007AFF, FF0000)

• 🎯 Search by Color Variables

  • Locate elements using design tokens (e.g. primary/500)
  • Supports partial matching

• 📄 Flexible Search Scope

  • Current selection (frame, group, component, etc.)
  • Current page
  • Entire file (all pages)

• ⚡ High Performance

  • Optimized traversal with batching
  • Handles large files efficiently

• 🧠 Smart Variable Detection

  • Detects local variables and collections
  • Resolves variable aliases

• 🎨 Visual Results

  • Color preview
  • Node type, property (fill/stroke/text), and page info
  • Click to navigate directly to element

---

🛠️ How to Use

1. Open your Figma file
2. Run Color Finder plugin
3. Enter:
   • Hex code → 007AFF
   • OR Variable name → primary
4. Choose scope:
   • Selection / Page / Entire file
5. Click Find Elements
6. Click any result to jump to it instantly

---

💡 Use Cases

• Design system audits
• Finding hardcoded colors
• Token migration
• Debugging inconsistent styles
• Large file cleanups

---

⚙️ Tech Overview

• Built using Figma Plugin API
• Traverses nodes with optimized batching
• Supports:
  • Fills
  • Strokes
  • Text colors
• Handles:
  • Variable collections
  • Aliases
  • Multiple color matches

---

🔒 Privacy & Security

• ❌ No network requests
• ❌ No data collection
• ✅ Runs entirely inside Figma

---

📁 Project Structure

├── code.js # Main plugin logic ├── ui.html # Plugin UI ├── manifest.json # Plugin configuration

---

🙌 Author

Built with ❤️ by Bitta Singha

• Linkedin: www.linkedin.com/in/bitta-singha-97a22a1b6
• Instagram: @bitta.ux

---

📄 License

This project is licensed under the MIT License.