DS Extract + Audit

A plugin concept exploring how AI could help maintain a Figma design system over time — generating components, documenting patterns, organizing tokens as they evolve. The emphasis is giving the person maintaining the system a head start, not replacing their judgment.

Problem to Solve

Vibe-coded designs, screens built quickly with AI tools, rapid iteration, or freelance handoffs, have no underlying design system structure. Colors are hardcoded, text styles are inconsistent, buttons are raw frames instead of components, spacing is arbitrary. The visual output looks right, but the file is a mess underneath.

Rebuilding a file like that into a real, token-based design system by hand is one of the most tedious tasks in design, and it's exactly the kind of work that's ripe for automation.

Solution Overview

A Figma plugin with two modes. Extraction Mode scans a selected frame, detects and deduplicates typography, colors, and structural elements, and turns them into a categorized, filterable list a designer can review and generate into structured design system pages.

Structure Mode handles the token layer: mapping each extracted color or text style to a named variable and binding it back to the source nodes.

Results

The plugin already automates the most tedious part of retrofitting a design system: pulling every unique color and text style out of a messy file and turning them into a reviewable, structured starting point.

• Full node-tree scanning with deduplication for both typography and color
• Structured design system pages generated automatically from a selection
• Color variables and text styles created and bound directly to source nodes in Structure Mode
• Published to the Figma Community, currently unpublished while active development continues

Next Steps

Currently mid-way through a five-phase roadmap: fixing known issues in the typography layout and color-binding flows, building a full Primitive → Semantic → Component token hierarchy, rebuilding Structure Mode into a bulk component-property editor, generating real documentation-quality pages, and eventually an Audit mode that scans existing design systems for drift.