grazy-html2figma por Sorin Jurcut
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.
3 usuários3 usuários
Metadados da extensão
Capturas de tela
Sobre esta extensão
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.
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.
Avaliado em 0 por 1 revisor
Permissões e dados
Permissões necessárias:
- Enviar dados para área de transferência
- Fazer download de arquivos, ler e modificar o histórico de download do navegador
- Acessar seus dados em todos os sites visitados
Coleta de dados:
- O desenvolvedor afirma que esta extensão não requer coleta de dados.
Mais informações
- Links da extensão
- Versão
- 1.51.0
- Tamanho
- 48,29 KB
- Ultima atualização
- há 19 horas (26 de fev de 2026)
- Categorias relacionadas
- Licença
- Mozilla Public License 2.0
- Histórico de versões
- Adicionar a uma coleção
O desenvolvedor desta extensão pede que você ajude a apoiar seu desenvolvimento contínuo fazendo uma pequena contribuição.