UI Kit

Clean up your Design System in seconds.

Audit your files, identify unstyled layers, and transform into a structured system in seconds, and link them to your library instantly.

Key Features

1. Literal vs. System Precision:UI Kit distinguishes between Styles/Variables and manual (Literal) values. Even if a color looks correct, the plugin reveals if it's unlinked, helping you maintain a 100% compliant file.
2. Frequency Analysis (Usage Statistics): Every color and font includes an accurate usage count. Easily identify your "Core" values to define your Tokens and spot rare outliers or "almost-correct" styles that don't belong.
3. Click & Fix: Click any item to instantly select all corresponding layers across the document. Quickly batch-replace "Literals" with the correct Local/Library styles or Variables.
4. Real-time Sync:The interface stays in sync with your canvas in real-time. Any changes in Figma are reflected immediately in the audit report.
5. Multi-Page Scanning: Switch between analyzing your current page or the entire document to find hidden inconsistencies on any page.

Why use UI Kit?

Bridge the gap between raw canvas and production code. Export consistent token scales that your developers will actually love. UI Kit quantifies your technical debt by showing exactly how many times each value is used. Use the usage data to identify which values should become your Design Tokens. Identify "zombie" colors, remove manual overrides, and ensure your system is truly followed throughout the project.

Turn technical debt into design consistency. 🚀

MetaMask: 0xebdbcF5e72c1F882921c57085fac67d036aa8075