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.

Ful feature set:

1. Import JSON code as Figma frames - through browser extensions
2. Export Figma frames or components as React, HTML, Swift or Flutter code.
3. Read and browse variable collections with values and color rendition. Including for variable chaining.
4. Export variables as JSON, Tailwind 4, or CSS tokens for your project.

Everything you need to build a new website, fast and easy, or to help you work with design systems.

How to export SVG with your code:

1. Put the svg inside a frame and call it svg
2. Paths need to be named "vector" and be compound paths or outlines so that there is only 1 shape. this is to minimize issues with where the paths will be placed inside the svg frame.
3. Check your sizes. Always.

Can you use this code in production?

In theory yes. Since there's nothing unsafe. Is it ok? No. When working with production code, it's a much better practice to use tailwind variables and production css. But it will do the same job a token-based LLM does.

Ideal usecase is to create a basic component structure which you can then use and extend through code as you see fit. It does the gruntwork for you without consuming AI credits.

Homepage:

https://grazy.sorinjurcut.com/

Browser extensions:

Mozilla

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

Chrome

https://chromewebstore.google.com/detail/html-2-figma-chrome/ebjjklblmelccaighinmmmmgclliecpo

Usage Examples:

1. Design System Development
2. AI-to-Design Workflows
3. Competitive Analysis & Inspiration
4. QA & Design Review
5. Documentation & Design Handoff
6. Learning & Reverse Engineering
7. Rapid Prototyping & Client Presentations
8. Migration Projects
9. 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.