Design-System Teams Using Figma
Pixel-diff every PR against your Figma exports. Catch design drift the moment the agent introduces it.
The setup
Your design system lives in Figma. Engineering ships UI in React / Flutter / native. The gap between 'matches Figma' and 'compiles' is where bugs accumulate. CodeLoop's `codeloop_design_compare` runs pixelmatch per region against Figma exports under `designs/`, returning blocker regions for the agent to fix.
Workflow
- Export Figma frames. Drop PNGs under `designs/` (one per route), or configure `.codeloop/figma.json` for live Figma REST API fetching.
- Threshold per project. Configure `design_compare.threshold_pct` in `.codeloop/config.json` (default 2.5%).
- Verify on every UI change. When the agent edits a UI file, codeloop_design_compare runs and returns per-region diffs.
- Multi-viewport coverage. If frames are responsive (mobile / tablet / desktop), CodeLoop fans the comparison automatically.
- Repair tasks. blocker_regions feed back as concrete repair tasks the agent fixes before re-verifying.
FAQ
Do I need a Figma API token?
No. PNG exports under `designs/` work without any API access. The Figma REST integration is opt-in for live frame fetching.
What diff threshold should I use?
Default is 2.5% per region. Tighten to 1% for pixel-perfect brand work; loosen to 5% for rapid prototyping.
Does this work with Flutter and native apps?
Yes. CodeLoop captures the running app via codeloop_capture_screenshot — Flutter, React Native, native Xcode, Android, .NET WPF, Windows native are all supported.