LupaLayer

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

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.