Export to Figma por Shoun Eftikharul Alam

Convierte cualquier web en Figma. Captura la interfaz real de cualquier página y transfórmala en capas de Figma limpias y estructuradas. Sin capturas de pantalla y sin rehacer nada a mano.

🚀 QUÉ HACE
• Convierte cualquier web en capas de Figma, la página entera o secciones concretas
• Copia landing pages, dashboards o diseños de la competencia a Figma
• Inspecciona tipografía, colores, espaciado, padding, márgenes y CSS sin tocar código
• Extrae logos, SVG, imágenes y recursos con un clic
• Audita paletas de color, familias tipográficas y contraste WCAG
• Crea referencias de sistemas de diseño a partir de productos reales
• Genera especificaciones DESIGN.md y SKILL.md para alimentar agentes de IA y desarrolladores
• Captura cualquier color de la página con el cuentagotas integrado (HEX exacto)
• Haz clic derecho en cualquier página o elemento para enviarlo directo a Figma
• Captura iframes incrustados, contenido de origen cruzado, localhost y archivos HTML locales

🎯 IDEAL PARA DISEÑADORES Y DESARROLLADORES
• Copia una web a Figma sin reconstruirla a mano
• Rediseña o moderniza webs existentes
• Convierte HTML y CSS a Figma
• Usa landing pages de la competencia como referencias editables
• Extrae colores de marca, tipografías y recursos en segundos
• Trabaja directamente sobre productos reales en lugar de capturas de pantalla
• Genera documentación de sistemas de diseño y tokens para herramientas de IA como Cursor, Claude, GitHub Copilot y Windsurf
• Entrega especificaciones precisas de UI real a tu flujo de desarrollo o de IA

⚡ CÓMO FUNCIONA
1. Instala la extensión de Firefox
2. Abre cualquier página web
3. Haz clic en "Export to Figma" y captura la página entera o un elemento
4. Pega directamente en Figma (Cmd/Ctrl + V), sin necesidad de otro plugin de Figma

Obtienes un frame real de Figma con texto, tipografías, colores e imágenes editables y una estructura de capas limpia, no una imagen plana.

✨ FUNCIONES
• Captura de página completa y de elementos concretos
• Estructura de capas editable y ordenada
• Conserva maquetación, estilos, tipografías y texto
• Pega directo en Figma, sin plugin acompañante
• Modo Inspeccionar con superposiciones de espaciado, padding y márgenes
• Extractor de color (HEX, RGB, HSL, OKLCH, Tailwind)
• Escáner tipográfico con detalles de uso de cada fuente
• Descarga imágenes, SVG, vídeos, GIF y archivos Lottie
• Verificador de contraste WCAG
• Funciona con webs generadas por IA (v0, Lovable, Bolt, Replit, Framer, etc.)
• Ajustes de escritorio, tablet, móvil y anchura personalizada
• Cuentagotas con lupa de píxel ampliada (HEX)
• Generador de DESIGN.md + SKILL.md: tokens de diseño, marca, espaciado, accesibilidad y reglas en Markdown listo para IA
• Captura desde el menú contextual
• Captura de iframes incrustados y de origen cruzado

💡 CASOS DE USO HABITUALES
• Rediseños de webs de clientes
• Investigación y análisis de la competencia
• Migración de webs existentes a Figma
• Extracción de sistemas de diseño de sitios en producción
• Prototipado rápido y maquetas
• Creación de guías de estilo a partir de webs reales
• Estudio de patrones de UI y UX en producción
• Generación de contexto DESIGN.md para agentes de IA y flujos de diseño a código
• Documentación de tokens y guías de marca desde sitios en vivo
• Captura de prototipos en localhost y webs generadas por IA