Live Design Governance (v3, Spec 6.1)

Real-time companion alongside Figma.

The Live sidecar runs alongside Figma in the Desktop app. It watches the currently selected frame and updates in real time—no "Run Analysis" needed. Blue Painter shows live complexity score, active warnings, and contextual suggestions.

What it shows

  • Currently editing (flow name and screen)
  • Live complexity score for the current screen
  • Active warnings (missing states, off-token colors, custom components)
  • Suggestions (e.g. reuse ErrorModal, use design token)
  • Governance status (within team limits or not)

Live sidecar panels (Addendum A 6.5)

  • Responsiveness panel — Indicator: ✅ Responsive variants present / ⚠ Missing / ❌ Desktop-only. Hints like "This layout likely breaks at 375px width; consider stacking columns."
  • Accessibility panel — WCAG badge (e.g. WCAG 2.2 AA likely / AA issues found). Top 3 issues: contrast, focus style, icon-only buttons for screen readers.
  • Colorblind panel — Indicator: Colorblind-safe palette Full / Partial. Top issues (e.g. error and warning colors indistinguishable under deuteranopia).

All panels update in near real time as you tweak tokens or components.

Soft constraints (spec 6.1)

Live mode uses warnings, not hard blocks—designers can proceed. Warnings are context-aware (less noisy during exploratory work), defer-able ("I know, will fix later"), and include learning mode (explains why it's flagged). Governance presets (Startup Speed, Enterprise, Design Sprint, Pre-Handoff) control how strict the Live sidecar is.

Setup

Use the Desktop app (Mac, Windows) for best experience. The Figma plugin streams selection and frame data to the desktop app. Lightweight local analysis targets < 1 sec latency; full analysis syncs to cloud on demand.