Come preparare un file Figma che si costruisce in fretta in Framer

Prepara il tuo file Figma così. Fai il frame desktop largo 1200. Metti auto layout su ogni contenitore, frame esterno compreso. Decidi fill o fixed per ogni elemento mentre sei ancora in Figma. Fai questo e una landing page passa in Framer in un pomeriggio. Salta il passaggio e ricostruisci mezza pagina a mano, che è la differenza tra un lavoro da un giorno e uno da tre.

Progetta alle larghezze che Framer usa davvero

Il canvas di Framer arriva con tre breakpoint, e le sue pagine di prodotto mostrano le schede Desktop 1200 e Tablet 810. Il codice pubblicato su framer.com dice la stessa cosa. Le immagini responsive vengono servite con regole per min-width 1200px, per 810px fino a 1199.98px e per max-width 809.98px. Quindi costruisci un frame desktop largo 1200. Aggiungi un frame tablet largo 810 se il layout cambia davvero a quella misura. Aggiungi un frame telefono intorno a 390. Se progetti a 1440 e speri che vada bene, ti ritrovi con un hero che sta bene solo sul tuo monitor.

Auto layout su tutto, frame esterno compreso

La lezione della Framer Academy dice che auto layout, gerarchia e proprietà fill passano all'importazione. Il trucco sta tutto lì. Una sezione costruita con auto layout arriva in Framer come uno stack che già sa come ridimensionarsi. Una sezione costruita trascinando i box a occhio arriva come un mucchio di livelli sciolti da rifare. Avvolgi ogni sezione in un auto layout verticale. Avvolgi ogni riga in uno orizzontale. Usa i gap invece di allontanare le cose con spazio vuoto. Ogni livello che sta fuori da un frame con auto layout è un livello che costruirai due volte.

Decidi fill o fixed prima di consegnare

In Figma imposta il contenitore della sezione su fill container. Dai al contenitore interno del contenuto una larghezza massima fissa, tipo 1200 o 1140. Imposta su fill le card dentro una riga, così si dividono la larghezza in parti uguali. Questo si traduce dritto in Framer, dove metti Width su 100% o 1fr e il Max Width sul contenitore del contenuto. L'articolo di troubleshooting di Framer dice che una larghezza fissa o un Max Width troppo grande sono il motivo più comune per cui una pagina non riempie lo schermo sul breakpoint Phone. Ogni numero fisso che ti dimentichi in Figma è un bug che passi al passaggio dopo.

Dai un nome agli stili di testo e riusali

Dai un nome ai caratteri e riusali: H1, H2, H3, body large, body, caption, eyebrow. In Framer li ricostruisci una volta sola nel pannello Assets sotto Styles, poi li applichi dal pannello di destra sotto Text e Styles. Ogni stile di testo di Framer può avere le sue misure per Desktop, Tablet e Mobile, con dimensione del carattere, interlinea, spaziatura tra le lettere e spazio tra i paragrafi. Se il tuo file Figma ha quattordici dimensioni di titolo leggermente diverse, o costruisci quattordici stili di testo o ti tieni caratteri che su mobile si leggono male.

Controlla la licenza del font già in fase di moodboard

Framer include Google Fonts e Fontshare e ti lascia caricare file personalizzati dalla scheda Custom del selettore dei font. Framer ti dice anche di assicurarti di avere la licenza giusta prima di caricare un font su un sito. Una licenza desktop copre un mockup in Figma. Non copre una pagina online. Sistema la cosa mentre stai scegliendo il carattere, non la sera prima del lancio, perché cambiare font cambia ogni andata a capo della pagina.

Esporta le immagini alla misura in cui verranno mostrate

Framer comprime le immagini in WebP e AVIF e le ridimensiona per ogni dispositivo, come documenta la sua pagina sulle performance. Questo copre la consegna. Non annulla uno screenshot incollato a 4000 pixel di larghezza e non trasforma un logo PNG in un SVG. Esporta le immagini raster a circa il doppio della misura in cui vengono mostrate. Usa SVG per loghi e icone. Scrivi il testo alternativo mentre hai ancora il contenuto fresco in testa.

La checklist di consegna del file Figma

Prima di dire che il file Figma è finito, fai sette controlli. Il frame desktop è largo 1200. Ogni sezione sta dentro un frame con auto layout. I contenitori di sezione sono su fill e quelli del contenuto portano la larghezza massima. I caratteri girano su stili con un nome, senza misure orfane. I font hanno una licenza web e i file sono pronti da caricare. Le immagini sono esportate a misure sensate, con SVG per tutto ciò che è vettoriale. I nomi dei livelli si leggono come li vuoi nella lista dei livelli di Framer, perché quei nomi passano esattamente come li hai lasciati.