Principal
A Figma intelligence layer that turns a design system from a static library into an auditable, documented, machine-readable product system.
Role
Lead Product Designer & Architect
Project Type
Figma Plugin Ecosystem
Focus
Semantic Design System Infrastructure
The shift
A design system needed memory, not another checklist
In a large product environment, design system quality is mostly lost in small, repeated failures: undocumented overrides, stale components, inconsistent variants, and rules that live only in people's heads.
Principal started from that pain. I wanted the system to understand itself: what components exist, where they are used, whether they are healthy, and what rules both humans and AI agents should know before touching them.
What I built
The core plugin scans files and turns Figma structure into semantic data
Principal performs deep analysis of design system and product files, then writes structured metadata back into the file. The output becomes a semantic registry that other tools can read instead of re-parsing the canvas every time.
This made the project bigger than a plugin UI. It became infrastructure for audits, documentation, navigation, handoff, and future AI-assisted design tasks.
Product value
The useful part is not AI itself, it is AI with design-system context
Automated Audits & Auto-Fix
Scans for detached instances, outdated styles, suspicious overrides, and drift from the source library, then points teams toward specific fixes.
Usage Analytics
Shows where components are used and which patterns are fading out, so design system decisions are based on actual product files rather than assumptions.
AI-Driven Documentation
Uses LLMs to turn component structure into practical documentation, usage guidance, and implementation rules.
Semantic Layer Generation
Creates a metadata map of the design system so companion tools and AI agents can understand intent, not just layer names.
Ecosystem decision
One engine, several focused tools
I deliberately avoided building one oversized dashboard. Principal acts as the engine, while DevPal, ComponentCard, and ComponentsNav expose the same data in the moments where people need it.
That architecture kept each interface small: developers see handoff status in Dev Mode, designers see documentation on the canvas, and teams get a navigable index inside dense files.
Outcome
From static components to a living system
- Reduced manual design system maintenance by more than 60% by replacing repeated inspections with structured scans and targeted fixes.
- Improved onboarding by making component rules, status, and usage easier to discover through on-canvas and plugin-based tools.
- Prepared the system for AI-driven automation, including future workflows like localization and intent-aware component operations.