--- title: "Migrar de Framer a Astro sin perder posicionamiento — Dardo" description: "Framer no exporta HTML. Cómo pasar una web de Framer a Astro: qué capturar, cómo rehacer CMS, animaciones y formularios, y cómo conservar URL y SEO." url: "https://dardo.studio/es/blog/migrar-de-framer-a-astro/" language: "es" translations: {"en":"https://dardo.studio/en/blog/framer-to-astro/","fr":"https://dardo.studio/fr/blog/migrer-framer-vers-astro/","de":"https://dardo.studio/de/blog/framer-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-framer-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-framer-para-astro/","nl":"https://dardo.studio/nl/blog/framer-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-framer-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-framera-do-astro/","uk":"https://dardo.studio/uk/blog/framer-to-astro/","ru":"https://dardo.studio/ru/blog/framer-to-astro/","ar":"https://dardo.studio/ar/blog/framer-to-astro/","hi":"https://dardo.studio/hi/blog/framer-to-astro/","th":"https://dardo.studio/th/blog/framer-to-astro/","ja":"https://dardo.studio/ja/blog/framer-to-astro/","ko":"https://dardo.studio/ko/blog/framer-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/framer-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/framer-to-astro/"} updated: "2026-10-12T23:16:35.943Z" --- [Blog](https://dardo.studio/es/blog/) # Migrar de Framer a Astro: cómo pasar tu web sin perder el diseño ni el posicionamiento Framer no exporta HTML, así que pasar a Astro es reconstruir. Qué capturar primero, qué se rompe y cómo conservar diseño, URL y posicionamiento. Por [Nicolás Cerón](https://dardo.studio/es/estudio/) ·12 de octubre de 2026 ![Un marco dorado vacío sobre un caballete en un taller de pintor de noche, con un hilo carmesí que sale por una ventana abierta y sube por un camino hasta un observatorio iluminado bajo las estrellas.](https://dardo.studio/_astro/01M4S57PW4TH7D1E7E3RQM4Z4E_Z3SVDC.webp) ## Puntos clave - Framer no ofrece exportación a HTML para alojar el sitio por tu cuenta, así que pasar a Astro es reconstruir usando las páginas publicadas como referencia. - Antes de reconstruir, captura cada URL, colección del CMS, punto de quiebre y animación, porque Framer carga contenido, imágenes y código desde su propio CDN y runtime. - Los formularios y archivos del CMS de Framer dependen de su runtime: dale a cada formulario tu propio receptor y lleva el contenido a colecciones de Astro o a un CMS headless. - Configura redirecciones 301 una a una en el servidor; una compilación estática de Astro sin adaptador solo genera redirecciones con meta refresh. - Después del lanzamiento, verifica que ninguna canónica, entrada del sitemap ni etiqueta Open Graph siga apuntando a la dirección de Framer. ## La respuesta corta El centro de ayuda de Framer lo dice sin rodeos: Framer no ofrece exportación a HTML para alojar el sitio por tu cuenta ([Framer Help](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/)). Por eso pasar de Framer a Astro no es exportar, es reconstruir. Se captura el sitio publicado como referencia, se rehace cada plantilla como componentes de Astro, se mueve el contenido del CMS a colecciones, se recrean las animaciones que de verdad importan y cada URL que cambie recibe una redirección permanente. Hecho en ese orden, el sitio nuevo puede verse igual, cargar menos JavaScript y conservar su posicionamiento en Google. Si te saltas la captura o el mapa de redirecciones, terminas con un rediseño que nadie pidió y con una caída de tráfico orgánico. ## Por qué los equipos se van de Framer Framer es una buena herramienta para diseñar y publicar sitios de marketing rápido. Las razones para irse suelen ser prácticas, no estéticas: - **Hosting y propiedad del código.** Un sitio en Framer vive en los servidores de Framer. Si quieres el código en tu propio repositorio, en tu hosting o junto a tu backend, toca reconstruir. - **El costo del plan por sitio.** En la [página de precios de Framer](https://www.framer.com/pricing/), revisada el 12 de octubre de 2026, el plan Basic cuesta 10 USD al mes y el Pro, que agrega redirecciones, 30 USD al mes, ambos con pago anual. La localización es un complemento pago. - **Límites en las redirecciones.** Framer solo permite redirigir rutas dentro del mismo dominio ([Framer Help](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/)). - **Formularios, datos e integraciones** que necesitan un backend propio: un CRM, un sistema de reservas, contenido privado o cualquier cosa que deba correr en tu infraestructura. Si tu equipo de marketing arma y edita páginas visualmente cada semana y el sitio cumple su función, quedarse en Framer puede ser la decisión correcta. Una migración cuesta tiempo de diseño y desarrollo, y debe comprar algo concreto. ## Lo que aprendimos al construir una herramienta para capturar sitios de Framer En Dardo construimos una herramienta interna que captura una página publicada en Framer, de un sitio que te pertenece, y la convierte en un archivo de referencia más una lista de migración a Astro con una fila por cada cosa que hay que rehacer. Construirla nos mostró dónde esconde Framer la complejidad: - **Los archivos viven en el CDN de Framer.** Imágenes, fuentes y código cargan desde framerusercontent.com y dominios relacionados. Las imágenes adaptables piden el mismo archivo en varios anchos (?width=512, ?width=1024), así que la captura guarda un solo archivo por imagen, el más grande. - **El JavaScript llega por capas.** Framer carga módulos pequeños que solo reexportan el paquete real, así que una sola pasada se queda corta. La herramienta vuelve a revisar hasta que no aparece ningún módulo nuevo. - **El contenido del CMS es otro formato.** Las colecciones del CMS de Framer viajan como archivos .framercms que la página pide por rangos de bytes al CDN. En un hosting estático común esas peticiones devuelven el archivo completo, y el módulo que arma sus URL sigue apuntando a Framer. - **El runtime reescribe la página después de cargar.** El runtime de React de Framer hidrata el HTML y puede volver a insertar elementos que quitaste. El sello "Made in Framer", por ejemplo, se hidrata dentro de su propio contenedor. - **Los formularios dependen de Framer.** Los formularios capturados no tienen action en el HTML; los envíos solo funcionan a través del runtime de Framer. - **Las etiquetas SEO apuntan a Framer.** Si no se reescriben, la URL canónica y las de Open Graph siguen anunciando la dirección original en Framer. - **Las animaciones son datos.** Los efectos de aparición se guardan como JSON dentro de la página, así que la herramienta los registra junto con los fotogramas clave y tiempos de cada animación. La conclusión: la exportación es evidencia, no el entregable. Nunca publicamos el HTML capturado ni el runtime de Framer. Nos dicen exactamente qué hay que reconstruir. ## Migrar de Framer a Astro, paso a paso 1. **Haz el inventario de todas las URL.** Parte del sitemap.xml del sitio, suma cada página del CMS y descarga el informe de Páginas de Google Search Console con el rango más largo disponible. Anota las redirecciones que ya existan en Framer, en Site Settings, Hosting. 2. **Exporta lo que Framer permite.** Framer indica que el contenido del CMS se puede exportar con plugins a formatos como CSV o JSON ([Framer Help](https://www.framer.com/help/articles/porting-your-data-from-framer/)). Descarga cada imagen y archivo, y revisa la licencia de cada fuente antes de alojarla por tu cuenta. 3. **Captura el sitio publicado como referencia.** Registra cada plantilla en todos sus puntos de quiebre y el tiempo de cada animación que quieras conservar. Nuestra herramienta captura las páginas a 1440, 810 y 390 píxeles de ancho, y luego un píxel por debajo, en y por encima de cada punto de quiebre que encuentra en el CSS. 4. **Reconstruye las plantillas como componentes de Astro.** Lleva las colecciones del CMS a [content collections](https://docs.astro.build/en/guides/content-collections/) o a un CMS headless, las imágenes a [astro:assets](https://docs.astro.build/en/guides/images/) y las páginas traducidas al [enrutamiento i18n de Astro](https://docs.astro.build/en/guides/internationalization/), con una URL por idioma. 5. **Recrea las animaciones que aportan significado.** La mayoría de efectos de Framer se convierten en transiciones CSS, keyframes o un script pequeño. Respeta prefers-reduced-motion. En una de nuestras propias reconstrucciones de Framer a Astro, un sitio de 18 rutas que no fue un proyecto de cliente, 217 de 219 estados de scroll e interacción coincidieron con el original con menos de 1 % de diferencia de píxeles. 6. **Dale a cada formulario un destino real.** Conecta cada formulario a tu propio receptor (un Cloudflare Worker, un servicio de formularios o tu CRM) y prueba la entrega en un entorno de pruebas. 7. **Traslada los metadatos de búsqueda.** Títulos, descripciones, etiquetas Open Graph, datos estructurados y una canónica propia en cada página, más un sitemap XML nuevo. 8. **Redirige en el servidor, no en el HTML.** Una compilación estática de Astro sin adaptador convierte las redirecciones configuradas en páginas con meta refresh, sin código de estado HTTP ([referencia de configuración de Astro](https://docs.astro.build/en/reference/configuration-reference/)). Configura redirecciones 301 una a una en el hosting, por ejemplo con un archivo \_redirects de Cloudflare o un Worker. 9. **Lanza y vigila.** Cambia el DNS, conserva el proyecto de Framer hasta verificar el sitio nuevo y sigue los informes de indexación y de Páginas de Search Console durante las semanas siguientes. Nuestra guía para [migrar una página web sin perder posicionamiento](https://dardo.studio/es/blog/migrar-pagina-web-sin-perder-posicionamiento/) cubre el día del lanzamiento y los 90 días posteriores. ## Qué cambia después de migrar | Aspecto | En Framer | En Astro | | ------------- | ------------------------------------------- | ------------------------------------------------------------- | | Edición | Lienzo visual de Framer | Campos de un CMS o código, según lo que elijas | | Hosting | Servidores de Framer | Cualquier hosting estático o plataforma edge, como Cloudflare | | Redirecciones | Plan Pro; subrutas dentro del mismo dominio | 301 en el servidor de tu hosting, sin límite de dominio | | Animaciones | Efectos e interacciones integrados | CSS y JavaScript propios que puedes medir | | CMS | Colecciones del CMS de Framer | Content collections o un CMS headless | | Formularios | Manejo de formularios de Framer | Tu propio receptor y almacenamiento | ## Cómo no perder el posicionamiento Aplica la guía de Google para [mudanzas de sitio con cambios de URL](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes): asigna cada URL vieja a su equivalente más cercano, usa redirecciones permanentes en el servidor y mantenlas por lo menos un año. Si las URL quedan idénticas, algo que una reconstrucción cuidadosa suele lograr, solo hay que verificar que las páginas nuevas conserven el mismo contenido y los mismos metadatos. La trampa propia de Framer es la dirección vieja que queda olvidada. Revisa que ninguna canónica, entrada del sitemap ni etiqueta Open Graph siga nombrando la URL de Framer, y que el proyecto en Framer quede despublicado o redirigido cuando el sitio nuevo esté en línea. ## Cómo hacemos una migración desde Framer en Dardo Las migraciones desde Framer hacen parte de nuestro servicio de [migración de página web](https://dardo.studio/es/servicios/migracion-de-pagina-web/): inventario, captura, una página representativa reconstruida primero y revisada en los anchos acordados, y después el resto de plantillas, formularios y redirecciones. La construcción es [desarrollo web](https://dardo.studio/es/servicios/desarrollo-web/) en Astro, y las animaciones son trabajo de [desarrollo creativo](https://dardo.studio/es/servicios/desarrollo-creativo/). Este mismo sitio, dardo.studio, funciona con Astro sobre Cloudflare Workers y su contenido vive en un CMS headless, la configuración que más usamos. Si estás evaluando el cambio, [envíanos el sitio y lo que quieres mejorar](https://dardo.studio/es/contacto/?service=website-migration). Te diremos si vale la pena reconstruirlo antes de cotizarlo. ## Preguntas frecuentes **¿Se puede exportar una página de Framer a HTML?** No de forma oficial. El centro de ayuda de Framer dice que no ofrece exportación a HTML para alojar el sitio por tu cuenta. Hay herramientas que capturan una página publicada, pero el resultado sigue dependiendo del runtime y el CDN de Framer, así que sirve como referencia para reconstruir y no para publicarlo tal cual. **¿Pierdo posicionamiento en Google si me paso de Framer a Astro?** No, si cada URL que trae tráfico sigue funcionando. Conserva las mismas rutas cuando puedas, agrega redirecciones 301 para las que cambien, traslada títulos, descripciones y datos estructurados, y revisa Search Console durante las semanas siguientes. **¿Puedo exportar el contenido del CMS de Framer?** Framer indica que el contenido del CMS se puede exportar con plugins a formatos como CSV o JSON. Descarga también cada imagen y archivo, porque los campos de las colecciones suelen apuntar al CDN de Framer. **¿Mi equipo podrá editar el sitio sin código después de pasar a Astro?** Sí, si el sitio nuevo usa un CMS headless. El equipo edita en una interfaz web y el sitio en Astro se reconstruye a partir de ese contenido. Así funciona dardo.studio. **¿Las animaciones de Framer funcionan en Astro?** No directamente. Los efectos de Framer corren en su propio runtime, así que cada animación que quieras conservar se rehace con CSS o un script pequeño, idealmente con una versión de movimiento reducido. ## Fuentes y lecturas Fuentes de esta página, con más detalles de sus publicaciones originales. - [Framer Help: ¿Puedo exportar mi sitio a HTML y alojarlo por mi cuenta? (en inglés)](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/) · framer.com - [Framer Help: Llevar tus datos fuera de Framer (en inglés)](https://www.framer.com/help/articles/porting-your-data-from-framer/) · framer.com - [Framer Help: Cómo configurar redirecciones (en inglés)](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/) · framer.com - [Precios de Framer](https://www.framer.com/pricing/) · framer.com - [Documentación de Astro: Content collections](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build - [Documentación de Astro: Imágenes](https://docs.astro.build/en/guides/images/) · docs.astro.build - [Documentación de Astro: Enrutamiento i18n](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build - [Documentación de Astro: Referencia de configuración (redirecciones)](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build - [Google Search Central: Mudanzas de sitio con cambios de URL](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com [Nicolás Cerón](https://dardo.studio/es/estudio/) Nicolás Cerón es el fundador de Dardo, un estudio de marca, diseño y desarrollo web en Bogotá, Colombia. ## Artículos relacionados - [**Cómo migrar tu página web sin perder posicionamiento en Google**Al migrar una página web, el posicionamiento casi nunca se pierde por la plataforma nueva, sino por URLs que dejaron de responder. Checklist paso a paso.](https://dardo.studio/es/blog/migrar-pagina-web-sin-perder-posicionamiento/) - [**¿WordPress o web a medida? Cómo elegir y cuándo se justifica cada una**Cuándo conviene WordPress, cuándo se justifica una web a medida y qué es WordPress headless, comparados en costo, velocidad, actualizaciones y propiedad.](https://dardo.studio/es/blog/wordpress-o-web-a-medida/) - [**Páginas web 3D: cuándo valen la pena y cómo hacer que carguen rápido**Cuándo se justifica una página web 3D, cuándo sirven más un video o imágenes, y cómo logramos que los diez mundos 3D de Janus Observatory cargaran rápido.](https://dardo.studio/es/blog/paginas-web-3d/) - [**¿Cuánto cuesta una página web en Colombia en 2026? Precios reales y qué mueve la cotización**Precios publicados y fechados de empresas de Bogotá, los costos fijos de dominio y hosting, y los factores que de verdad mueven una cotización.](https://dardo.studio/es/blog/cuanto-cuesta-una-pagina-web-colombia/) ## Sigue explorando. - [Servicio · **Migrar tu página web sin perder posicionamiento**](https://dardo.studio/es/servicios/migracion-de-pagina-web/) - [Tu proyecto · **Inicia una conversación**](https://dardo.studio/es/contacto/)