Dai breakpoint di Figma alle media query CSS: come funziona la mappatura

Risposta rapida: Figma non ha un concetto integrato di breakpoint come invece ha il CSS. I designer simulano la responsività con frame separati per ogni dimensione di schermo, oppure con il ridimensionamento fluido dell'Auto Layout (fill/hug), che non richiede alcuna media query. L'approccio usato nel design determina se l'output CSS ha bisogno di regole @media esplicite oppure no.

Figma non ha davvero i breakpoint

Vale la pena dirlo chiaramente, perché è un'assunzione comune: Figma non ha una funzione nativa "imposta un breakpoint qui" paragonabile a una media query CSS. Quello che i designer fanno davvero invece rientra in due pattern, che si convertono in CSS in modo molto diverso.

Pattern 1: frame separati per ogni dimensione di schermo

L'approccio tradizionale prevede un frame distinto per desktop, tablet e mobile — ciascuno impaginato a mano alla propria larghezza. Questo si mappa direttamente su breakpoint CSS espliciti: il layout di ogni frame diventa gli stili dentro un blocco @media (min-width: ...) corrispondente, e il compito dello sviluppatore è decidere dove posizionare i valori reali dei breakpoint (facendoli corrispondere alle larghezze dei frame, oppure a breakpoint standard come 768px/1024px), dato che le larghezze dei frame Figma sono decisioni di design arrotondate, non una specifica CSS.

È l'approccio giusto da usare quando i layout sono strutturalmente diversi tra le varie dimensioni — non solo riorganizzati, ma davvero diversi (una sidebar che diventa una bottom nav, una griglia a 3 colonne che diventa una singola colonna con contenuto riordinato).

Pattern 2: ridimensionamento fluido dell'Auto Layout — spesso senza bisogno di media query

L'altro pattern si basa sul comportamento di ridimensionamento dell'Auto Layout — "fill container" e "hug contents" — impostato su un singolo frame invece di ridisegnare l'intero layout a ogni larghezza. Una riga di card impostata per andare a capo e riempire lo spazio disponibile, una sidebar a larghezza fissa accanto a un'area di contenuto principale "fill", testo che si riorganizza naturalmente dentro un contenitore flessibile — niente di tutto questo ha bisogno di un breakpoint. È lo stesso comportamento CSS che ottieni con flex-wrap, larghezze in percentuale e min-width/max-width, senza una sola regola @media.

Vale la pena sottolinearlo perché è l'intuizione più utile per rivedere il CSS generato: non ogni dettaglio responsive dovrebbe diventare una media query. Un design che si basa sul ridimensionamento fluido dell'Auto Layout si converte in CSS che è naturalmente fluido su un intervallo di larghezze — aggiungere breakpoint espliciti sopra a questo è di solito un lavoro inutile, che replica un comportamento che il layout ha già.

Dove la traduzione manuale di solito va storta

• Aggiungere breakpoint dove il CSS fluido copre già il caso, ottenendo più regole @media di quante il design ne richieda davvero e un foglio di stile più difficile da mantenere di quanto il layout giustifichi.
• Perdere un breakpoint reale quando un design ha davvero un frame mobile strutturalmente diverso, e cercare di forzare il layout desktop a riorganizzarsi in qualcosa per cui non è mai stato pensato.
• Scegliere valori di breakpoint arbitrari in pixel che non corrispondono né alle larghezze dei frame del design né alla scala di breakpoint già esistente nel progetto, creando un valore isolato che nessun altro CSS del progetto usa.

Come gestisce questo MarkupGen

Il comportamento responsive viene generato a partire dai vincoli di ridimensionamento reali del frame, invece di essere aggiunto come passaggio manuale separato — le impostazioni fill/hug dell'Auto Layout si traducono automaticamente in CSS fluido, la stessa distinzione trattata sopra. Per i design in cui esiste davvero un layout mobile diverso (o che deve essere generato a partire da un unico frame desktop), MarkupGen può produrre un layout mobile o desktop generato separatamente dall'IA — vedi Design responsive in Figma: layout Mobile e Desktop spiegati per capire come funziona. Per la mappatura da Auto Layout a Flexbox che sta alla base di tutto questo, vedi Auto Layout to CSS.

Provalo sul tuo design

Il modo più veloce per capire di quale pattern il tuo design ha davvero bisogno è farlo passare nello strumento e controllare il CSS generato per la presenza — o l'assenza — di regole @media. Prova MarkupGen gratis sul tuo file Figma, oppure vedi la pagina Figma to HTML converter per scoprire cosa include.