Esportare pagine web in Figma

Come funziona il flusso di lavoro locale

CloneWebsite non invia una pagina web a un server di conversione. L'estensione di Chrome legge la pagina renderizzata nella scheda attiva, crea un archivio .cdesign versionato in memoria e lo scarica o lo salva localmente. Il plugin Figma di CloneWebsite apre quel file e crea livelli nel documento Figma corrente.

Pagina web renderizzata → Estensione di Chrome → file .cdesign locale → plugin Figma → livelli modificabili

Il file .cdesign è un contenitore aperto basato su ZIP. Contiene un manifest, un file di scena JSON per ogni stato acquisito e risorse immagine indirizzate tramite contenuto.

Acquisisci una pagina o un componente

1. Apri la pagina web e attendi che i suoi contenuti e i web font terminino il rendering.
2. Apri la barra degli strumenti di CloneWebsite e cambia l'output da Sito web a Figma.
3. Scegli Clona pagina o Clona componente.
4. Apri le opzioni di acquisizione di Figma e scegli combinazioni di viewport e tema. L'impostazione iniziale acquisisce il viewport corrente e il tema corrente. Puoi aggiungere viewport da 1440, 768 e 390 pixel e temi chiari o scuri, fino a sei combinazioni.
5. Mantieni Acquisizione avanzata abilitata quando hai bisogno di viewport responsive, stati di interazione dei componenti, fallback raster per iframe/filtri o una geometria del browser più precisa.
6. Seleziona Avvia. In modalità componente, fai clic sul componente nella pagina e conferma la selezione.
7. Scarica il file .cdesign risultante o salvalo nella lista dei progetti locale dell'estensione per un download successivo.

Autorizzazione del debugger di Chrome

Chrome non supporta la dichiarazione dell'autorizzazione debugger come opzionale, quindi viene concessa quando l'estensione è installata. CloneWebsite collega il debugger solo quando avvii un'acquisizione di Figma con Acquisizione avanzata abilitata. Viene usato temporaneamente per emulare combinazioni di viewport/tema, forzare gli stati pseudo supportati dei componenti e creare screenshot locali per sottoalberi visivi non supportati. L'estensione si scollega dalla scheda quando l'acquisizione termina o fallisce.

Quando Acquisizione avanzata è disattivata, l'estensione non collega il debugger. La modalità base acquisisce il viewport corrente, il tema corrente e lo stato del componente Default. Il report di acquisizione spiega quali scene avanzate o fallback sono stati saltati.

Chrome DevTools e un altro client debugger non possono controllare la stessa scheda contemporaneamente. Chiudi DevTools per quella scheda se l'acquisizione avanzata segnala un errore di collegamento.

Importa in Figma

Durante la fase di rilascio interno:

1. Compila il plugin da figma_plugin/ con pnpm install && pnpm build.
2. In Figma Desktop, scegli Plugins → Development → Import plugin from manifest….
3. Seleziona figma_plugin/manifest.json.
4. Esegui CloneWebsite Design Importer.
5. Trascina il file .cdesign, seleziona le scene da importare e avvia l'importazione.

Il plugin non ha autorizzazione di rete. L'analisi dell'archivio, la creazione delle immagini, la corrispondenza dei font e la generazione dei livelli avvengono all'interno di Figma sul tuo dispositivo.

Cosa rimane modificabile

• Frame, riempimenti, bordi, raggi degli angoli, ombre e modalità di fusione di base
• Contenuto testuale, dimensione del font, altezza della riga, allineamento, decorazione e colore
• Livelli immagine e SVG
• Layout Flexbox ad alta affidabilità come Figma Auto Layout
• Componenti selezionati come componenti Figma
• Stati del componente Default, Hover, Focus, Active e Disabled come varianti quando l'acquisizione avanzata riesce a mappare il componente selezionato

Le regioni di pagina Grid e freeform usano il posizionamento assoluto per preservare la geometria. Filtri complessi, maschere, iframe, superfici video ed effetti del browser non supportati possono diventare livelli di fallback raster locale.

Font e report di importazione

I plugin di Figma non possono installare un web font remoto della pagina nell'editor. L'importatore cerca prima la famiglia e lo stile richiesti tra i font disponibili per Figma. Se non riesce a caricare una corrispondenza esatta, usa un fallback locale modificabile ed elenca la sostituzione nel report di importazione.

Il report elenca anche asset mancanti, fallback raster, markup SVG non sicuro ignorato, limiti dei nodi e avvisi di acquisizione. Rivedilo prima di trattare il file importato come fonte di design di produzione.

Privacy e uso responsabile

Il contenuto della pagina non viene caricato su CloneWebsite. Le richieste di rete durante l'acquisizione sono limitate al download di risorse già referenziate dalla pagina, più un endpoint IA BYOK facoltativo se hai configurato separatamente quella funzione. Consulta l'informativa sulla privacy dell'estensione.

Acquisisci solo le pagine che sei autorizzato a visitare. I diritti d'autore, i marchi, i dati personali e i diritti di design del sito originale rimangono ai rispettivi proprietari.