manifest.jsonConfiguração do plugin. Selecione este ficheiro ao instalar no Figma.
1
Carregar projeto
HTML, HTM ou ZIP · máximo de 15 MB
Arraste para aqui um projeto HTML ou ZIP, ou escolha um ficheiro
2
Tamanhos responsivos
COMO FUNCIONA
Renderizado no navegador, resultado estruturado.
A CoreBase renderiza o estado inicial em três larguras, lê o DOM visível e o CSS calculado e cria árvores responsivas independentes.
O que incluem os dados
O JSON versionado regista hierarquia, texto, dimensões, Flexbox, espaçamento, tipografia, cores, contornos, visibilidade, overflow, posição e referências de imagens.
Limites atuais
A CoreBase exporta dados estruturados; o plugin Figma separado reconstrói camadas editáveis. Nem todas as funções CSS são reproduzidas exatamente. Scripts, recursos remotos, animações e estados temporários são limitados. Confira os layouts e avisos depois de importar.
DO INÍCIO AO FIM
Do projeto HTML aos layouts editáveis no Figma.
Prepare o layout no navegador, transfira o JSON e importe-o com o plugin CoreBase no Figma Desktop. Instale o plugin uma vez e reutilize-o nos projetos seguintes.
CoreBase HTML to Figma
ZIP pronto a usar · esquema v2 · sem compilação nem Node.js
Precisa do Figma Desktop, de um ficheiro Figma Design editável e de um projeto HTML ou ZIP local. A instalação é feita como plugin de desenvolvimento, não através do Figma Community. Guarde a pasta extraída no computador depois da instalação.
Prepare o projeto HTML
Use HTML/HTM ou um ZIP com HTML, CSS, imagens e fontes, preservando os caminhos relativos. Com recursos locais, prefira ZIP. Limite: 15 MB. Os recursos externos e scripts do projeto são bloqueados; é captado o estado estático inicial da página.
Exporte os layouts responsivos
Carregue o projeto acima e escolha a página principal se houver vários HTML. Mantenha Desktop 1440, Tablet 768 e Mobile 390 px ou defina outras larguras. Prima Preparar dados do layout, aguarde as três capturas e guarde o ficheiro .corebase-layout.json.
Transfira e extraia o plugin
Transfira o ZIP do plugin e extraia-o para uma pasta local permanente. Deve conter manifest.json, README.md e dist com code.js e ui.html. Não importe o ZIP, não mova apenas o manifesto e não mude o nome de dist.
Instale no Figma Desktop
Abra um ficheiro Figma Design. Clique com o botão direito na área de trabalho → Plugins → Development → Import plugin from manifest… (por vezes Import new plugin from manifest…). Selecione manifest.json da pasta extraída. Não é preciso criar outro plugin nem editar o manifesto.
Execute o plugin e selecione o JSON
Abra Plugins → Development → CoreBase HTML to Figma. Escolha o .corebase-layout.json do passo 2, não o HTML, ZIP do projeto ou manifesto. Confirme nome, Import ID, esquema v2 e larguras; depois prima Import to Figma.
Verifique os layouts importados
Aguarde Done. A secção CoreBase Import contém Desktop, Tablet e Mobile lado a lado e selecionados. Consulte os avisos e use Select Imported Frames se necessário. Texto e vetores suportados continuam editáveis. Verifique hierarquia, dimensões, espaçamento e recursos em falta.
Ajuste e volte a importar
Altere o HTML/CSS original, exporte um novo JSON e execute novamente o plugin. Cada importação cria uma nova secção sem substituir a anterior. Organize e guarde os layouts no Figma como habitualmente.
Mantenha estes ficheiros juntos
dist/code.jsImportador compilado. Mantenha-o na pasta dist.
dist/ui.htmlInterface do plugin. Mantenha-a junto de code.js em dist.
README.mdInstalação, desenvolvimento e limitações da V1.
O que o plugin reconstrói
Camadas, não uma captura
Frames, texto, imagens incorporadas e SVG completos tornam-se camadas editáveis. Flexbox usa Auto Layout quando possível; CSS Grid mantém posições relativas num frame normal.
Verifique fontes e imagens
Fontes ou pesos indisponíveis são substituídos com um aviso. Imagens ausentes ou apenas remotas tornam-se espaços reservados com as dimensões corretas. Inclua recursos locais no ZIP: o importador não os transfere da internet.
Três layouts independentes
Desktop, Tablet e Mobile são frames separados, não componentes responsivos ligados automaticamente. CSS avançado, animações, interações de protótipo, componentes e design tokens não são reconstruídos.
Se surgir um problema
Erro de manifesto ou ficheiro em falta
Transfira novamente o ZIP atual e extraia toda a pasta. Selecione manifest.json mantendo dist/code.js e dist/ui.html nos respetivos locais. Um erro com description indica um manifesto antigo; o pacote atual não contém esse campo.
Esquema incompatível ou JSON inválido
Exporte aqui um novo Layout JSON. Só é aceite schemaVersion 2. Renomear HTML para .json ou usar um export antigo incompatível não funciona. Import ID é um identificador, não um código para obter os dados online.
Importação concluída com avisos
Os avisos indicam substituições e limites, não garantem fidelidade perfeita. Verifique as camadas, imagens e fontes referidas. Se a captura original estiver vazia ou incompleta, confira o HTML principal, caminhos locais e conteúdo estático antes de exportar novamente.
Os ficheiros não passam pelos servidores CoreBase
O HTML é analisado localmente num frame isolado do navegador. O plugin lê o JSON local sem chamar a CoreBase nem API externas. Depois da importação, as camadas fazem parte do ficheiro Figma, sujeito às definições de armazenamento e privacidade do Figma.
Precisão e confiança
Construído para ser útil. Projetado para ser verificado.
Testamos e revisamos ferramentas, fórmulas e informações CoreBase para mantê-las úteis e precisas. Imprecisões ocasionais ou circunstâncias específicas da sua situação ainda podem afetar o resultado, portanto, verifique as decisões importantes em relação às suas próprias necessidades.
Encontrou algo que não parece certo? Conte-nos para que possamos revisá-lo e melhorá-lo.