|
| 1 | +<div class="title-block" style="text-align: center;" align="center"> |
| 2 | + |
1 | 3 | # Amgiflol - Figma-like Layout Inspector For Web |
2 | 4 |
|
| 5 | +<p><img alt="title="amgiflol logo"" title="amgiflol logo" src="src/assets/icon.png" width="256" height="256"></img></p> |
| 6 | + |
| 7 | +[](https://github.com/sm17p/amgiflol/releases) |
| 8 | +[](https://github.com/sm17p/amgiflol/releases) |
| 9 | +[](license) |
| 10 | + |
| 11 | +**LOGO BY** - [b3an33](https://github.com/b3an33) |
| 12 | + |
| 13 | +</div> |
| 14 | + |
3 | 15 | A browser extension that helps with design audit. Match web layouts with Figma designs through real-time element inspection, measurements, and visual overlays. |
4 | 16 |
|
5 | | -- [Google Chrome](https://chromewebstore.google.com/detail/amgiflol/kpkpcekkflbmmmhjlnkbkfkdjfjnnonl/) |
6 | | -- [Mozilla Firefox](https://addons.mozilla.org/en-US/firefox/addon/amgiflol/) |
| 17 | +## Marketplace |
| 18 | + |
| 19 | +### Supported Browsers |
| 20 | + |
| 21 | +| Chromium | Firefox | |
| 22 | +| -------------------------------------- | ------------ | |
| 23 | +| Chrome, Edge, Brave, Vivaldi, Arc, Dia | Firefox, Zen | |
| 24 | + |
| 25 | +### Users |
| 26 | + |
| 27 | +[](https://chromewebstore.google.com/detail/amgiflol/kpkpcekkflbmmmhjlnkbkfkdjfjnnonl) [](https://addons.mozilla.org/en-US/firefox/addon/amgiflol/) |
7 | 28 |
|
8 | 29 | ## Target Audience |
9 | 30 |
|
10 | 31 | Any individual or web development teams including front-end developers, UI/UX designers, QA engineers, and product managers. |
11 | 32 |
|
12 | 33 | ## Usage Note |
13 | 34 |
|
14 | | -Personally, I'm building this tool to act as an active visual debugger, since it is what I struggle with the most. |
15 | | - |
16 | | -1. For others, it's intended to be used as an audit tool at the end or during development. Use it to reason about the layout like you would in a prototyping tool like Figma, or Adobe XD. |
17 | | -2. This tool won't automatically point out alignment or style mismatch with your designs. |
18 | | -3. You may find some shortcuts not implemented or upto the industry standard. |
19 | | -4. **This tool doesn't require you to login into any of your fav prototyping tool.** |
| 35 | +> [!IMPORTANT] |
| 36 | +> |
| 37 | +> Personally, I'm building this tool to act as an active visual debugger, since it is what I struggle with the most. |
| 38 | +> |
| 39 | +> 1. For others, it's intended to be used as an audit tool at the end or during development. Use it to reason about the layout like you would in a prototyping tool like Figma, or Adobe XD. |
| 40 | +> 2. This tool won't automatically point out alignment or style mismatch with your designs. |
| 41 | +> 3. You may find some shortcuts not implemented or upto the industry standard. |
| 42 | +> 4. **This tool doesn't require you to login into any of your fav prototyping tool.** |
20 | 43 |
|
21 | 44 | ## Current Features |
22 | 45 |
|
|
97 | 120 |
|
98 | 121 | --- |
99 | 122 |
|
100 | | -**License**: MIT | **Build**: Vite + WXT + Svelte + TypeScript |
| 123 | +**License**: [MIT](license) | **Powered By**: Vite + WXT + Svelte + TypeScript + bits-ui |
| 124 | + |
| 125 | +[license]: ./LICENSE.md |
0 commit comments