manifest.jsonConfigurazione del plugin. Seleziona questo file durante l’installazione in Figma.
1
Carica il progetto
HTML, HTM o ZIP · massimo 15 MB
Trascina qui un progetto HTML o ZIP oppure scegli un file
2
Dimensioni responsive
COME FUNZIONA
Rendering nel browser, output strutturato.
CoreBase renderizza lo stato iniziale a tre larghezze, legge il DOM visibile e il CSS calcolato e crea alberi responsive indipendenti.
Cosa includono i dati
Il JSON versionato registra gerarchia, testo, dimensioni, Flexbox, spaziatura, tipografia, colori, bordi, visibilità, overflow, posizione e riferimenti alle immagini.
Limiti attuali
CoreBase esporta dati strutturati; il plugin Figma separato ricostruisce livelli modificabili. Non tutte le funzioni CSS sono riprodotte esattamente. Script, risorse remote, animazioni e stati temporanei sono limitati. Controlla frame e avvisi dopo l’importazione.
DALL’INIZIO ALLA FINE
Dal progetto HTML ai layout modificabili in Figma.
Prepara il layout nel browser, scarica il JSON e importalo con il plugin CoreBase in Figma Desktop. Installa il plugin una volta e riutilizzalo per i progetti successivi.
CoreBase HTML to Figma
ZIP pronto all’uso · schema v2 · senza compilazione né Node.js
Servono Figma Desktop, un file Figma Design modificabile e un progetto HTML o ZIP locale. Si installa come plugin di sviluppo, non da Figma Community. Conserva la cartella estratta sul computer dopo l’installazione.
Prepara il progetto HTML
Usa HTML/HTM oppure uno ZIP con HTML, CSS, immagini e font, mantenendo i percorsi relativi. Con risorse locali è preferibile ZIP. Limite: 15 MB. Risorse esterne e script del progetto sono bloccati: viene acquisito lo stato statico iniziale della pagina.
Esporta i layout responsive
Carica il progetto sopra e scegli la pagina principale se ci sono più HTML. Mantieni Desktop 1440, Tablet 768 e Mobile 390 px o imposta altre larghezze. Premi Prepara dati del layout, attendi le tre acquisizioni e salva il file .corebase-layout.json.
Scarica ed estrai il plugin
Scarica lo ZIP del plugin ed estrailo in una cartella locale permanente. Troverai manifest.json, README.md e dist con code.js e ui.html. Non importare lo ZIP, non spostare solo il manifesto e non rinominare dist.
Installa in Figma Desktop
Apri un file Figma Design. Clic destro sull’area di lavoro → Plugins → Development → Import plugin from manifest… (a volte Import new plugin from manifest…). Seleziona manifest.json nella cartella estratta. Non occorre creare un nuovo plugin né modificare il manifesto.
Avvia il plugin e scegli il JSON
Apri Plugins → Development → CoreBase HTML to Figma. Seleziona il .corebase-layout.json del passo 2, non HTML, ZIP del progetto o manifesto. Controlla nome, Import ID, schema v2 e larghezze, poi premi Import to Figma.
Controlla i layout importati
Attendi Done. Una sezione CoreBase Import contiene Desktop, Tablet e Mobile affiancati e selezionati. Leggi gli avvisi e usa Select Imported Frames se necessario. Testo e vettori supportati restano modificabili. Controlla gerarchia, dimensioni, spaziatura e risorse mancanti.
Modifica e importa di nuovo
Aggiorna HTML/CSS, esporta un nuovo JSON e riavvia il plugin. Ogni importazione crea una nuova sezione senza sovrascrivere la precedente. Organizza e salva i layout in Figma come di consueto.
Mantieni questi file insieme
dist/code.jsImportatore compilato. Da lasciare nella cartella dist.
dist/ui.htmlInterfaccia del plugin. Da lasciare accanto a code.js in dist.
README.mdInstallazione, sviluppo e limiti della V1.
Cosa ricostruisce il plugin
Livelli, non uno screenshot
Frame, testo, immagini incorporate e SVG completi diventano livelli modificabili. Flexbox diventa Auto Layout dove possibile; CSS Grid mantiene le posizioni relative in un frame normale.
Verifica font e immagini
Font o pesi non disponibili vengono sostituiti con un avviso. Immagini assenti o solo remote diventano segnaposto delle dimensioni corrette. Includi le risorse locali nello ZIP: il plugin non le scarica da internet.
Tre layout indipendenti
Desktop, Tablet e Mobile sono frame separati, non componenti responsive collegati automaticamente. Non vengono ricostruiti CSS avanzato, animazioni, interazioni di prototipo, componenti o design token.
Se l’importazione presenta problemi
Errore del manifesto o file mancante
Scarica di nuovo lo ZIP aggiornato ed estrai l’intera cartella. Scegli manifest.json lasciando dist/code.js e dist/ui.html al loro posto. Un errore relativo a description indica un vecchio manifesto; il pacchetto attuale non include quel campo.
Schema incompatibile o JSON non valido
Esporta qui un nuovo Layout JSON. È supportato solo schemaVersion 2. Rinominare HTML in .json o usare vecchi export incompatibili non funziona. Import ID identifica il progetto, non consente di recuperarne i dati online.
Importazione completata con avvisi
Gli avvisi indicano sostituzioni e limiti, non garantiscono una riproduzione perfetta. Controlla i livelli, i font e le immagini indicati. Se la sorgente è vuota o incompleta, verifica HTML principale, percorsi locali e contenuto statico prima di esportare di nuovo.
I file non vengono inviati a CoreBase
L’HTML viene analizzato localmente in un frame isolato del browser. Il plugin legge il JSON locale senza chiamare CoreBase o API esterne. I livelli importati fanno poi parte del file Figma, gestito secondo le impostazioni di archiviazione e privacy di Figma.
Precisione e fiducia
Costruito per essere utile. Progettato per essere controllato.
Testiamo ed esaminiamo gli strumenti, le formule e le informazioni CoreBase per mantenerli utili e accurati. Inesattezze occasionali o circostanze specifiche della tua situazione possono comunque influenzare un risultato, quindi verifica le decisioni importanti rispetto alle tue esigenze.
Hai trovato qualcosa che non ti sembra corretto? Raccontacelo così possiamo rivederlo e migliorarlo.