Das Problem mit manuellen Screenshots

Wer schon einmal eine mobile App veroffentlicht hat, kennt den Schmerz. Bei jedem Release-Zyklus offnet man Figma oder Sketch, aktualisiert manuell Screenshots fur jede Gerate-Grosse, jede Sprache, jeden Screen. Fur eine einzelne App, die iPhone, iPad und Android in 10 Lokalisierungen unterstutzt, konnen das Hunderte einzelner Assets sein, die erstellt, exportiert und hochgeladen werden mussen.

Die meisten Teams verbringen ein bis drei volle Tage mit diesem Prozess pro Release. Und das Schlimmste? Es ist fast vollstandig repetitiv. Das Design-Template bleibt gleich. Die Device-Frames bleiben gleich. Nur der Screenshot-Inhalt und der Text andern sich.

Es gibt einen besseren Weg.

Die automatisierte Alternative: Screenshots.live + Fastlane

In diesem Guide zeigen wir, wie du eine vollautomatisierte Screenshot-Pipeline mit Screenshots.live und Fastlane einrichtest. Am Ende wird deine CI/CD-Pipeline alle App Store Screenshots generieren, lokalisieren und hochladen, ohne manuellen Eingriff.

So sieht der Workflow aus:

Du designst deine Screenshot-Templates einmalig im visuellen Editor von Screenshots.live.
Du definierst Variablen (Uberschrift, Screenshot-Bild, Hintergrundfarbe) in jedem Template.
Deine Fastlane-Pipeline ruft die Screenshots.live REST API auf und tauscht lokalisierte Texte und aktuelle Screenshots ein.
Fastlane ladt die fertigen Bilder direkt in App Store Connect oder Google Play hoch.

Voraussetzungen

Bevor wir starten, stelle sicher, dass du Folgendes hast:

Ein Screenshots.live Konto mit mindestens einem erstellten Template.
Einen API-Schlussel aus deinem Screenshots.live Dashboard (Einstellungen > API-Schlussel).
Fastlane installiert und fur dein Projekt konfiguriert.
Ruby 2.7+ (fur Fastlane).
Eine CI/CD-Umgebung wie GitHub Actions, GitLab CI oder Bitrise.

Schritt 1: Deine Templates designen

Melde dich bei Screenshots.live an und offne den visuellen Editor. Erstelle ein Template fur jeden Screenshot-Slot, den du brauchst. Fur die meisten Apps sind das 4 bis 8 Templates, die deine wichtigsten Features abdecken.

Das Schluesselkonzept sind dynamische Variablen. Beim Design deines Templates fugst du Variable-Platzhalter ein, statt Text oder Bilder fest einzubauen:

{{headline}} fur den Marketing-Text
{{screenshot}} fur den eigentlichen Device-Screenshot
{{background_color}} fur die Theme-Anpassung

Jedes Template unterstutzt automatisch alle Gerate-Grossen: iPhone 6.7", iPhone 6.5", iPad Pro und alle Standard-Android-Auflosungen. Du designst einmal, und Screenshots.live rendert fur jede erforderliche Dimension.

Schritt 2: API-Zugangsdaten holen

Navigiere zu deinem Dashboard und generiere einen API-Schlussel. Du brauchst zwei Werte:

Deinen API-Schlussel (ein Bearer Token zur Authentifizierung)
Deine Template-IDs (sichtbar in der Template-Editor-URL oder uber die API)

Speichere deinen API-Schlussel als Umgebungsvariable. Committe ihn niemals in dein Repository:

export SCREENSHOTS_LIVE_API_KEY="sk_live_dein_api_key_hier"

Schritt 3: Die API direkt testen

Bevor du Fastlane integrierst, uberprufe die API mit einem einfachen cURL-Request:

curl -X POST https://api.screenshots.live/v1/render \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "tpl_abc123",
    "variables": {
      "headline": "Verfolge deine Gewohnheiten muhelos",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Die API gibt eine JSON-Antwort mit Download-URLs fur jedes gerenderte Bild zuruck.

Schritt 4: Lokalisierungs-Konfiguration erstellen

Erstelle eine YAML-Datei, die jede Sprache auf ihre ubersetzten Texte abbildet. Dies ist die einzige Wahrheitsquelle fur alle deine Screenshot-Texte:

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
      - template: tpl_def456
        variables:
          headline: "Beautiful charts and insights"
          screenshot: screens/en/stats.png
  de:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Verfolge deine Gewohnheiten muhelos"
          screenshot: screens/de/home.png
      - template: tpl_def456
        variables:
          headline: "Anschauliche Diagramme und Einblicke"
          screenshot: screens/de/stats.png

device_frames:
  ios:
    - iphone_6.7
    - iphone_6.5
    - ipad_pro_12_9
  android:
    - phone
    - tablet_7
    - tablet_10

Schritt 5: Die Fastlane-Integration schreiben

Erstelle eine benutzerdefinierte Fastlane-Lane, die deine YAML-Konfiguration liest, die Screenshots.live API fur jede Sprache und jedes Template aufruft und die Ergebnisse in der richtigen Verzeichnisstruktur speichert.

Fuge dies deiner Fastfile hinzu:

require 'yaml'
require 'net/http'
require 'json'
require 'fileutils'

platform :ios do
  desc "Lokalisierte Screenshots generieren und hochladen"
  lane :screenshots do
    generate_screenshots
    upload_to_app_store(
      skip_binary_upload: true,
      skip_metadata: true,
      screenshots_path: "./fastlane/screenshots"
    )
  end
end

private_lane :generate_screenshots do |options|
  config = YAML.load_file("screenshots.yml")
  api_key = ENV["SCREENSHOTS_LIVE_API_KEY"]
  device_frames = config["device_frames"]["ios"]

  config["locales"].each do |locale, data|
    data["screenshots"].each_with_index do |entry, index|
      UI.message("Rendere #{locale} Screenshot #{index + 1}...")

      uri = URI("https://api.screenshots.live/v1/render")
      http = Net::HTTP.new(uri.host, uri.port)
      http.use_ssl = true

      request = Net::HTTP::Post.new(uri)
      request["Authorization"] = "Bearer #{api_key}"
      request["Content-Type"] = "application/json"
      request.body = {
        templateId: entry["template"],
        variables: entry["variables"],
        deviceFrames: device_frames
      }.to_json

      response = http.request(request)
      result = JSON.parse(response.body)

      result["images"].each do |image|
        output_dir = "./fastlane/screenshots/#{locale}"
        FileUtils.mkdir_p(output_dir)
        File.write(
          "#{output_dir}/#{image['device']}_#{index}.png",
          Net::HTTP.get(URI(image["url"]))
        )
      end
    end
  end
end

Schritt 6: In CI/CD integrieren

Der letzte Schritt ist die Einbindung in deine CI/CD-Pipeline. Hier ein GitHub Actions Beispiel:

# .github/workflows/screenshots.yml
name: App Store Screenshots generieren

on:
  push:
    branches: [main]
    paths:
      - 'screenshots.yml'
      - 'screens/**'
  workflow_dispatch:

jobs:
  generate:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4

      - name: Ruby einrichten
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true

      - name: Fastlane installieren
        run: bundle install

      - name: Screenshots generieren und hochladen
        env:
          SCREENSHOTS_LIVE_API_KEY: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
          APP_STORE_CONNECT_API_KEY: ${{ secrets.ASC_API_KEY }}
        run: bundle exec fastlane ios screenshots

Jetzt werden bei jeder Anderung an deiner Screenshot-Konfiguration automatisch alle Assets neu generiert und hochgeladen.

Vorher und Nachher: Der echte Unterschied

Vorher: Der manuelle Workflow

Designer offnet Figma, platziert manuell neue Screenshots in 6 Templates.
Export fur 3 Gerate-Grossen pro Plattform = 36 Bilder pro Sprache.
Bei 10 Sprachen: 360 Bilder zum Exportieren und Organisieren.
Manueller Upload uber App Store Connect und Google Play Console.
Zeitaufwand: 2 bis 3 Tage pro Release-Zyklus.
Fehlerquote: hoch. Falscher Screenshot in falscher Sprache passiert standig.

Nachher: Die automatisierte Pipeline

Entwickler aktualisiert screenshots.yml mit neuen Texten oder Screenshots.
Push auf main. CI/CD lauft automatisch.
Alle 360+ Bilder generiert und hochgeladen in unter 15 Minuten.
Null manueller Eingriff. Null falsch platzierte Assets.
Eingesparte Zeit pro Release: 2+ Tage.

Fazit

Die Automatisierung deiner App Store Screenshots ist eine der wirkungsvollsten Verbesserungen, die du an deinem Release-Prozess vornehmen kannst. Mit Screenshots.live fur das Rendering und Fastlane fur den Upload eliminierst du Tage manueller Arbeit und reduzierst Fehler auf null.

Die initiale Einrichtung dauert etwa eine Stunde. Danach wird jedes Release automatisch mit perfekten, lokalisierten Screenshots ausgeliefert. Starte jetzt mit Screenshots.live und gewinne deine Release-Tage zuruck.

So automatisierst du App Store Screenshots mit Fastlane und einer REST API