Instrument x Seth Akkerman
Projects Figma Variant Usage Tracker

Figma Variant Usage Tracker

A Figma plugin that scans your entire file and counts how many times each component variant is actually used — then stamps that count directly next to the variant in your component set.

The question came up: how often is each variant in a component set actually being used across a file? There are a handful of plugins that touch on this, but they’re limited, don’t surface the data in a useful way, or cost money. So the obvious move was to build one.

How it works

Select a component or variant set, hit Count Usage, and the plugin traverses every page in the Figma file — loading all pages asynchronously — collecting every instance node it can find. It then resolves each instance back to its main component, checks whether that component belongs to a component set, and tallies the count per variant name. The result is a breakdown showing exactly how many times each variant appears across the document. From there, a second action — Add Count Labels — writes that number as a text element six pixels to the right of each variant inside the component set, giving you a live, at-a-glance reference without leaving the canvas.

The build

The plugin is written in TypeScript against the Figma Plugin API, compiled down to vanilla JS for the browser runtime. The UI is intentionally minimal: a three-step workflow card, a primary count action, a label-writing action, and an advanced mode for scanning all components in the file at once. State is tracked in the UI layer so the label-writing step always has fresh counts to work from without re-scanning.

Why it matters

Variant usage data is genuinely useful for design system maintenance. Knowing that one status label variant appears 92 times while another appears twice changes how confidently you deprecate, rename, or restructure components. This same pattern — scan, count, annotate — could extend to: design system audits where teams want to see which components are over- or under-used before a refactor; handoff documentation where usage counts surface automatically alongside specs; or component retirement workflows where zero-count variants get flagged for cleanup. It’s a small plugin, but the underlying approach of resolving instances back to their component sets and writing metadata directly into the canvas is a reusable pattern worth building on.

Role
Design Engineer
Tools
Figma Plugin API TypeScript JavaScript
Video thumbnail for Figma Variant Usage Tracker