Exportar páginas web para o Figma

Como funciona o fluxo de trabalho local

O CloneWebsite não envia uma página web para um servidor de conversão. A extensão do Chrome lê a página renderizada na sua aba ativa, cria um arquivo .cdesign versionado na memória e o baixa ou armazena localmente. O plugin Figma do CloneWebsite abre esse arquivo e cria camadas no documento atual do Figma.

Página web renderizada → Extensão do Chrome → arquivo .cdesign local → plugin Figma → camadas editáveis

O arquivo .cdesign é um contêiner aberto baseado em ZIP. Contém um manifesto, um arquivo de cena JSON por estado capturado e recursos de imagem endereçados por conteúdo.

Capturar uma página ou componente

1. Abra a página web e aguarde até que seu conteúdo e fontes web terminem de renderizar.
2. Abra a barra de ferramentas do CloneWebsite e altere a saída de Site para Figma.
3. Escolha Clonar página ou Clonar componente.
4. Abra as opções de captura do Figma e escolha combinações de viewport e tema. A configuração inicial captura o viewport atual e o tema atual. Você pode adicionar viewports de 1440, 768 e 390 pixels e temas claro ou escuro, até seis combinações.
5. Mantenha a Captura avançada ativada quando precisar de viewports responsivos, estados de interação de componentes, fallbacks de rasterização de iframe/filtro ou geometria de navegador mais precisa.
6. Selecione Iniciar. No modo componente, clique no componente na página e confirme a seleção.
7. Baixe o arquivo .cdesign resultante ou salve-o na lista de projetos local da extensão para download posterior.

Permissão do depurador do Chrome

O Chrome não permite declarar a permissão debugger como opcional, então ela é concedida quando a extensão é instalada. O CloneWebsite só anexa o depurador quando você inicia uma captura do Figma com a Captura avançada ativada. Ele é usado temporariamente para emular combinações de viewport/tema, forçar estados pseudo suportados de componentes e criar capturas de tela locais para subárvores visuais sem suporte. A extensão se desconecta da aba quando a captura termina ou falha.

Quando a Captura avançada está desativada, a extensão não anexa o depurador. O modo básico captura o viewport atual, o tema atual e o estado padrão do componente. O relatório de captura explica quais cenas avançadas ou fallbacks foram ignorados.

O Chrome DevTools e outro cliente depurador não podem controlar a mesma aba ao mesmo tempo. Feche o DevTools dessa aba se a captura avançada relatar um erro de anexação.

Importar para o Figma

Durante a fase de lançamento interno:

1. Compile o plugin a partir de figma_plugin/ com pnpm install && pnpm build.
2. No Figma Desktop, escolha Plugins → Development → Import plugin from manifest….
3. Selecione figma_plugin/manifest.json.
4. Execute CloneWebsite Design Importer.
5. Solte o arquivo .cdesign, selecione as cenas a importar e inicie a importação.

O plugin não tem permissão de rede. A análise do arquivo, a criação de imagens, a correspondência de fontes e a geração de camadas acontecem dentro do Figma no seu dispositivo.

O que permanece editável

• Frames, preenchimentos, bordas, raios de canto, sombras e modos de mesclagem básicos
• Conteúdo de texto, tamanho da fonte, altura da linha, alinhamento, decoração e cor
• Camadas de imagem e SVG
• Layouts Flexbox de alta confiança como Auto Layout do Figma
• Componentes selecionados como componentes do Figma
• Estados de componente Default, Hover, Focus, Active e Disabled como variantes quando a captura avançada consegue mapear o componente selecionado

Regiões de página Grid e de formato livre usam posicionamento absoluto para preservar a geometria. Filtros complexos, máscaras, iframes, superfícies de vídeo e efeitos de navegador sem suporte podem se tornar camadas de fallback de rasterização local.

Fontes e relatórios de importação

Os plugins do Figma não conseguem instalar uma fonte web remota da página no editor. O importador primeiro procura a família e o estilo solicitados entre as fontes disponíveis para o Figma. Se não conseguir carregar uma correspondência exata, usa um fallback local editável e lista a substituição no relatório de importação.

O relatório também lista recursos ausentes, fallbacks de rasterização, marcação SVG não segura ignorada, limites de nós e avisos de captura. Revise-o antes de tratar o arquivo importado como fonte de design de produção.

Privacidade e uso responsável

O conteúdo da página não é carregado para o CloneWebsite. As solicitações de rede durante a captura limitam-se ao download de recursos já referenciados pela página, além de um endpoint de IA BYOK opcional se você tiver configurado esse recurso separadamente. Consulte a política de privacidade da extensão.

Capture apenas páginas que você esteja autorizado a acessar. Os direitos autorais, marcas, dados pessoais e direitos de design do site original permanecem com seus proprietários.