Token Lint: auditing and applying design tokens

[a-ng-d]

Hello everyone,

I would like to share a thought about what happens after design tokens land in a Penpot file: nobody can tell where the system is actually applied. I’d welcome your feedback.

The problem

Once tokens exist, two questions decide whether the system holds: where is my design system not applied, and how do I fix that in one action? Nothing answers either one today, so files drift: a color typed by hand, a spacing nudged, an override left in place. The token set becomes documentation instead of a source of truth, and nobody can state a coverage figure.

What I propose

URL to install: https://plugins.unoff.dev/penpot/token-lint/manifest.json

A plugin (working name: Token Lint) that audits a scope (selection, page, document) against the active token sets, returns a coverage rate, and groups deviations by value rather than layer by layer:

• Exact matches first (a hard-coded value equal to a token’s resolved value), then near matches with their residual difference, then orphan values.
• “Apply every exact match in scope” as a single, undoable action. Anything ambiguous waits for explicit validation.
• Creating a token when nothing fits: you pick an active set, the plugin proposes a name from the type and the value (color.3b82f6, spacing.12), and you edit it before it is applied.

One last note

It is built with Unoff, the open-source framework and CLI I maintain for Penpot and Figma plugins. Token Lint is the first plugin made with it, and I’ll come back to that story separately once there is something to show.

PS: The plugin isn’t published in the official catalog yet, but it is open to contributions on GitHub.

[LauraKalbag]

@a-ng-d WOAH this is soooo useful, thank you for creating and sharing it!

I can see this as being an incredible starting point for folks wanting to create token libraries from their existing designs too.

[a-ng-d]

Thank you a lot @LauraKalbag, for your feedback. I appreciate that you found value in this. If you have additional feedback, you can use this thread to write it all.

[LauraKalbag]

@a-ng-d I’ve just been using this plugin to help me create some basic tokens from an existing design file, so I have some more detailed UX feedback for you

Spacing and hierarchy
As the spacing above and below the “No comparable token” token text is similar height, it’s hard to tell how the information is grouped at a glance.

Token types
I realised that when I create a token from + Create token in the Typography section, it does assign the token the correct type based on its property. However those types or prroperties aren’t visible in the overview. This results in some slightly mysterious-looking numbers (I can just about guess the type by the shape and size of the numbers!) This means I wouldn’t really be sure how to name these tokens appropriately from this view. Maybe a label or icon would help here?

Forgive me if you’ve listed intended features anywhere, but I was wondering if you were going to include support for other token types like opacity, font family, and shadows?

Again, this is such a valuable plugin, thanks!

[a-ng-d]

Hi @LauraKalbag

I’m very glad to hear from you. Your feedback is really helpful, and you’re right: I’ll support the other token types to be fully compliant with the Penpot token environment.

I’ll take care of your notes and submit this plugin to the official plugin catalog

I’m almost ready to submit and I hope there is still room for that @Elena_Scilinguo

[a-ng-d]

I have updated the plugin to version 0.4.0, and the latest version covers your notes, @LauraKalbag
Nevertheless, I have to take a little more time with the shadow type.

For now, the audit covers opacity, font family, and rotation.

[a-ng-d]

Just a quick announcement.

The plugin is now available in the Penpot Hub.
Here is the link to take a look: Penpot Plugin | Token Lint

If you have any feedback, you can open an issue in the repository on GitHub