Design System Validatordraft

A Figma plugin that runs system checks across your file before handoff — catching token mismatches, off-grid layout, undocumented variants, and structural breaks engineers will catch in PR review.

StatusShipped · running daily on IndusInd team
StackFigma Plugin API · TypeScript · custom rule engine
BuiltQ2 2025 — alongside IndusInd design system rollout
SourceClosed during PwC engagement · open-source release on roadmap

TL;DR

  • One click before handoff → plugin scans your frame for system violations and surfaces them inline with fix suggestions.
  • Catches ~40% of issues that would have otherwise reached engineering PR review.
  • Treats the design system as a contract: deviations are bugs, not preferences.

Why I built it

On the IndusInd design system, we had ~120 components and 6 consumer designers shipping daily. Manual review of token usage and component variants didn't scale. By the time issues reached engineering PR review, they were expensive to fix — designers had to re-open files, re-export, re-handoff.

The cheaper place to catch them: before handoff, inside Figma. Same problem solved 10× cheaper.

First version was a 200-line script. Real version became a proper plugin with a rule engine that consumer designers can extend.

How it works

  • Token check: any color / spacing / radius / shadow value not bound to a system token gets flagged with a suggested replacement.
  • Component check: detached instances, modified internals, undocumented variants — all surfaced.
  • Structural check: auto-layout violations, missing constraints, hard-coded text styles outside the system.
  • Fix suggestions: for each issue, the plugin suggests the closest valid system replacement — one click to swap.
  • Severity levels: errors block handoff; warnings prompt review; info is just FYI.

Stack

  • Figma Plugin API for full file traversal
  • TypeScript with a typed rule schema so consumer designers can add custom rules
  • Custom rule engine — declarative format, runs ~30 checks per second on a typical frame
  • No AI — this one is intentionally rule-based. Predictable beats clever for a validation tool.

Impact

~40%
Issues caught pre-handoff that previously reached eng PR review
1,200+
Files validated to date across engagements
12
Custom rules contributed by team designers

The clearest impact: design-engineering rework loops dropped noticeably after rollout. Designers also report cleaner instincts now — the validator's feedback shapes how they build, not just what they ship.

Try it

Available internally to IndusInd design team. Public Figma Community release planned once the rule engine is stable + documented. Email me if your team wants early access.