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 FeaturesComprehensive 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 tokensSmart 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 fontsDeveloper-Friendly📍 "Locate" button to jump directly to problematic layers📄 Export results as JSON for reporting🔢 Real-time issue counting📈 Summary statistics dashboard🚀 How to UseSelect a component, frame, or artboard you want to auditRun the Token Auditor pluginClick "Scan Selection"Review the issues detectedClick "Locate" to navigate to any flagged layerFix by applying appropriate styles or variablesExport JSON for team reporting (optional)💡 Use CasesFor DesignersAudit components before handing off to developersEnsure new designs follow design system guidelinesCatch inconsistencies during design reviewsMaintain token adoption across large design filesFor Design System TeamsMonitor design system complianceIdentify areas needing better tokenizationGenerate reports on token adoption ratesEnforce design standards across teamsFor DevelopersVerify designs use proper tokens before implementationReduce CSS/code inconsistenciesEnsure design-to-code accuracyCatch hardcoded values early🎓 What Gets Flagged❌ Hardcoded Values (Flagged)Colors: #FF0000 instead of color style/variableTypography: Manual "16px Inter" instead of text styleSpacing: 16px padding without spacing tokenDimensions: Fixed 320px width without variableRadius: 8px corner radius without tokenStrokes: 2px border without variableShadows: Custom drop shadow without effect styleOpacity: 80% without opacity variable✅ Tokenized Values (Not Flagged)Colors using styles (e.g., "Primary/500")Colors bound to variablesText using text styles (e.g., "Heading/H1")Spacing using spacing variablesDimensions bound to size variablesCorner radius using radius tokensStrokes using stroke styles or variablesEffects using effect styles🔧 ConfigurationThe 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- SystemFont families in this list won't be flagged (even without text styles), allowing flexibility for system fonts while catching random font usage.⚡ PerformanceFast Scanning - Optimized for large filesEfficient Detection - Smart checks avoid false positivesNo Build Required - Pure JavaScript implementationLightweight - Minimal impact on Figma performance🆘 Support & FeedbackFound 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 Historyv1.0.0 - Initial ReleaseComprehensive token detection for all design propertiesSmart variable and style recognitionJSON export functionalityReal-time issue breakdownLocate feature for quick navigation🎨 Perfect ForDesign Systems TeamsUI/UX DesignersProduct DesignersFrontend DevelopersDesign Ops TeamsAnyone maintaining design consistency🔐 Privacy & SecurityNo data is sent to external serversAll processing happens locally in FigmaNo tracking or analyticsExport is optional and stays on your device📄 LicenseFree to use🙏 CreditsBuilt 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! 🚀