LupaLayer

Tracking since Apr 1, 2026.

Changelog

• Apr 17, 2026
  description

  LupaLayer is a pixel-perfect development tool that overlays Figma designs directly on your localhost app. No more switching between browser tabs and Figma — see exactly where your implementation differs from the design.
  
  Features:
   - Design Overlay — Load images via URL, file upload, or directly from Figma. Adjust opacity, hue, saturation, and scale. 
  - Ruler Tool — Draw measurement rectangles with graduated tick marks on all four edges.
   - Line Tool — Measure distances between any two points. Hold Shift to snap to straight angles.
   - Guide Lines — Place horizontal and vertical guides spanning the full viewport.
   - Edit Tool — Move and resize rulers, lines, and guides. Double-click lines to type exact pixel values.
   - Font Inspector — Hover over text to see font family, size, weight, line height, letter spacing, and color.
   - Color Picker — View CSS colors on hover. Click for Chrome's native EyeDropper to pick any pixel color.
   - Floating Toolbar — Compact, draggable toolbar with all tools, color presets, and keyboard shortcuts.
   - Viewport Presets — Resize your browser to common screen sizes (iPhone, Tablet, Laptop, Desktop).
   - Figma Integration — Paste a Figma frame URL to automatically fetch and overlay the design.
   - Export/Import — Save and share measurement layouts as JSON files.
   - Undo/Redo — Full undo history with Alt+Z / Shift+Alt+Z.

  LupaLayer is a pixel-perfect development tool that overlays designs directly on your website or localhost. No more switching between browser tabs and Figma or other design programs. See exactly where your implementation differs from the design.
  
  Features:
   - Design Overlay — Load images via URL, file upload, or paste designs directly from Figma and other design tools. Adjust opacity, hue, saturation, and scale. 
  - Ruler Tool — Draw measurement rectangles with graduated tick marks on all four edges.
   - Line Tool — Measure distances between any two points. Hold Shift to snap to straight angles.
   - Guide Lines — Place horizontal and vertical guides spanning the full viewport.
   - Edit Tool — Move and resize rulers, lines, and guides. Double-click lines to type exact pixel values.
   - Font Inspector — Hover over text to see font family, size, weight, line height, letter spacing, and color.
   - Color Picker — View CSS colors on hover. Click for Chrome's native EyeDropper to pick any pixel color.
   - Floating Toolbar — Compact, draggable toolbar with all tools, color presets, and keyboard shortcuts.
   - Viewport Presets — Resize your browser to common screen sizes (iPhone, Tablet, Laptop, Desktop).
   - Figma Integration — Paste a Figma frame URL to automatically fetch and overlay the design.
   - Export/Import — Save and share measurement layouts as JSON files.
   - Undo/Redo — Full undo history with Alt+Z / Shift+Alt+Z.

• Apr 17, 2026
  short_description

  Overlay Figma designs on any webpage for pixel-perfect polish

  Overlay design images (such as Figma designs) on any webpage for pixel-perfect development

• Apr 17, 2026
  host_permissions

  http://localhost/*, http://127.0.0.1/*, https://api.figma.com/*, https://*.figma.com/*

  http://localhost/*, http://127.0.0.1/*

• Apr 17, 2026
  permissions

  activeTab, storage, windows, scripting

  activeTab, storage, windows, scripting, clipboardRead

• Apr 1, 2026
  short_description

  Overlay Figma designs on your localhost for pixel-perfect polish

  Overlay Figma designs on any webpage for pixel-perfect polish

• Apr 1, 2026
  permissions

  activeTab, storage, windows

  activeTab, storage, windows, scripting

Permissions & access

Permissions

activeTabstoragewindowsscriptingclipboardRead

Host access

http://localhost/*, http://127.0.0.1/*

Screenshots

Similar extensions

Alternatives to LupaLayer, ranked by description similarity.

Overlayly - Pixel Perfect Design Comparison

Overlay design screenshots on websites for pixel-perfect development. Free and open source.

97

Overlint - Figma Overlay Tool

A pixel-perfect comparison tool to identify discrepancies between Figma designs and implementation

66

Yakkuracy

A Chrome extension built with Vite and React

2

★ 5.0

PixelPeek

Inspect CSS visually on any webpage without opening DevTools — a Figma Dev Mode for the live web.

16

figma-pixel

figma-pixel

1

PixLore-Convert any website into Figma

Converting any website into fully editable Figma designs, and begin your own designs.

813

Over.fig – Compare design to website in real time

Bridge the gap between design and code. Convert your Figma into a pixel-perfect semi-transparent overlay directly on your web page.

1.0K

★ 4.6

Design Overlay Tool

Overlay design mockups on web pages for pixel-perfect implementation verification

32

★ 5.0