Framer ofrece una extensión oficial HTML to Framer para copiar un elemento o una sección de una página publicada y pegarla como capas editables. Es un buen punto de partida, pero no es un conversor de sitios completos.
Consulta el anuncio oficial y la lección de importación de Framer. Para el flujo inverso, utiliza el exportador de Framer a HTML.
Qué hace la extensión oficial
- Instala la extensión en un navegador de escritorio compatible.
- Abre la página que tienes derecho a reutilizar.
- Selecciona el elemento o la sección.
- Cópiala con la extensión y pégala en tu proyecto de Framer.
- Revisa las capas importadas antes de darlas por terminadas.
| Suele transferirse | Hay que revisar o reconstruir |
|---|---|
| Texto visible y jerarquía básica | Colecciones CMS y rutas dinámicas |
| Imágenes accesibles por el navegador | Envío y validación de formularios |
| Colores y tipografía comunes | Scripts, analítica y consentimiento |
| Layouts flex o stack sencillos | Grids, breakpoints y tamaños complejos |
| Algunos estilos visuales | Interacciones hover, scroll y aplicación |
Flujo de migración fiable
1. Audita el origen
Enumera páginas, secciones reutilizables, fuentes, imágenes, breakpoints, formularios, scripts, colecciones CMS e integraciones. Confirma que tienes permiso para reutilizar el diseño y los recursos.
2. Prueba una sección representativa
Importa primero un header, hero o bloque de contenido. Revisa nombres de capas, modo de layout, dimensiones fijas, fuente de imágenes y estilos de texto.
3. Crea el sistema de Framer
Define colores, estilos tipográficos, componentes compartidos y breakpoints. Convierte las secciones repetidas en componentes en vez de mantener copias sueltas.
4. Reconstruye el comportamiento
- Conecta botones y navegación con las rutas correctas.
- Sustituye los formularios por formularios de Framer o un servicio probado.
- Reconstruye campos y páginas de colección en Framer CMS.
- Vuelve a configurar scripts, embeds, analítica y consentimiento.
- Recrea interacciones hover y scroll de forma nativa.
5. Limpia el responsive
Comprueba escritorio, tableta y móvil. Elimina wrappers innecesarios, sustituye anchos fijos por stacks o constraints y revisa overflow y saltos de texto.
Limitaciones importantes
Sitios completos: la importación se repite por página o sección; no crea rutas ni ajustes globales automáticamente.
CMS: el contenido visible puede llegar como texto normal, pero no se crea la colección, sus campos o filtros.
Formularios: hay que reconectar validación, envío, estados de éxito, protección antispam y destino de datos.
Scripts y embeds: JavaScript personalizado no se transforma en comportamiento nativo de Framer.
Recursos y fuentes: guarda las imágenes donde tengas control y comprueba las licencias de las fuentes.
Accesibilidad y SEO: restaura headings, textos alternativos, labels, foco de teclado, títulos, descripciones, canonicals y redirects.
Cuándo incrustar o reconstruir
Usa un embed para un widget contenido que deba conservar su código. Reconstruye manualmente cuando haya lógica de layout, estado de aplicación o CMS complejo. Mantén el HTML si la portabilidad y la propiedad del código son más importantes que la edición visual.
Checklist antes de publicar
- Páginas y redirects completos
- Navegación, botones, formularios y embeds probados
- CMS reconstruido como CMS
- Escritorio, tableta y móvil revisados
- Imágenes y fuentes bajo control
- Metadatos, canonicals y tarjetas sociales configurados
- Accesibilidad y rendimiento medidos en el proyecto final
La extensión oficial acelera HTML a Framer para secciones visuales. La parte que el navegador no puede copiar debe reconstruirse y probarse.
