LupaLayer

Overlay Figma designs on any webpage for pixel-perfect polish

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.