Figma plugin · PreviewUI mock

The plugin, as it will look inside Figma.

A pixel-accurate 420×640 preview of the DesignLensOS side panel. All 4 phases are wired up so you can review copy, layout and flow before we package the .fig plugin.

Figma — Untitled

DesignLensOSv0.1

Selection:3 framesOnboarding · Persona-Eva · SWOT

1 · Selection from Figma

Waiting for selection

Select one or more frames in Figma to start an audit.

Click Run audit — we'll send each selected frame to your audit backend and produce one report per frame.

Connected · ai.gateway.lovable.dev2 credits · Phase 1 ready

420 × 640 plugin window · figma.showUI(__html__, { width: 420, height: 640 })

Hosted as a real Figma plugin

manifest.json + code.ts (sandbox) + ui.html iframe. The UI you see on the left is exactly what ships inside the iframe.

Selection-driven

Every action operates on the user's current frame/artboard selection in Figma. The header chip updates live with what they've selected.

Four phases, one panel

Tabs map to the 4 phases: Audit (research artifacts) · Validate (wireframes vs audit) · Inspect (a11y & consistency) · Research (surveys, tests, video emotion).

Findings drop into Figma

Recommendations can be posted as native Figma comments on the exact frame, or pinned as annotation stickers.

Next step

Once you approve this UI, we'll generate the manifest.json, code.ts and ui.html so it can be loaded into Figma as a development plugin and submitted to the Community.