I Built a Tool That Audits Any Figma File — Here's What It Found

Figma files always look clean in the editor. But the moment you hand off to dev — rogue hex values, detached components, unstyled text nodes, spacing that's almost-but-not-quite on grid. Figma Inspector audits the whole file in seconds and tells you exactly what's wrong, where, and how often.

🔗 Try it: https://figmascope.dev
(runs entirely in your browser — your token never leaves your machine)

⸻

What the tool audits:
• Off-token colors and near-duplicate hex values
• Unstyled text nodes (used more than once with no shared style attached)
• Detached component instances (componentId not found in file)
• Hidden and locked layers across all pages
• Token coverage — what % of color uses are on named styles

What you get back:
• A file score (0–100) with letter grade
• Full issue list with severity, location, and occurrence count
• Color token breakdown — candidate tokens, untokenized drifters, rogue values
• CSS custom properties ready to paste into your stylesheet
• Shareable markdown/JSON report for PRs and design reviews

⸻

🛠️ Built with:
• Vanilla JS — no framework, no build step
• Figma REST API (read-only, personal access token)
• Runs 100% in the browser — zero server, zero telemetry

The whole thing is a single HTML + JS file you can inspect, fork, or self-host.

🔗 figmascope.dev

#FigmaInspector #FigmaTools #DesignSystem #UIDesign #FrontendDevelopment #DesignTokens #Figma #WebDevelopment #DeveloperTools #IndieHacker #DesignHandoff #CSSVariables #DesignQuality #AITools #DesignEngineering —

🔗 Links
Website: https://roman-tsisyk.com/
LinkedIn: https://www.linkedin.com/in/roman-tsisyk/
GitHub: https://github.com/RomanTsisyk

Видео I Built a Tool That Audits Any Figma File — Here's What It Found канала Roman Tsisyk — Android Systems