Come creare gli screenshot per l'App Store in Figma (e quando un generatore fa prima)

Per creare gli screenshot per l'App Store in Figma, crea un frame per ogni screenshot alla dimensione esatta in pixel che Apple accetta (per esempio 1290 × 2796 per lo slot iPhone più grande), costruisci un componente riutilizzabile che contenga il titolo e un mockup del dispositivo, inserisci nel mockup le schermate della tua app ed esporta ogni frame a 1x in PNG o JPG. Dato che le unità di Figma sono pixel a 1x, un frame dimensionato correttamente viene esportato esattamente alla dimensione che App Store Connect vuole.

Figma è un ottimo strumento per questo lavoro, ma diventa anche molto lavoro manuale quando aggiungi più dispositivi, più lingue e Google Play. Questa guida spiega l'impostazione che rende quel lavoro gestibile, ed è onesta su dove un generatore dedicato fa risparmiare tempo.

Quali dimensioni di frame usare in Figma per gli screenshot dell'App Store

Parti dalle specifiche degli screenshot di Apple, che elencano le dimensioni esatte in pixel accettate da ogni slot. App Store Connect ridimensiona i tuoi screenshot più grandi per i dispositivi più piccoli se la tua interfaccia è uguale su tutte le dimensioni, quindi la maggior parte delle app progetta un set per iPhone e, se supporta iPad, uno per iPad. Aggiungi Google Play se pubblichi anche lì.

Apple accetta da 1 a 10 screenshot per slot; Google Play fino a 8 per tipo di dispositivo. Il nostro riferimento sulle dimensioni degli screenshot ha la tabella completa, e l'articolo sui requisiti degli screenshot di Google Play spiega nel dettaglio le regole di Play. Se ti serve anche la grafica di presentazione, guarda la nostra guida alla grafica di presentazione di Google Play.

Un consiglio pratico: disponi i frame di un set uno accanto all'altro su un'unica riga, con uno spazio fisso tra l'uno e l'altro. Vedi tutto il set come lo scorre chi visita lo store, e ti accorgi a colpo d'occhio di un titolo più lungo o di un colore che stona.

Come costruire un componente riutilizzabile per gli screenshot

La differenza tra un file Figma che riesci a mantenere e uno che hai paura di aprire sono i componenti. Costruisci il layout una volta sola, poi fai di ogni screenshot un'istanza.

1. Il blocco del titolo

Crea un frame con auto layout verticale che contenga il titolo e un sottotitolo opzionale. Imposta la larghezza su fill container e l'altezza su hug contents, così un titolo su due righe spinge giù il dispositivo invece di sovrapporsi. Usa gli stili di testo per entrambi, così cambiare font o dimensione in seguito richiede una sola modifica. Qui funzionano meglio i caratteri grandi: il titolo viene letto in formato miniatura nei risultati di ricerca.

2. Il mockup del dispositivo

Dentro la cornice del dispositivo, metti un rettangolo grande quanto l'area dello schermo con la schermata della tua app come riempimento immagine impostato su Fill. Mascherare il rettangolo con la forma dello schermo risolve gli angoli arrotondati. Fai del mockup un componente a sé, con l'immagine dello schermo esposta come instance swap o proprietà immagine, così sostituire una schermata non significa scavare tra i livelli.

3. Il componente dello screenshot

Racchiudi il blocco del titolo e il mockup del dispositivo in un frame padre alla dimensione dello store, con auto layout verticale, padding e un riempimento di sfondo. Aggiungi proprietà del componente per il testo del titolo e per l'immagine dello schermo. Le varianti aiutano se usi più layout, per esempio dispositivo centrato, dispositivo tagliato in basso o nessun dispositivo per uno screenshot di chiusura.

Ora ogni screenshot del set è un'istanza in cui modifichi due proprietà: il titolo e l'immagine. Una modifica a padding, caratteri o sfondo nel componente principale le aggiorna tutte.

Dove trovare mockup di dispositivi per Figma

• Figma Community. Cerca il nome del dispositivo più "mockup". Ci sono molti file gratuiti con le cornici degli iPhone, iPad e Pixel attuali. Controlla la licenza di ognuno, e verifica che l'area dello schermo corrisponda al dispositivo su cui hai fatto le schermate, altrimenti lo screenshot risulterà deformato.
• Apple Design Resources. La pagina delle risorse di design di Apple offre le cornici ufficiali dei prodotti, ma come file Photoshop e PNG, non come file Figma. Puoi mettere il PNG sopra il rettangolo dello schermo in Figma. Apple chiede di leggere le sue linee guida di marketing quando usi le cornici in materiali promozionali. La stessa pagina ha un UI kit ufficiale per iOS e iPadOS in Figma, utile se stai facendo il mockup di una schermata non ancora sviluppata.
• Nessun dispositivo. Molti buoni set rinunciano alla cornice e mostrano la schermata da bordo a bordo, oppure inquadrano una sola parte dell'interfaccia. È una scelta di stile, non un obbligo.

Qualunque cosa metti nella cornice, parti da una schermata pulita: barra di stato fissa sulle 9:41, dati realistici, nessun overlay di debug. La nostra guida agli screenshot puliti da simulatore ed emulatore ha tutti i comandi.

Come esportare da Figma gli screenshot per l'App Store con i pixel esatti

1. Seleziona tutti i frame degli screenshot del set (non le istanze al loro interno).
2. Nella sezione Export del pannello di destra, aggiungi un'impostazione di export: 1x, formato PNG o JPG.
3. Esporta. Ogni frame diventa un file con il nome del frame.

Qualche errore frequente:

• Moltiplicatore sbagliato. Il 2x su un frame a dimensione piena lo raddoppia, e lo store rifiuterà il file. Se vedi 2580 × 5592, è successo questo.
• Dimensioni del frame con decimali. Un frame largo 1290,5 px viene esportato a una dimensione che lo store non accetta. Digita le dimensioni invece di trascinare.
• Trasparenza. App Store Connect non accetta immagini con canale alfa, e Google Play chiede JPEG o PNG a 24 bit senza alfa. Dai a ogni frame uno sfondo pieno; se un PNG viene comunque rifiutato per la trasparenza, esporta in JPG.
• Ordine dei file. Dai ai frame un prefisso numerico (01-hook, 02-proof) così i file si ordinano nella sequenza di caricamento.

Il problema della localizzazione

È qui che Figma diventa costoso. Se pubblichi la tua scheda in cinque lingue, hai cinque set di frame per dispositivo, ognuno con i suoi titoli da modificare, controllare ed esportare. Aggiungi iPad e Google Play e ti ritrovi a mantenere quindici set.

Due approcci lo rendono gestibile:

• Duplica per lingua, ma tieni i componenti condivisi. Copia la riga di istanze per ogni lingua e sovrascrivi solo il testo. Le modifiche al layout continuano ad arrivare dal componente principale. Funziona con qualsiasi piano, ma ogni modifica al testo è un intervento manuale in ogni lingua.
• Variabili stringa con modalità. Salva ogni titolo come variabile stringa e aggiungi una modalità per lingua. Cambiare la modalità di un frame ne cambia il testo. Secondo il centro assistenza di Figma, le modalità sono disponibili nei piani Education, Professional, Organization ed Enterprise, e il numero di modalità per raccolta dipende dal piano.

Nessuno dei due risolve l'espansione del testo. I titoli in tedesco e finlandese spesso sono più lunghi di quelli in inglese, e un titolo che in inglese sta su due righe potrebbe averne bisogno di tre. Controlla ogni frame e, per le lingue da destra a sinistra, specchia il layout e non solo il testo. Anche la traduzione in sé merita attenzione; le nostre guide su come localizzare gli screenshot per l'App Store e su perché tradurre non è localizzare approfondiscono entrambi gli aspetti.

Le pagine prodotto personalizzate moltiplicano di nuovo il lavoro, perché ognuna di solito ha i suoi screenshot. Se le stai pianificando, vale la pena leggere la nostra guida alle pagine prodotto personalizzate prima di impostare il file.

Quando Figma è lo strumento giusto e quando un generatore fa prima

Noi sviluppiamo un generatore di screenshot, quindi tienine conto. Ma ad alcuni team diremmo davvero di restare su Figma.

Una via di mezzo comune: progetta in Figma l'immagine chiave e il primo screenshot, dove hai il controllo totale, poi usa un generatore per la parte ripetitiva, cioè produrre ogni dimensione e ogni lingua. Il nostro confronto tra Launch Shots e Figma mette a confronto i pro e i contro, e la nostra rassegna dei generatori di screenshot copre le altre opzioni.

Se scegli la strada del generatore, Launch Shots tiene aggiornate le dimensioni degli store per tutti i dispositivi, traduce i titoli nelle lingue degli store e pubblica su App Store Connect e Google Play Console. Ha anche un server MCP se preferisci generare il set da Claude Code o Cursor.

Checklist: screenshot per l'App Store in Figma

• Frame impostati digitando le dimensioni esatte dello store (1290 × 2796 o 1320 × 2868 per iPhone, 2064 × 2752 per iPad, 1080 × 1920 per Play).
• Un componente principale con auto layout per il titolo e un mockup del dispositivo annidato; ogni screenshot è un'istanza.
• Titolo e immagine dello schermo esposti come proprietà del componente.
• Schermate pulite: barra di stato sulle 9:41, dati realistici, proporzioni corrispondenti al dispositivo.
• Sfondo pieno su ogni frame; export a 1x in PNG o JPG; prefissi numerici nei nomi dei frame.
• Un piano per le lingue prima di iniziare, che siano righe duplicate o modalità delle variabili.
• Contenuti verificati rispetto alle basi delle nostre best practice per gli screenshot, a partire da cosa mettere nel primo screenshot.