Design System Tokenizer

About this plugin

Design System Tokenizer helps you detect and fix missing design tokens on selected layers.

It identifies properties that are not bound to design system variables such as colors, typography, spacing (padding and gap), fills, and stroke, and automatically applies the closest matching token. Color tokens are applied using a priority order: mode first, followed by base tokens if no mode-specific match is found to enable Light/Dark theming.

Disclaimer: The tool works only in files with design tokens (variables or styles) already defined. Hopefully, Figma API allows me to tackle this in the future.

How it works?

1. Select a layer in your Design System Figma file that has variables and styles defined.
2. Run Design System Tokenizer plugin.
3. Review the properties that are missing design tokens.
4. Click “Apply Token To All” to automatically bind the closest matching design system variable.

Have a feature request or feedback? Send me an email.