O fluxo básico da extensão: instale no navegador de desktop, abra a página origem (com direito de reuso confirmado), selecione o elemento ou a seção (Esc seleciona o contêiner pai), copie pela extensão, abra o projeto Framer e cole. O resultado chega como camadas editáveis: textos, hierarquia básica, imagens visíveis no navegador, cores e tipografia comuns, layouts flex básicos. Revise as camadas antes de considerar a seção pronta: o import é matéria-prima, não produto acabado.
O que transfere × o que precisa de reconstrução
Costuma vir junto: texto visível e hierarquia básica, imagens disponíveis no navegador, cores e tipografia principais, layouts de pilha/flex simples, parte dos estilos visuais. Exige reconstrução: coleções de CMS e rotas dinâmicas; lógica de formulário (envio, validação, estados de sucesso); scripts personalizados, analytics e ferramentas de consentimento; grids complexos, breakpoints e dimensionamento min/max; interações de hover, rolagem e comportamento de aplicação. A tabela mental é essa: e ela explica por que o import é o começo do trabalho, não o fim.
O fluxo de 5 passos (a ordem importa)
1. Audite a origem. Inventário de páginas, seções, fontes, imagens, breakpoints, formulários, scripts, coleções e integrações: com os direitos de reuso confirmados por escrito. Importar sem direito é o erro que nenhuma tecnologia conserta.
2. Importe uma seção representativa primeiro. O cabeçalho/hero revela de cara como o import se comporta: nomes de camadas, modo de layout, dimensões fixas, origem das imagens, estilos de texto. Ajuste o método antes de escalar.
3. Construa o sistema antes de importar o resto. Estilos de cor e texto, componentes compartilhados, breakpoints definidos; seções repetidas viram componentes. Importar seções soltas antes do sistema é a receita para recriar no Framer a bagunça do site original.
4. Reconstrua o comportamento com intenção. Rotas conectadas, formulários refeitos com formulários nativos (ou serviço externo testado), campos de CMS recriados, scripts e embeds reimplementados com revisão de segurança e impacto no carregamento, hover/scroll refeitos com efeitos nativos.
5. Responsivo limpo. Desktop, tablet e celular conferidos; contêineres desnecessários removidos; larguras fixas trocadas por stacks e constraints; overflow e quebra de texto verificados.
As limitações que o planejamento resolve
Sites inteiros: o processo é página por página, seção por seção: não existe conversão de projeto completo com rotas e configurações. CMS: o conteúdo visível chega como texto; coleções, campos, filtros e relações dinâmicas não convertem (a importação por CSV é o caminho, como no guia WordPress). Formulários: aparência não é função: envio, validação, proteção anti-spam e destino dos dados precisam ser reconectados. Scripts: JavaScript personalizado não vira comportamento nativo do Framer. Assets: imagens hospedadas onde você controla, licenças de fontes verificadas: nada de depender de URLs do site original.
Importe (com a extensão) páginas de marketing e conteúdo visual: o ganho de velocidade é real. Embuta (embed) widgets contidos que precisam manter o código original sem edição nativa. Reconstrua manualmente páginas que dependem de lógica complexa de layout, estado de aplicação ou comportamento de CMS. E mantenha o site HTML quando portabilidade e propriedade exata do código pesarem mais que edição visual: o Framer não é o único caminho válido.
Checklist antes de publicar (onde SEO entra)
Todas as páginas e redirects pretendidos existindo; navegação, botões, formulários e embeds funcionando; conteúdo de CMS reconstruído: não só colado como texto; layouts nos três tamanhos; imagens e fontes servidas de locais controlados; títulos, descriptions, canônicos, redirects e social cards configurados; acessibilidade (ordem de headings, alt text, labels, foco por teclado) e performance testadas. O import salva horas de layout: o SEO e o comportamento continuam sendo trabalho de especialista, como no guia técnico.
Para a migração completa de plataformas (com CMS e redirects), os guias de WordPress e Webflow cobrem o processo; e a M&C executa a reconstrução inteira: do inventário ao Search Console.