Custom Figma Plugin
Product Designer Figma Auditor — Standardizing UI Quality Across 200+ Products
Context
__________________________________________________________________________________
Case Study Snapshot:
Custom Figma Plugin — Product Designer Figma Auditor
Across AspenTech’s 200+ product ecosystem, UI quality drift (tokens, typography, spacing, components, naming) created slow design cycles, rework, and downstream UI defects. I led the creation of an internal Figma plugin—Product Designer Figma Auditor—to move quality checks from manual review into automated enforcement inside the design tool. Rolled out like a product (bi‑weekly releases, required usage, office hours), the auditor scans frames or full files for design-system compliance, flags violations with severity + fix guidance, auto-fixes common issues (e.g., local colors → tokens, rogue components → approved components), runs built-in accessibility checks, enforces structure/naming, and outputs scorecards + CSV exports for governance. Built with 3 engineers (TypeScript/HTML/JS; no backend), it drove 70% faster standardized mockups, 50% cycle-time reduction, 20% fewer downstream UI defects, and 50% higher component reuse—while improving accessibility quality and increasing engineering trust through daily designer usage.
__________________________________________________________________________________
Context:
AspenTech has a large, multi-suite ecosystem—200+ products—where consistent UI quality and reliable handoffs mattered as much as the designs themselves. With a globally distributed design team (initially 9 product designers, later expanded with +16 designers at Emerson), we needed a scalable way to ensure every file spoke the same visual language.
Problem:
Design quality drift was costly and constant: typography, spacing, auto-layout, variables/tokens, components, naming—everything was susceptible to inconsistency. That led directly to:
Slow design cycles (manual QA and rework)
Missed requirements and UI defects downstream
Handoff friction and engineering mistrust
Back-and-forth churn that burned time on both sides
Approach:
I treated this as a systems problem, not a “train harder” problem. I architected and directed a custom internal Figma plugin—Product Designer Figma Auditor—to shift quality checks from manual review into automated enforcement.
We rolled it out like a product:
Bi-weekly show-and-tells + release notes
Required usage with compliance visibility
Office hours to remove friction
Updates shipped every sprint (~2 weeks)
What shipped:
A designer-operated auditor that could run on a single frame or an entire design, producing both immediate fixes and trackable evidence:
Core capabilities:
Scans for design-system compliance: tokens/variables, components, text styles
Flags violations with severity + fix guidance
Auto-fixes (swap local colors → tokens, replace rogue components, standardize styles)
Accessibility checks (contrast, focus states, labels)
Enforces structure and naming (pages, frames, components)
Generates handoff artifacts + documentation support
Outputs:
A quality scorecard for fast decisions
CSV export for tracking and governance over time
Solid Architecture
TypeScript / HTML / JavaScript Figma plugin (no backend services)
Design system registry exported as JSON and referenced via NPM
Built with 3 engineers plus me (I owned PRD, architecture, UX prototype, and hands-on implementation); later transitioned to a junior developer for maintenance
Outcomes:
70% reduction in time to produce standardized mockups
50% reduction in cycle time
20% fewer UI defects downstream
50% increase in component reuse
Accessibility defects dropped because checks were built into the workflow, not added at the end
Daily usage by designers; engineering feedback became consistent: mockups were aligned, accurate, and trustworthy
Why it mattered
This plugin made design quality repeatable at scale. Instead of relying on individual discipline (and catching issues late), we automated governance inside the design tool—reducing rework, speeding handoffs, increasing consistency across 200+ products, and raising engineering confidence in every deliverable.