Come importare un design da Figma a Framer

Per importare un design da Figma a Framer, installa il plugin gratuito Figma to HTML with Framer, seleziona i frame che ti servono e incollali nel tuo progetto Framer. Framer mantiene livelli, gruppi e struttura, quindi ti ritrovi su un canvas web vero e proprio invece che su un export di codice statico. Tutto quello che viene dopo l'incolla è pulizia, e la pulizia è la parte di cui nessuno ti avverte.

Come importare un design da Figma a Framer, passo per passo

Installa Figma to HTML with Framer dalla Figma Community. È gratuito e Framer dichiara oltre 600.000 utenti, quindi è la strada ufficiale e non un ponte di terze parti. Seleziona i livelli o i frame che vuoi spostare e lancia il plugin. Compare un messaggio che ti dice quanti livelli ha copiato. Passa al tuo progetto Framer, clicca sul canvas e incolla. La pagina Figma to HTML di Framer segue gli stessi otto passaggi: installa il plugin, copia i design da Figma, incolla in Framer, continua a modificare, rendi tutto responsive, aggiungi effetti e animazioni, aggiungi pagine e link, pubblica.

Incolla una sezione alla volta

Non selezionare tutto il frame della pagina per spostarlo in un colpo solo. Una landing page contiene centinaia di livelli e, quando qualcosa arriva storto, non hai modo di capire quale pezzo l'ha causato. Incolla l'hero, sistema l'hero. Incolla la striscia dei loghi, sistema la striscia dei loghi. Scendi lungo la pagina nello stesso ordine in cui scorre un visitatore. Framer lo dice apertamente: alcune strutture complesse di Figma vanno ripulite per il web, quindi dividi il lavoro in pezzi piccoli da pulire.

I font sono la prima cosa da sistemare

La documentazione di Framer è netta su questo punto. Quando importi da Figma, un font personalizzato che Framer non ha viene sostituito con quello di default. L'hero all'improvviso si legge in un sans di sistema, tutte le lunghezze di riga cambiano e le spaziature vanno dietro. Sistema i caratteri prima di toccare il layout. Aggiungi un livello di testo, apri il selettore dei font nel pannello di destra, vai sulla scheda Custom, clicca Upload Fonts e carica il file. Framer consiglia il formato .woff2 per la velocità di caricamento. Poi seleziona i livelli di testo importati e riapplica il font. Controlla prima la libreria integrata, perché Framer include Google Fonts e Fontshare e uno dei due potrebbe già avere il tuo carattere.

Cosa arriva e cosa no

Arrivano livelli, gruppi e gerarchia. Arrivano anche le impostazioni di layout: la lezione della Framer Academy conferma che auto layout, gerarchia e proprietà fill passano in automatico. Non arriva tutto ciò che Figma non ha mai avuto: breakpoint, stati hover, effetti allo scroll o componenti nel senso di Framer. Le FAQ di Framer dicono di sostituire i pezzi statici con componenti veri dopo l'importazione. Prendilo sul serio. Ricostruisci la nav, il pulsante e la card come componenti Framer, invece di tenerti quaranta copie incollate che dovrai modificare quaranta volte.

Trasforma i frame incollati in stack che si adattano

Una sezione incollata che si porta dietro larghezze fisse in pixel andrà in overflow sul telefono. L'articolo di troubleshooting di Framer indica proprio questo come causa più comune di una pagina che non riempie lo schermo sul breakpoint Phone: un elemento più largo del viewport mobile, di solito una larghezza fissa tipo 321px, oppure un Max Width impostato troppo grande. Vai sezione per sezione, seleziona i contenitori e nella parte Size del pannello di destra passa Width da un numero fisso a 100% o 1fr. Tieni il Max Width solo sul contenitore del contenuto, così la colonna di testo resta leggibile su un monitor largo. Fallo prima su Desktop, perché i valori Desktop scendono verso i breakpoint più piccoli.

Poi aggiungi le cose per cui Framer esiste davvero

Qui sta il guadagno di usare Framer invece di esportare codice. Imposta i tre breakpoint. Dai ai pulsanti gli stati hover e tap. Aggiungi le comparse allo scroll delle sezioni. Trasforma i blocchi ripetuti in componenti, così una modifica aggiorna ogni istanza. Crea gli stili di testo nel pannello Assets sotto Styles, con misure dedicate per Desktop, Tablet e Mobile, così i caratteri scalano senza che tu tocchi i singoli livelli. Nel file Figma niente di tutto questo esisteva. È la parte che trasforma un mockup in una pagina.

L'ordine in cui lavoriamo noi

Prima i font, poi i colori e gli stili di testo. Dopo, sezione per sezione dall'alto, convertendo le larghezze fisse in fill man mano che scendi. Costruisci i componenti per tutto ciò che si ripete. Poi imposta i breakpoint, da Desktop a Tablet a Phone, e solo alla fine aggiungi le interazioni. Metadati e link vanno per ultimi, quando la struttura ha smesso di muoversi. Con quest'ordine una singola landing page si chiude in un giorno. Fuori ordine ce ne vogliono tre, perché ogni correzione disfa quella precedente.