HTML para Figma: importe qualquer site como camadas editáveis

Instale o plugin grátis Codia AI Web2Figma pela Figma Community e execute-o em qualquer arquivo do Figma. Cole a URL da página, escolha uma visualização (desktop, tablet ou celular) e um tema claro ou escuro, e importe. A página aparece no canvas como camadas editáveis do Figma. Se a página exigir login, capture-a antes com a extensão do Chrome.

Sim, você pode começar de graça. O plano gratuito inclui 10 créditos de transformação todo mês, sem cartão de crédito. O Pro traz importações ilimitadas, processamento de imagens em resolução maior e importação de várias URLs ou arquivos do Codia de uma vez.

Sim. Os plugins do Figma rodam no plano grátis do Figma, então você não precisa de um assento pago. Você só precisa do app desktop do Figma ou do Figma em um navegador no computador: os plugins não rodam nos apps de celular do Figma.

Dá. Instale a extensão do Chrome do Codia AI Web2Figma, abra a página no Chrome já logado e faça a captura: a extensão salva a página como um arquivo .codia. Depois, envie ou cole esse arquivo na área de importação da extensão do Chrome no plugin. Funciona para dashboards, painéis administrativos, ambientes de homologação e outras páginas que a importação por URL não alcança.

Dá. Escolha desktop, tablet ou celular antes de importar para capturar a página nessa largura, e selecione o tema claro ou escuro nos sites que oferecem os dois. Importe várias visualizações para ter um conjunto de frames responsivos no mesmo arquivo.

O texto vem como camadas de texto editáveis, as imagens como preenchimentos de imagem e as seções, fundos, bordas e gradientes como frames e formas que seguem o layout da página. O Codia captura a página do jeito que ela aparece no momento da importação, então animações, scripts e interações não são levados junto.

Dá. Em vez de colar uma URL, envie um arquivo .html ou .htm, ou um .zip de um site exportado com CSS e imagens, na área de importação da extensão do Chrome no plugin. Se o ZIP tiver várias páginas, você escolhe qual importar. É útil para builds locais, exports de HTML e páginas que ainda não estão no ar.