Hi everyone! How we can make design systems more self-documenting and easier to audit, especially for larger teams working on accessibility and consistency. It would definitely automate our tasks
My Idea:
A Visual Variable Heatmap overlay in Figma that shows the usage frequency and distribution of:
-
Color tokens (e.g., how often a specific color is used across frames)
-
Text styles (e.g., font size, weight, line height combinations)
-
Spacing tokens (e.g., padding/margins used most often)
The heatmap could be toggled on/off per page or per component library, using soft color overlays (like low-opacity via styles) so it doesn’t interfere with design perception.
I have seen a few benefits of it:
Quickly identify inconsistencies (e.g., when a token is “official” but rarely used)
Highlight potential accessibility gaps (like overused color contrast pairs)
Help decisions on refactoring or retiring outdated styles
Show team members what’s used most often, which helps onboarding
Workflow example:
-
Enable “Variable Heatmap” in the top toolbar
-
Select the scope: current page, entire file, or Design System library
-
See overlays where:
-
Warm colors = most frequent usage
-
Cool colors = least frequent
-
Gray = unused/obsolete tokens
-
It could even export a usage report (CSV/PDF) for product teams or audits.
Would love to hear on attributes, workflow, and possible pitfalls.
Thanks! 😊