Design comparison

The Design tab lets you upload a static comp and line it up against the live site for pixel checks. It supports PNG, JPEG, and WebP exports from design tools like Figma or Sketch.

Upload a design

Click "Upload Design" to choose an image. Designer Tools stores one design per URL, so the next time you visit the same page the comp loads automatically. Replace or delete the image from the same modal when the design changes.

Adjust scale and alignment

Use the scale slider and horizontal or vertical offsets to line the comp up with the live DOM. Alignment shortcuts let you pin the design left, centered, or right. The extension tracks device pixel ratio so rendering stays crisp on HiDPI screens.

Switch display modes

• Default: renders the comp at full opacity so you can quickly compare visuals.
• Overlay: applies a tint (cyan, magenta, black, or white) and controlled opacity for easier blending.
• Wireframe: converts the comp into a monochrome outline to validate layout without color noise.
• Difference: highlights pixel differences in contrasting color, ideal for regression checks.

Display modes and filter colors are per-page. When you adjust them once they persist with the same comp until you reset or remove the design.

Tier requirements

The Design tool is a gated feature. Trial users get full access during the 14-day window; starter plans see an upgrade CTA. If access is restricted, the toolbar routes you back to Measure so you never lose your current selection.