Token Auditor

About this plugin

Token Auditor is a lightweight yet powerful plugin designed for teams building multi-theme, token-driven design systems. It scans any selected component or frame and reveals layers that still rely on manual, hardcoded values instead of Figma variables/design tokens.

Token Auditor helps you:

✅ Maintain system-level consistency

✅ Improve handoff quality

✅ Support multi-brand and multi-theme architecture

✅ Speed up design system audits

✅ Reduce errors during component creation and updates

🌟 Key Features

Comprehensive Token Detection

✅ Colors - Fills and strokes not using color styles or variables

✅ Typography - Text without text styles, custom fonts, line-height, letter-spacing

✅ Spacing - Padding and gaps without spacing tokens

✅ Dimensions - Fixed widths, heights, and constraints

✅ Border Radius - Corner radius values without variables

✅ Stroke Weight - Border widths not tokenized

✅ Effects - Shadows and blurs without effect styles

✅ Opacity - Custom opacity values without tokens

Smart Analysis

🔍 Recursively scans all nested layers

🎯 Distinguishes between hardcoded values and design tokens

🚫 Skips component instances (scans main components only)

📊 Provides detailed breakdown by property type

🎨 Recognizes approved design system fonts

Developer-Friendly

📍 "Locate" button to jump directly to problematic layers

📄 Export results as JSON for reporting

🔢 Real-time issue counting

📈 Summary statistics dashboard

🚀 How to Use

1. Select a component, frame, or artboard you want to audit
2. Run the Token Auditor plugin
3. Click "Scan Selection"
4. Review the issues detected
5. Click "Locate" to navigate to any flagged layer
6. Fix by applying appropriate styles or variables
7. Export JSON for team reporting (optional)

💡 Use Cases

For Designers

1. Audit components before handing off to developers
2. Ensure new designs follow design system guidelines
3. Catch inconsistencies during design reviews
4. Maintain token adoption across large design files

For Design System Teams

1. Monitor design system compliance
2. Identify areas needing better tokenization
3. Generate reports on token adoption rates
4. Enforce design standards across teams

For Developers

1. Verify designs use proper tokens before implementation
2. Reduce CSS/code inconsistencies
3. Ensure design-to-code accuracy
4. Catch hardcoded values early

🎓 What Gets Flagged

❌ Hardcoded Values (Flagged)

1. Colors: #FF0000 instead of color style/variable
2. Typography: Manual "16px Inter" instead of text style
3. Spacing: 16px padding without spacing token
4. Dimensions: Fixed 320px width without variable
5. Radius: 8px corner radius without token
6. Strokes: 2px border without variable
7. Shadows: Custom drop shadow without effect style
8. Opacity: 80% without opacity variable

✅ Tokenized Values (Not Flagged)

1. Colors using styles (e.g., "Primary/500")
2. Colors bound to variables
3. Text using text styles (e.g., "Heading/H1")
4. Spacing using spacing variables
5. Dimensions bound to size variables
6. Corner radius using radius tokens
7. Strokes using stroke styles or variables
8. Effects using effect styles

🔧 Configuration

The plugin includes a customizable approved fonts list for your design system:

javascript/Default approved fonts

- Inter

- Roboto

- SF Pro Display

- SF Pro Text

- Helvetica Neue

- Arial

- System

Font families in this list won't be flagged (even without text styles), allowing flexibility for system fonts while catching random font usage.

⚡ Performance

1. Fast Scanning - Optimized for large files
2. Efficient Detection - Smart checks avoid false positives
3. No Build Required - Pure JavaScript implementation
4. Lightweight - Minimal impact on Figma performance

🆘 Support & Feedback

Found a bug or have a feature request? Please report issues or suggestions!

🏆 Benefits

⏱️ Save Time - Catch issues early, avoid rework

🎨 Consistency - Ensure design system compliance

🤝 Better Handoffs - Developers receive properly tokenized designs

📈 Quality Metrics - Track token adoption over time

🛡️ Prevent Drift - Maintain design standards automatically

📝 Version History

v1.0.0 - Initial Release

Comprehensive token detection for all design properties

Smart variable and style recognition

JSON export functionality

Real-time issue breakdown

Locate feature for quick navigation

🎨 Perfect For

1. Design Systems Teams
2. UI/UX Designers
3. Product Designers
4. Frontend Developers
5. Design Ops Teams
6. Anyone maintaining design consistency

🔐 Privacy & Security

1. No data is sent to external servers
2. All processing happens locally in Figma
3. No tracking or analytics
4. Export is optional and stays on your device

📄 License

Free to use

🙏 Credits

Built for the design community to improve design system adoption and consistency.

Ready to audit your designs? Install Token Auditor today and ensure your design system is properly implemented! 🚀