Grazy - HTML to Figma

About this plugin

Import HTML code straight into figma.

To use this plugin you will also need its browser extension companion.

Alternatively, if you just want to use it for code exporting, you can do so without the mozilla plugin.

Homepage:

https://grazy.sorinjurcut.com/

Browser extensions:

Mozilla

https://addons.mozilla.org/en-US/firefox/addon/grazy-html2figma/

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.