Show Colors

About this plugin

Plugin Overview

Show Colors is an advanced Figma plugin that provides comprehensive color inspection, analysis, and management capabilities. It automatically scans selected layers and displays all color properties in an organized, searchable interface.

Core Features

🎨 Comprehensive Color Detection

- Multi-layer Support: Analyzes fill and stroke colors across all layer types

- Text Color Analysis: Character-level color detection in text layers with different styling

- Gradient Support: Complete support for all gradient types (linear, radial, angular, diamond)

- Complex Properties: Detects colors from nested components, instances, and boolean operations

🔗 Intelligent Variable & Style Matching

- Auto-matching: Identifies local variables and styles that match detected colors

- Smart Comparison: Advanced algorithms with appropriate tolerance for color matching

- Gradient Matching: Sophisticated comparison including color stops, positions, and angles

- Cross-library Support: Works with both local and external library variables/styles

⚠️ Broken Link Detection

- Missing Variable Detection: Identifies variables that lost library connections

- Broken Style Detection: Detects inaccessible or improperly linked styles

- Visual Indicators: Clear "Missing" labels for broken color references

🔄 One-Click Replacement & Detachment

- Batch Replacement: Replace all color instances with variables or styles simultaneously

- Smart Targeting: Precisely targets specific color types (solid, variable, style, gradient)

- Text Segment Support: Handles character-level replacements in text layers

- Variable/Style Detachment: Remove bindings while preserving color values

🎯 Advanced Selection & Filtering

- Color-based Selection: Select all nodes containing specific colors

- Type Filtering: Filter selections by color type

- Real-time Search: Filter by name or color values

- Smart Categorization: Groups by type (Variables → Styles → Gradients → Solids)

Primary Use Cases

- Design System Maintenance: Identify and fix broken color references

- Color Standardization: Replace ad-hoc colors with design system variables

- Quality Assurance: Audit designs for consistent color usage

- Migration Projects: Convert legacy designs to modern color systems

This plugin provides a comprehensive solution for color management in Figma, combining basic color inspection with advanced design system management capabilities.