# grazy-html2figma

> Pick any HTML elements on the page and convert them to JSON to be transferred to figma. Use this as a visual debugger or a tool to communicate with your LLM AI partner.

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

## Overview

- **ID:** `grazy-html2figma`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** Sorin Jurcut
- **Category:** web-development
- **Daily users:** 5
- **Weekly downloads:** 1
- **Version:** 1.76.0
- **Last updated:** 2026-04-13
- **First published:** 2025-12-17
- **Size:** 60 KB
- **Data as of:** 2026-09-06
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/grazy-html2figma/)

## Description

Pick any HTML elements on the page and convert them to JSON to be transferred to figma.
Audit your current website for layouting issues. As a designer, learn how HTML tags work.

Use cases:
Usage Examples:

Design System Development
You're building a design system and need to keep Figma components in sync with your production code.

AI-to-Design Workflows
You're using AI tools (v0, Claude Artifacts, ChatGPT) to generate UI mockups, and want to refine them in Figma.

Competitive Analysis & Inspiration
You see a great UI pattern on a competitor's site or SaaS product and want to study/adapt it.

QA & Design Review
Developers implemented a design, but something looks off. Designer wants to compare what was built vs. what was designed. No Storybook? No problem.

Documentation & Design Handoff
You need to document existing production UIs or create a pattern library from live sites.

Learning & Reverse Engineering
Junior designer wants to learn from great designs (Stripe, Linear, Notion)

Rapid Prototyping & Client Presentations
Sales team needs a quick mockup showing how your product could look with a client's branding.

Migration Projects
Migrating from an old UI framework to a new design system. Allows you to audit existing ui bits with less overhead than manually recreating elements in figma

The Most Powerful Use Case: Bridging Code & Design
The real magic is bidirectional workflow:

Code-first teams: Build quickly in code, then bring to Figma for design refinement
Design-first teams: Verify implementation matches design exactly
Hybrid teams: Iterate in whichever tool is faster for the task
It respects both mediums. Developers don't need to learn Figma. Designers don't need to code. But they can collaborate more seamlessly.

## Rankings

- #44,676 — Overall
- #17 — figma
- #107 — html
- #241 — transfer

## Permissions and access

### Permissions

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

### Content script matches

- `<all_urls>`

## 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

- [HTML to Figma: Convert Websites into Designs](https://chrome-stats.com/d/wireframeit) — 552 users, 1.80 / 5
- [html.to.design](https://chrome-stats.com/d/html-to-design) — 369 users, 1.00 / 5
- [amgiflol](https://chrome-stats.com/d/amgiflol) — 2 users
- [MiroMiro](https://chrome-stats.com/d/miromiro) — 16 users
- [dev-diff-figma](https://chrome-stats.com/d/dev-diff-figma) — 3 users
- [Figmafy](https://chrome-stats.com/d/figmafy) — 2 users, 5.00 / 5
- [Web Capture - HTML to React with MagicPath](https://chrome-stats.com/d/magic-path) — 13 users
- [Markdown Diagrams](https://chrome-stats.com/d/markdown-diagrams) — 282 users, 5.00 / 5
- [Arkhet](https://chrome-stats.com/d/arkhet)
- [Typography & Typescale Extractor](https://chrome-stats.com/d/typography-typescale-extractor) — 1 users
- [Designer Dev Mode](https://chrome-stats.com/d/designer-dev-mode) — 1 users
- [Moqups Extension](https://chrome-stats.com/d/moqups-extension) — 337 users

---

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