Migrar de Framer para Astro: como mudar um site Framer sem perder o design nem as posições no Google

A resposta curta

A central de ajuda do Framer é clara: o Framer não oferece exportação em HTML para hospedar o site por conta própria (Framer Help). Por isso, migrar de Framer para Astro é uma reconstrução, não uma exportação. Você registra o site publicado como referência, reconstrói cada template como componentes Astro, leva o conteúdo do CMS para coleções, recria as animações que realmente importam e dá a cada URL que muda um redirecionamento permanente.

Feito nessa ordem, o novo site pode ficar com a mesma aparência, carregar menos JavaScript e manter suas posições no Google. Pule a captura ou o mapa de redirecionamentos e você acaba com um redesign que ninguém pediu e uma queda no tráfego de busca.

Por que as equipes saem do Framer

O Framer é uma boa ferramenta para desenhar e publicar sites de marketing rapidamente. Os motivos para sair costumam ser práticos, não estéticos:

• Hospedagem e propriedade. Um site no Framer roda nos servidores do Framer. Equipes que querem o código no próprio repositório, na própria hospedagem ou ao lado do próprio backend precisam reconstruir.
• Custo do plano por site. Na página de preços do Framer, consultada em 12 de outubro de 2026, o plano Basic custa USD 10 por mês e o plano Pro, que inclui redirecionamentos, USD 30 por mês, ambos com cobrança anual. A localização é um complemento pago.
• Limites de redirecionamento. Os redirecionamentos do Framer só funcionam para caminhos dentro do mesmo domínio (Framer Help).
• Formulários, dados e integrações que precisam de um backend de verdade: um CRM, um sistema de agendamento, conteúdo restrito ou qualquer coisa que tenha de rodar na sua própria infraestrutura.

Se a sua equipe de marketing cria e edita páginas visualmente toda semana e o site cumpre o seu papel, continuar no Framer pode ser a decisão certa. Uma migração custa tempo de design e de desenvolvimento; ela precisa trazer algo concreto.

O que aprendemos criando uma ferramenta de captura para o Framer

A Dardo criou uma ferramenta interna que captura uma página publicada no Framer, de um site que pertence a você, e a transforma em um arquivo de referência independente, acompanhado de um controle de migração para Astro com uma linha para cada item a reconstruir. Construí-la nos mostrou onde os sites feitos no Framer escondem sua complexidade:

• Os arquivos ficam no CDN do Framer. Imagens, fontes e código são carregados de framerusercontent.com e de domínios relacionados. Imagens responsivas pedem o mesmo arquivo em várias larguras (?width=512, ?width=1024), então a captura guarda um único arquivo local por imagem, o maior.
• O JavaScript chega em camadas. O Framer carrega pequenos módulos que só reexportam o bundle real, então uma única varredura deixa código para trás. A ferramenta repete a varredura até que nenhum módulo novo apareça.
• O conteúdo do CMS é um formato de arquivo à parte. As coleções do CMS do Framer são entregues como arquivos .framercms que a página busca no CDN em intervalos de bytes. Em uma hospedagem estática comum, essas requisições devolvem o arquivo inteiro, e o módulo que monta as URLs delas aponta de volta para o Framer.
• O runtime reescreve a página depois que ela carrega. O runtime React do Framer faz a hidratação do HTML e pode reinserir elementos que você removeu. O selo "Made in Framer", por exemplo, é hidratado em um contêiner próprio.
• Os formulários dependem do Framer. Os formulários capturados não têm atributo action no HTML; os envios só funcionam pelo runtime do Framer no navegador.
• As tags de SEO apontam para o Framer. Se não forem reescritas, as URLs canonical e Open Graph continuam anunciando o endereço original no Framer.
• Animação é dado. Os efeitos de entrada ficam armazenados como payloads JSON na página, então a ferramenta os registra junto com os keyframes e o tempo de cada animação em execução.

A conclusão que tiramos: a exportação é evidência, não a entrega. Nunca colocamos no ar o HTML capturado nem o runtime do Framer. Eles nos dizem exatamente o que reconstruir.

De Framer para Astro, passo a passo

1. Faça o inventário de todas as URLs. Comece pelo sitemap.xml do site, acrescente todas as páginas do CMS e exporte o relatório Páginas do Google Search Console com o maior período disponível. Anote os redirecionamentos já configurados no Framer, em Site Settings, Hosting.
2. Exporte o que o Framer permite. O Framer diz que o conteúdo do CMS pode ser exportado com plugins para formatos como CSV ou JSON (Framer Help). Baixe todas as imagens e arquivos e confira a licença de cada fonte antes de hospedá-la por conta própria.
3. Capture o site publicado como referência. Registre cada template em todos os breakpoints, além do tempo de cada animação que você quer manter. Nossa ferramenta captura as páginas com 1440, 810 e 390 pixels de largura e, depois, um pixel abaixo, no valor exato e um pixel acima de cada breakpoint que encontra no CSS do site.
4. Reconstrua os templates como componentes Astro. Leve as coleções do CMS para content collections ou para um headless CMS, as imagens para o astro:assets e as páginas traduzidas para o roteamento de i18n do Astro, com uma URL por idioma.
5. Recrie as animações que carregam significado. A maioria dos efeitos do Framer vira transições CSS, keyframes ou um pequeno script. Respeite o prefers-reduced-motion. Em uma das nossas próprias reconstruções de Framer para Astro, um site de 18 rotas que não era projeto de cliente, 217 dos 219 estados de rolagem e de interação ficaram iguais ao original, com até 1% de diferença de pixels.
6. Dê a cada formulário um endpoint real. Aponte cada formulário para o seu próprio handler (um Cloudflare Worker, um serviço de formulários ou o seu CRM) e teste a entrega no ambiente de homologação.
7. Leve junto os metadados de busca. Títulos, descrições, tags Open Graph, dados estruturados e uma canonical autorreferente em cada página, além de um sitemap XML novo.
8. Redirecione no servidor, não no HTML. Um build estático do Astro sem adaptador transforma os redirecionamentos configurados em páginas de meta refresh, sem código de status HTTP (referência de configuração do Astro). Configure redirecionamentos 301 de 1 para 1 onde o site estiver hospedado, por exemplo em um arquivo _redirects do Cloudflare ou em um Worker.
9. Lance e acompanhe. Troque o DNS, mantenha o projeto no Framer até o novo site ser verificado e acompanhe os relatórios de indexação e de Páginas do Search Console nas semanas seguintes. Nosso checklist de SEO para migração de site cobre o dia do lançamento e os 90 dias seguintes.

O que muda depois da migração

Como manter o SEO intacto

As orientações do Google sobre mudanças de site com alteração de URLs valem aqui: associe cada URL antiga ao equivalente novo mais próximo, use redirecionamentos permanentes no servidor e mantenha-os por pelo menos um ano. Se as URLs continuarem idênticas, o que uma reconstrução cuidadosa muitas vezes consegue, basta verificar se as novas páginas trazem o mesmo conteúdo e os mesmos metadados.

A armadilha específica do Framer é o endereço do Framer que fica para trás. Garanta que nenhuma canonical, entrada do sitemap ou tag Open Graph ainda cite a URL antiga do Framer e que o projeto no Framer seja despublicado ou redirecionado quando o novo site estiver no ar.

Como a Dardo conduz uma migração do Framer

Fazemos migrações do Framer como parte do nosso serviço de migração de site: inventário, captura, uma página representativa reconstruída primeiro e revisada nas larguras combinadas e, depois, o restante dos templates, formulários e redirecionamentos. A construção em si é desenvolvimento web em Astro, e o trabalho de animação é desenvolvimento criativo. Este site, o dardo.studio, roda em Astro no Cloudflare Workers, com o conteúdo em um headless CMS, a configuração que mais usamos.

Se você está avaliando uma migração, envie o site e o que você quer mudar. Vamos dizer se uma reconstrução vale a pena antes de fazer um orçamento.