Migrar de Framer a Astro: cómo pasar tu web sin perder el diseño ni el posicionamiento

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). 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, 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).
• 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). 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 o a un CMS headless, las imágenes a astro:assets y las páginas traducidas al enrutamiento i18n de Astro, 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). 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 cubre el día del lanzamiento y los 90 días posteriores.

Qué cambia después de migrar

Cómo no perder el posicionamiento

Aplica la guía de Google para mudanzas de sitio con cambios de URL: 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: 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 en Astro, y las animaciones son trabajo de 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. Te diremos si vale la pena reconstruirlo antes de cotizarlo.