App-Store-Screenshots in Figma erstellen (und wann ein Generator schneller ist)
App-Store-Screenshots in Figma erstellen: exakte Frame-Größen, eine wiederverwendbare Komponente, saubere 1x-Exporte – und wann ein Generator schneller ist.
Um App-Store-Screenshots in Figma zu erstellen, legst du pro Screenshot einen Frame in genau der Pixelgröße an, die Apple akzeptiert (zum Beispiel 1290 × 2796 für den größten iPhone-Slot), baust eine wiederverwendbare Komponente mit Headline und Geräte-Mockup, setzt deine App-Aufnahmen in das Mockup und exportierst jeden Frame in 1x als PNG oder JPG. Weil Figma-Einheiten bei 1x Pixel sind, wird ein korrekt dimensionierter Frame genau in der Größe exportiert, die App Store Connect haben will.
Figma eignet sich super dafür – wird aber auch ziemlich viel Handarbeit, sobald weitere Geräte, weitere Sprachen und Google Play dazukommen. Dieser Leitfaden zeigt ein Setup, mit dem diese Arbeit überschaubar bleibt, und sagt ehrlich, wo ein spezialisierter Generator Zeit spart.
- Figma-Frames werden bei 1x in Pixeln gemessen. Ein Frame in einer App Store Connect-Größe wird beim Export in 1x also in genau dieser Größe ausgegeben.
- Der größte iPhone-Slot in App Store Connect akzeptiert im Hochformat 1260 × 2736, 1290 × 2796 und 1320 × 2868; der 13-Zoll-iPad-Slot akzeptiert 2064 × 2752 und 2048 × 2732.
- Eine Komponente mit Auto Layout für die Headline und einem verschachtelten Geräte-Mockup lässt dich Schrift, Abstände oder Farbe einmal für das ganze Set ändern.
- Apples offizielle Geräterahmen gibt es als Photoshop- und PNG-Dateien, nicht als Figma-Dateien; Mockup-Dateien aus der Figma Community schließen diese Lücke.
- Der größte Aufwand in Figma ist die Lokalisierung: Jede Sprache bedeutet meist ein weiteres komplettes Frame-Set, das du bearbeiten, prüfen und exportieren musst.
Welche Frame-Größen du für App-Store-Screenshots in Figma brauchst
Fang mit Apples Screenshot-Spezifikationen an. Dort stehen die exakten Pixelgrößen für jeden Display-Slot. App Store Connect skaliert deine größten Screenshots für kleinere Geräte herunter, wenn deine UI auf allen Größen gleich ist. Die meisten Apps gestalten deshalb ein iPhone-Set und, falls sie das iPad unterstützen, ein iPad-Set. Dazu kommt Google Play, wenn du dort veröffentlichst.
| Slot | Figma-Frame (Hochformat) | Hinweise |
|---|---|---|
| iPhone, größtes Display (oft 6,9 Zoll genannt) | 1320 × 2868 oder 1290 × 2796 | Apple akzeptiert auch 1260 × 2736. Pflicht für iPhone-Apps, außer du lieferst stattdessen den 6,5-Zoll-Slot. |
| iPhone 6,5 Zoll | 1284 × 2778 oder 1242 × 2688 | Nur nötig, wenn du den größeren Slot weglässt oder gerätespezifische Screenshots willst. |
| iPad 13 Zoll | 2064 × 2752 oder 2048 × 2732 | Pflicht, wenn die App auf dem iPad läuft. |
| Google Play Smartphone | 1080 × 1920 | Play erlaubt 320–3840 px pro Seite, die lange Seite höchstens doppelt so lang wie die kurze. |
| Google Play Vorstellungsgrafik | 1024 × 500 | Eine pro Store-Eintrag, nicht Teil des Screenshot-Sets. |
Apple erlaubt 1 bis 10 Screenshots pro Slot, Google Play bis zu 8 pro Gerätetyp. Unsere Übersicht der Screenshot-Größen enthält die komplette Tabelle, und der Beitrag zu den Screenshot-Anforderungen bei Google Play erklärt die Regeln von Play im Detail. Wenn du auch die Vorstellungsgrafik brauchst, schau in unseren Leitfaden zur Google Play Vorstellungsgrafik.
Ein praktischer Tipp: Leg die Frames eines Sets in einer Reihe mit festem Abstand nebeneinander. So siehst du das ganze Set so, wie jemand im Store durchscrollt, und erkennst auf einen Blick, wenn eine Headline zu lang oder eine Farbe daneben ist.
So baust du eine wiederverwendbare Screenshot-Komponente
Ob du eine Figma-Datei gut pflegen kannst oder dich vor dem Öffnen fürchtest, entscheiden die Komponenten. Bau das Layout einmal und mach jeden Screenshot zu einer Instanz.
1. Der Textblock
Leg einen Frame mit vertikalem Auto Layout an, der die Headline und optional eine Subheadline enthält. Setz die Breite auf „Fill“ und die Höhe auf „Hug“, damit eine zweizeilige Headline das Gerät nach unten schiebt, statt es zu überlappen. Nutz für beide Textstile, damit eine spätere Änderung von Schrift oder Größe nur ein einziger Handgriff ist. Große Schrift funktioniert hier am besten: Die Headline wird in den Suchergebnissen in Thumbnail-Größe gelesen.
2. Das Geräte-Mockup
Leg in den Geräterahmen ein Rechteck in der Größe des Bildschirmbereichs und gib ihm deine App-Aufnahme als Bildfüllung mit der Einstellung Fill. Wenn du das Rechteck mit der Bildschirmform maskierst, stimmen auch die abgerundeten Ecken. Mach das Mockup zu einer eigenen Komponente und stell das Bildschirmbild als Instance Swap oder Bild-Property bereit, damit du für eine neue Aufnahme nicht durch die Ebenen wühlen musst.
3. Die Screenshot-Komponente
Pack Textblock und Geräte-Mockup in einen übergeordneten Frame in Store-Größe, mit vertikalem Auto Layout, Padding und Hintergrundfüllung. Füg Komponenten-Properties für den Headline-Text und das Bildschirmbild hinzu. Varianten helfen, wenn du mehrere Layouts nutzt, zum Beispiel Gerät mittig, Gerät unten angeschnitten oder ganz ohne Gerät für einen abschließenden Screenshot.
Jetzt ist jeder Screenshot im Set eine Instanz, bei der du zwei Properties bearbeitest: die Headline und das Bild. Eine Änderung an Padding, Schrift oder Hintergrund in der Hauptkomponente aktualisiert alle auf einmal.
Woher du Geräte-Mockups für Figma bekommst
- Figma Community. Such nach dem Gerätenamen plus „mockup“. Es gibt viele kostenlose Dateien mit aktuellen iPhone-, iPad- und Pixel-Rahmen. Prüf jeweils die Lizenz und ob der Bildschirmbereich zu dem Gerät passt, auf dem du die Aufnahmen gemacht hast – sonst wird dein Screenshot verzerrt.
- Apple Design Resources. Apples Seite mit Design-Ressourcen bietet offizielle Geräterahmen, allerdings als Photoshop- und PNG-Dateien, nicht als Figma-Dateien. Du kannst das PNG in Figma über dein Bildschirm-Rechteck legen. Apple bittet darum, die Marketing-Richtlinien zu lesen, wenn du die Rahmen in Marketingmaterial verwendest. Auf derselben Seite gibt es ein offizielles UI-Kit für iOS und iPadOS in Figma, das hilft, wenn du einen Screen gestaltest, der noch nicht gebaut ist.
- Ganz ohne Gerät. Viele gute Sets verzichten auf den Rahmen und zeigen die Aufnahme randlos oder schneiden auf einen einzelnen Teil der UI zu. Das ist eine Stilfrage, keine Pflicht.
Egal, was du in den Rahmen setzt: Fang mit einer sauberen Aufnahme an – feste Statusleiste mit 9:41, realistische Daten, keine Debug-Overlays. Unser Leitfaden zu sauberen Screenshots aus Simulator und Emulator hat die passenden Befehle.
App-Store-Screenshots pixelgenau aus Figma exportieren
- Wähl alle Screenshot-Frames des Sets aus (nicht die Instanzen darin).
- Füg im Bereich „Export“ der rechten Seitenleiste eine Exporteinstellung hinzu: 1x, Format PNG oder JPG.
- Exportieren. Jeder Frame wird zu einer Datei, die nach dem Frame benannt ist.
Ein paar Dinge, die gern schiefgehen:
- Falscher Multiplikator. 2x verdoppelt einen Frame in voller Größe, und der Store lehnt die Datei ab. Wenn du 2580 × 5592 siehst, ist genau das passiert.
- Krumme Frame-Größen. Ein Frame mit 1290,5 px Breite wird in einer Größe exportiert, die der Store nicht akzeptiert. Tipp die Maße ein, statt zu ziehen.
- Transparenz. App Store Connect akzeptiert keine Bilder mit Alphakanal, und Google Play verlangt JPEG oder 24-Bit-PNG ohne Alpha. Gib jedem Frame einen deckenden Hintergrund; wird ein PNG trotzdem wegen Transparenz abgelehnt, exportier stattdessen JPG.
- Dateireihenfolge. Benenn Frames mit einem Zahlenpräfix (
01-hook,02-proof), damit die Dateien in der Upload-Reihenfolge sortiert sind.
Das Lokalisierungsproblem
Hier wird Figma teuer. Wenn du deinen Store-Eintrag in fünf Sprachen veröffentlichst, hast du pro Gerät fünf Frame-Sets, jedes mit eigenen Headlines, die du bearbeiten, prüfen und exportieren musst. Kommen iPad und Google Play dazu, pflegst du fünfzehn Sets.
Zwei Ansätze halten das im Rahmen:
- Pro Sprache duplizieren, Komponenten teilen. Kopier die Reihe von Instanzen für jede Sprache und überschreib nur den Text. Layoutänderungen kommen weiterhin aus der Hauptkomponente. Das funktioniert in jedem Plan, aber jede Textänderung ist Handarbeit in jeder Sprache.
- String-Variablen mit Modi. Speicher jede Headline als String-Variable und leg pro Sprache einen Modus an. Wechselst du den Modus eines Frames, wechselt auch sein Text. Laut Figmas Hilfe-Center sind Modi in den Plänen Education, Professional, Organization und Enterprise verfügbar, und wie viele Modi pro Sammlung möglich sind, hängt vom Plan ab.
Keiner der beiden Ansätze löst das Problem der Textlänge. Deutsche und finnische Headlines sind oft länger als englische, und eine Headline, die auf Englisch in zwei Zeilen passt, braucht vielleicht drei. Prüf jeden Frame, und spiegle bei Sprachen, die von rechts nach links laufen, das ganze Layout statt nur den Text. Auch die Übersetzung selbst verdient Sorgfalt; unsere Leitfäden zum Lokalisieren von App-Store-Screenshots und dazu, warum Übersetzen noch kein Lokalisieren ist, gehen auf beides ein.
Eigene Produktseiten vervielfachen die Arbeit noch einmal, weil jede meist ihre eigenen Screenshots bekommt. Wenn du welche planst, lohnt sich unser Leitfaden zu eigenen Produktseiten, bevor du die Datei aufsetzt.
Wann Figma das richtige Tool ist und wann ein Generator schneller ist
Wir bauen selbst einen Screenshot-Generator, also nimm das mit entsprechender Vorsicht. Aber manchen Teams würden wir ehrlich raten, bei Figma zu bleiben.
| Situation | Figma | Ein Screenshot-Generator |
|---|---|---|
| Designer im Team, starkes Brand-System | Meist die bessere Wahl: volle Kontrolle, echte Komponenten | Kann sich einengend anfühlen |
| Ungewöhnliches Konzept (illustriert, Panorama, viel eigene Grafik) | Bessere Wahl | Hängt vom Tool ab |
| Eine Sprache, ein Store, ein Gerät | Passt; der Einrichtungsaufwand fällt nur einmal an | Schneller zur ersten Version |
| Mehrere Sprachen | Jede Sprache ist ein weiteres Set zum Bearbeiten und Exportieren | Übersetzung ist meist eingebaut |
| iOS und Android | Eigene Frames für jede Store-Größe | Store-Größen sind meist Voreinstellungen |
| Hochladen | Exportieren, dann von Hand hochladen oder per Skript | Manche Tools laden direkt in die Stores hoch |
Ein verbreiteter Mittelweg: Gestalte das Key Visual und den ersten Screenshot in Figma, wo du volle Kontrolle hast, und nutz dann einen Generator für den repetitiven Teil, also jede Größe und jede Sprache. Unser Vergleich Launch Shots vs. Figma stellt die Vor- und Nachteile nebeneinander, und unsere Übersicht der Screenshot-Generatoren zeigt die anderen Optionen.
Wenn du dich für einen Generator entscheidest: Launch Shots hält die Store-Größen für alle Geräte aktuell, übersetzt Headlines in die Store-Sprachen und veröffentlicht in App Store Connect und der Google Play Console. Außerdem gibt es einen MCP-Server, falls du das Set lieber aus Claude Code oder Cursor erzeugst.
Store-fertige Screenshots in Minuten gestalten – kostenlos, ohne Wasserzeichen.
Launch Shots kannst du kostenlos nutzen. Alle Vorlagen (110+), über 220 Geräterahmen plus 3D-Mockups, KI-Übersetzung und direkter Upload in App Store Connect und die Google Play Console. Keine Kreditkarte nötig.
Kostenlos loslegen →Checkliste: App-Store-Screenshots in Figma
- Frames exakt auf Store-Größen eingetippt (1290 × 2796 oder 1320 × 2868 fürs iPhone, 2064 × 2752 fürs iPad, 1080 × 1920 für Play).
- Eine Hauptkomponente mit Auto Layout für den Text und einem verschachtelten Geräte-Mockup; jeder Screenshot ist eine Instanz.
- Headline und Bildschirmbild als Komponenten-Properties verfügbar.
- Saubere Aufnahmen: Statusleiste mit 9:41, realistische Daten, passendes Seitenverhältnis des Geräts.
- Deckender Hintergrund auf jedem Frame; Export in 1x als PNG oder JPG; Zahlenpräfixe in den Frame-Namen.
- Ein Plan für die Sprachen, bevor du anfängst – ob duplizierte Reihen oder Variablen-Modi.
- Inhalte mit den Grundlagen aus unseren Best Practices für Screenshots abgeglichen, angefangen bei dem, was auf den ersten Screenshot gehört.
Häufige Fragen
04- Welche Frame-Größe sollte ich in Figma für App-Store-Screenshots verwenden?
- Nimm genau die Pixelgröße, die App Store Connect für den jeweiligen Slot akzeptiert. Für den größten iPhone-Slot sind das 1320 × 2868 oder 1290 × 2796 im Hochformat, für den 13-Zoll-iPad-Slot 2064 × 2752. Figma behandelt seine Einheiten bei 1x als Pixel, ein Frame mit diesen Werten wird also ohne Skalierung in genau dieser Größe exportiert.
- Sollte ich App-Store-Screenshots aus Figma in 1x oder 2x exportieren?
- Exportiere in 1x, wenn der Frame schon die Pixelgröße des Stores hat. Ein 2x-Export eines Frames mit 1290 × 2796 ergibt 2580 × 5592 – und das akzeptiert App Store Connect nicht. Nimm 2x nur, wenn du die Frames bewusst in halber Größe angelegt hast, und prüf vor dem Hochladen die Maße der exportierten Datei, denn der Store akzeptiert nur bestimmte Größen.
- Gibt es eine kostenlose Figma-Vorlage für App-Store-Screenshots?
- Ja. In der Figma Community gibt es viele kostenlose Vorlagen für App-Store-Screenshots und Dateien mit Geräte-Mockups, und Apple veröffentlicht ein offizielles UI-Kit für iOS und iPadOS in Figma. Gleich die Frame-Größen jeder Datei vor der Nutzung mit Apples aktuellen Screenshot-Spezifikationen ab, denn ältere Community-Vorlagen sind oft für Größen gebaut, die Apple nicht mehr als Haupt-Slot fürs iPhone führt.
- Wie lokalisiere ich App-Store-Screenshots in Figma?
- Üblicherweise duplizierst du das komplette Frame-Set für jede Sprache und ersetzt die Texte. Das Layout bleibt in gemeinsamen Komponenten, damit Designänderungen weiterhin überall ankommen. In kostenpflichtigen Figma-Plänen kannst du String-Variablen mit einem Modus pro Sprache anlegen und die Texte eines Frames umschalten, indem du seinen Modus wechselst. So oder so: Prüf jeden Frame auf Text, der in der neuen Sprache länger wird oder umbricht.
