# amgiflol

> Match web layouts with Figma designs through real-time element inspection, measurements, and visual overlays

Canonical page: [https://chrome-stats.com/d/amgiflol](https://chrome-stats.com/d/amgiflol)

## Overview

- **ID:** `amgiflol`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** sm17p
- **Category:** web-development
- **Daily users:** 2
- **Version:** 0.3.4
- **Last updated:** 2025-07-31
- **First published:** 2025-07-12
- **Size:** 1.61 MB
- **Data as of:** 2026-09-14
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/amgiflol/)
- **Website:** [https://github.com/sm17p/amgiflol/issues](https://github.com/sm17p/amgiflol/issues)

## Description

Tired of tedious manual checks and endless back-and-forth when verifying web designs? The <strong>Amgif Inspector</strong> streamlines the process, empowering designers and developers to achieve pixel-perfect implementations on any live webpage. Inspired by the "Inspect" functionality found in leading design tools, this extension bridges the gap between design mockups and live web implementations.

This tool focuses on providing robust debugging for <strong>standard HTML tags and their computed CSS properties</strong>, giving you a foundational understanding of any webpage's structure and styling. (Note: Framework-specific debugging is not supported at this time, ensuring a focused and lightweight experience).

Target Audience

<strong>Front-end Developers:</strong> Debug layouts and catch spacing issues as you code
<strong>UI/UX Designers:</strong> Validate live implementations against design specifications
<strong>QA Engineers:</strong> Identify visual inconsistencies during testing cycles
<strong>Product Managers:</strong> Review features with precise measurements and documentation

Key Features

Precision Tools

<strong>Distance Measurements</strong> - Instantly see precise measurements between elements and parents
<strong>Layer-to-Layer Measurements</strong> - Hold Alt/Option key to measure distances between any two elements
<strong>Dynamic Rulers</strong> - Mouse-following coordinate system for precise pixel positioning
<strong>Visual Overlays</strong> - Highlight elements and parent relationships for DOM understanding

Smart Inspection

<strong>Real-time Detection</strong> - Hover for immediate element information (tag, ID, classes)
<strong>Side Panel</strong> - Detailed properties, computed styles, and attributes with auto-move
<strong>Lock/Unlock Mode</strong> - Persistently track specific elements without losing focus

Productivity Features

<strong>Keyboard Shortcuts</strong> - Quick access to all features with intuitive shortcuts
<strong>Design Mode</strong> - Edit text directly on screen for quick content adjustments
<strong>Screenshot Capture</strong> - Save page state with active overlays for sharing
<strong>Smart UI Positioning</strong> - Auto-hide/move interface to avoid obstructing view

Advanced Visual Tools

<strong>Rainbow Layouts</strong> - Colorful nested layer visualization for complex structures
<strong>Floating Toolbar</strong> - Smart auto-positioning interface with minimal interference
<strong>Feature Voting</strong> - Vote for features you want developed next

Usage Scenarios

<strong>During Development:</strong> Catch spacing/alignment issues while coding - eliminate guesswork, reduce debugging time
<strong>Design Reviews:</strong> Verify implementation vs specifications with precise measurements and visual overlays
<strong>QA Testing:</strong> Identify visual inconsistencies across browsers using systematic inspection tools
<strong>Final Polish:</strong> Perfect pixel-level details before shipping with comprehensive measurement data

Quick Start Guide
<ol><li><strong>Install</strong> - Add extension from Firefox Add-ons  </li><li><strong>Navigate</strong> - Go to any webpage you want to inspect  </li><li><strong>Activate</strong> - Click the extension icon in toolbar  </li><li><strong>Inspect</strong> - Hover over elements for instant measurements  </li><li><strong>Advanced</strong> - Use shortcuts or floating toolbar for more features  </li><li><strong>Track</strong> - Lock elements for persistent monitoring</li></ol>
Why Choose Amgif Inspector?

<strong>Free &amp; Open Source</strong> - Completely free to use with open source code available on GitHub
<strong>No External Dependencies</strong> - Works entirely in browser, no login required for prototyping tools
<strong>Instant Setup</strong> - No data sent to external servers, immediate productivity gains
<strong>Workflow Integration</strong> - Active visual debugger for real-time development and design audits
<strong>Professional Grade</strong> - Built for workflows where precision matters and time is valuable

Current Status

<strong>Keyboard Shortcuts:</strong> Continually refining for industry-standard usability
<strong>Rainbow Layouts:</strong> Optimized for Chrome, Firefox enhancements in development
<strong>Framework Support:</strong> Focused on standard HTML/CSS for lightweight experience
<strong>User Feedback:</strong> Actively welcomed to shape future development

<strong>Ready to achieve pixel-perfect web designs with ease? Install Figma Inspector today and transform your visual debugging workflow.</strong>

## Rankings

- #67,222 — Overall
- #174 — figma
- #250 — ux

## Permissions and access

### Permissions

- `activeTab`
- `clipboardWrite`
- `downloads`
- `storage`

### Content script matches

- `*`

## Safety

- **Risk impact:** High risk impact
- **Risk likelihood:** Moderate risk likelihood

### Analysis details

- Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [Hoverify: All-in-one extension for web developers](https://chrome-stats.com/d/hoverify) — 494 users, 3.68 / 5
- [Website Inspector](https://chrome-stats.com/d/website-inspector) — 6 users
- [Designer Dev Mode](https://chrome-stats.com/d/designer-dev-mode) — 1 users
- [MiroMiro](https://chrome-stats.com/d/miromiro) — 16 users
- [Gripper - DevTools for Designers](https://chrome-stats.com/d/gripper-devtools-for-designers) — 4 users
- [Ruler Grid](https://chrome-stats.com/d/ruler-grid) — 40 users
- [GummyGrab](https://chrome-stats.com/d/gummygrab) — 1 users
- [VisBug](https://chrome-stats.com/d/visbug) — 2,291 users, 5.00 / 5
- [Specter — design inspector](https://chrome-stats.com/d/specter-design-inspector)
- [GFX Developer Toolset](https://chrome-stats.com/d/gfx-developer-toolset) — 1 users
- [Bugfrog.io](https://chrome-stats.com/d/bugfrog-io) — 1 users, 5.00 / 5
- [FontSpy](https://chrome-stats.com/d/fontspy) — 7 users, 5.00 / 5

---

Source: [Chrome-Stats](https://chrome-stats.com/d/amgiflol)