grazy-html2figma Autor: Sorin Jurcut

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.