Token Finder is a small, sharp Figma plugin that closes the gap between design tokens and Tailwind. Tokens are powerful until someone has to use them — and at handoff, translating a layer’s values into utility classes is slow, manual, and inconsistent. Token Finder does it in place: pick a layer, read the values, get the classes.
The challenge
Design systems lose their speed at the exact moment they should create it — handoff. The designer knows the intent, the engineer needs the class, and the naming layer between them is manual lookup. Worse, nobody can quickly tell whether a value is on-token or quietly drifting.
- Token names are not always implementation-friendly
- Designers and engineers translate values to classes by hand
- Handoff becomes repeated, error-prone lookup work
- It is hard to see, at a glance, what is on-token vs off-token
- The system loses speed precisely where it should add it
Discovery & research
Token Finder was scoped from a real handoff tax — translating a layer's 16px into px-4 and #38BDF8 into text-sky-400 by hand, and never quite knowing what was on-token. Discovery was about where a design system actually loses speed, and how the same tool that translates values could quietly audit them.
The system loses speed exactly where it should add it
At handoff the designer knows the intent and the engineer needs the class, but the naming layer between them is manual lookup — slow, repetitive and inconsistent. The tool had to live at that seam, reading a layer and returning classes in place.
EvidenceReads the selected layer's real padding, radius, type and colour and maps each to a Tailwind class, inside Figma.
Nobody can tell on-token from drift at a glance
An exact token match and a 'nearest approximation' look identical in a raw-values panel. Surfacing that difference is what turns a convenience tool into a quiet enforcement point — drift caught at handoff instead of in production.
EvidenceExact matches and nearest approximations are flagged per value; off-token rows are labelled as such.
A handoff tool dies if it becomes a documentation platform
The temptation is to add configuration and docs until nobody opens it. Scope stayed ruthless: read selection, map four data points, copy. A bridge, not a second system to maintain.
EvidenceOne job, four data points (layout, radius, typography, colour), one-tap copy.
Engineers won't copy output they can't verify
Trust comes from showing the work. Every row puts the Figma raw value beside the translated Tailwind class, so the engineer can sanity-check the mapping before they paste it.
EvidenceEach row renders the raw value and the translated class side by side, each independently copyable.
How I approached it
I scoped the tool ruthlessly — it is a bridge, not a documentation platform. The interface reads the selection, groups values by data point (layout, radius, typography, colour), maps each to a Tailwind class, and marks whether the match is exact or the nearest approximation — the tell-tale of drift. Everything is one-tap-copy, in a calm dark dev aesthetic that feels at home next to the code.
Scoped the plugin to one job: value → Tailwind class at handoff
Mapped each token category (spacing, radius, type, colour) to utility output
Distinguished exact matches from nearest approximations — drift made visible
Designed swatches and monospaced values so colour and code read clearly
Made copy frictionless — per value and for the whole class list
Trade-offs
The tension was simplicity versus usefulness. Too much configuration and it becomes another heavy tool nobody opens; too little information and the output cannot be trusted. It had to stay a lightweight utility while handling real token-naming variation.
- Keeping the plugin lightweight and instantly readable
- Handling token-naming variation without configuration screens
- Making the output trustworthy enough to copy without checking
- Serving both designers and engineers in one compact UI
Final direction
The final tool is a compact, Figma-native, dark utility: select a layer, see each value mapped to its Tailwind class with exact/approximate flags and colour swatches, and copy. It supports the design system by making correct usage the path of least resistance — and surfacing drift at handoff instead of in production.
Outcomes
Token Finder shows how a small, well-scoped internal tool can remove repeated handoff friction and quietly enforce a token system at the same time. The design contribution is the exact-vs-approximate model — turning a translator into a lightweight auditor. [Add a live metric: lookups saved / drift caught per handoff once adopted.]
The handoff should not be where the system slows down.
A design system is only useful if people can apply it quickly. Tooling turns system intent into everyday behaviour — and the best place to catch drift is the place work already happens.