Design Mate

Design Mate: Engineering an In-Memory Design System Engine for Designers

How I solved organisational token drift, engineered sub-50ms recursive contrast math, and built live component spec blueprints directly on the Figma document.

Executive Brief

Project Dossier

Written for heads of design, hiring managers and product leaders who want the short version first.

Role & Ownership

Solo creator and architect. Product strategy, UX and TypeScript.

Seniority Scope

Lead Product Designer with 9+ years across product design and enterprise design systems.

Technical Stack

Figma Plugin API and TypeScript. V8 sandbox, webview RPC, W3C WCAG.

Status & Verification

Live in production and published on Figma Community.

The 30-Second Summary

The problem: In scaling product teams, design systems rot because compliance checks take minutes and break a designer's flow.

The solution: I designed and coded Design Mate, an ambient Figma plugin that runs deterministic audits in memory in under 50ms, catches token detachment before it spreads, and generates living component specs built from real child instances.

The outcome: 2,400+ designers use it, it holds a great community rating, and pre-review accessibility audit time drops by 85%.

Key Numbers

2,400+ active Figma designers

100% organic community growth.

Great community rating

Verified 5-star reviews on Figma Community.

<50ms audit latency

Runs locally, so there is no cloud network lag.

85% less audit prep time

Saved on every sprint review cycle.

01 / The Organisational Context
Why Enterprise Design Systems Suffer from "Silent Drift"

Across years of leading design systems in multi-squad enterprise teams, I kept seeing the same pattern. Designers don't break token rules because they're careless. They break them when staying compliant takes more effort than the pressure to ship allows.

Friction Point 1
Composite Fill Contrast Blindness

Most accessibility plugins only check the flat fill directly behind the text. Put that text on a semi-transparent overlay, a card over a gradient or dark-mode glass, and those checkers either report a false pass or fail outright.

Friction Point 2
Detached Component Instance Entropy

When a master component isn't flexible enough for an urgent edge case, designers detach the instance. That cuts the token link for good, and rogue hex values slip quietly into production code.

Friction Point 3
Spec Rot Within 48 Hours

Documentation boards drawn by hand with static rectangles and text labels go stale the moment the design systems squad adjusts a master component's padding or type token.

Friction Point 4
The Engineering Translation Gap

Handoff meetings turn into debates about hover states and margins. Front-end engineers inspect CSS by hand and guess whether a 15px gap was intentional or a typo for the 16px spacing token.

"Governance can't work as an after-the-fact reprimand. In high-velocity teams, compliance has to live inside the designer's viewport as an ambient, non-destructive guardrail that responds in under 50ms."

Brahmjit Singh · Core Design System Thesis

02 / Technical Architecture
Architecting Around the Constraints of the Figma Runtime

A professional-grade Figma plugin has to work within Figma's dual-thread isolation model: synchronous changes to the document tree on one side, and an asynchronous, non-blocking UI on the other.

Figma Dual-Thread Execution & RPC Protocol

1. Figma Main Thread: Plugin Sandbox (code.ts)

• Direct synchronous access to the SceneNode document tree

• Runs in Figma's local V8 JavaScript sandbox

• No DOM, no window object and no HTML rendering

• Recursive breadth-first node traversal with early bounding-box culling

• Every mutation wrapped in an isolated figma.commitUndo() boundary

2. Bidirectional RPC Bridge: postMessage Protocol

• Structured JSON payloads over parent.postMessage()

• Non-blocking, asynchronous telemetry streaming

• No canvas frame-rate drop, even during 400+ layer audits

• Two-way events: LocateInViewport, RebindToken and GenerateBlueprint

3. Plugin UI Thread: Webview iframe (ui.html)

• Full HTML5, CSS3 transitions and DOM rendering

• Real-time SVG Frame Health Score rings

• Interactive token color picker and tone calibrator

• No direct access to Figma document memory

• A compact floating HUD that stays out of the designer's way

Production Code: Background Extraction Engine (code.ts)

Instead of trusting a single parent fill, Design Mate walks up the layer stack toward the canvas root to find the surface the text actually sits on, then computes true relative luminance from it.

03 / Core Capabilities
The Four Architectural Pillars of Design Mate

Each feature was built to remove one specific source of friction in design systems governance.

Pillar 1
Sub-50ms Accessibility Math (WCAG AA / AAA)

Design Mate calculates relative luminance (L = 0.2126R + 0.7152G + 0.0722B) using the W3C formulas, entirely in local V8 memory. It checks normal text (4.5:1), large text (3:1) and interactive touch targets (48×48px) with zero cloud lag.

• WCAG 2.1 AA and AAA contrast checks

• Composite fill aware

• 48px touch target warnings

Pillar 2
Living Specs with Native InstanceNode Binding

Traditional redlines are static vector boxes that drift within days. When Design Mate generates a component blueprint, it places the master component as a live Figma child instance inside an auto-layout container.

"If the design systems squad changes the master button's corner radius from 8px to 12px, every living spec board in the file updates instantly. Spec rot simply stops happening."

Pillar 3
Automated Token Re-binding (rebindNodeRecursive)

Design Mate scans the document using figma.variables.getLocalVariablesAsync() along with paint styles. When a designer drops in a raw hex such as #2563EB, it suggests the nearest compliant token, for example brand-primary-600, and re-binds it in one click.

Pillar 4
Type-Safe Developer Handoff Contracts

Ambiguous visual redlines are replaced with copyable TypeScript interfaces (ButtonProps.ts) and Tailwind theme bindings that mirror the component's variant states and token mappings.

Auto-Generated Handoff Contract · ButtonProps.ts

export interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg'; // 36px | 44px | 52px (strict 8pt grid)
  state: 'default' | 'hover' | 'submitting';
  tokenBinding: 'tokens.color.brand.primary'; // 100% parity
  onAuthorize: () => Promise<void>;
}

export interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg'; // 36px | 44px | 52px (strict 8pt grid)
  state: 'default' | 'hover' | 'submitting';
  tokenBinding: 'tokens.color.brand.primary'; // 100% parity
  onAuthorize: () => Promise<void>;
}

export interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg'; // 36px | 44px | 52px (strict 8pt grid)
  state: 'default' | 'hover' | 'submitting';
  tokenBinding: 'tokens.color.brand.primary'; // 100% parity
  onAuthorize: () => Promise<void>;
}

AI-Ready Extensions

Two newer features carry the same thinking into AI-assisted builds. Spec Export turns a single selected frame into a Markdown brief with CSS variables, type scale, Tailwind tokens and a ready-to-run Cursor or Claude prompt. The Microcopy Assistant rewrites a selected text layer in different tones and applies the chosen version straight back to the layer.

04 / Product UX Craft
Solving the Canvas Footprint: Viewport Ergonomics

A good tool respects the craftsperson's workspace. Plenty of plugins fail simply because their large modal windows cover the very area the designer is working in.

1-Click Locate in Viewport

Click any flagged layer and Design Mate calls figma.viewport.scrollAndZoomIntoView([targetNode]) and selects it on the canvas. Nobody has to dig through nested layer trees to find a violation.

⌘Z Undo Transaction Safety

Every batch re-bind and spec creation sits inside its own undo boundary. If an automated fix shifts something unexpectedly, a single ⌘Z puts the canvas back exactly as it was.

05 / Measured Impact
Quantifiable Outcomes & Community Validation

How much design debt the engine removed across active product engineering squads.

"Design Mate has completely replaced three disconnected plugins across our design systems team. Auditing 400+ screens in under 50ms with zero token drift is game changing."

Verified Review, Figma Community

06 / Retrospective
What 9+ Years in Product Design Taught Me

Reflections on tooling, culture and where the Lead Product Designer role is heading.

Lesson 01
Tools Dictate Team Culture

Designers don't skip accessibility standards out of malice. They skip them when the feedback loop is slow or feels like a telling-off. Instant, positive feedback in under 50ms turns compliance into a habit nobody has to think about.

Lesson 02
The Builder-Designer Multiplier

Writing the TypeScript engine myself and working within its memory constraints gave me real empathy for front-end engineers. When a design leader understands the document graph under the canvas, handoff friction drops sharply.

Lesson 03
Deterministic Design for AI

As generative AI tools start producing hundreds of UI variants, deterministic in-memory governance engines will act as the immune system of a digital product, keeping brand and accessibility consistent at scale.