O problema dos screenshots manuais

Se voce ja publicou um aplicativo movel, conhece a dor. A cada ciclo de lancamento, voce abre o Figma ou Sketch, atualiza manualmente os screenshots para cada tamanho de dispositivo, cada idioma, cada tela. Para um unico aplicativo que suporta iPhone, iPad e Android em 10 localizacoes, voce pode estar olhando para centenas de assets individuais para produzir, exportar e fazer upload.

A maioria das equipes gasta de um a tres dias inteiros nesse processo por lancamento. E a pior parte? E quase inteiramente repetitivo.

Existe uma forma melhor.

A alternativa automatizada: Screenshots.live + Fastlane

Neste guia, vamos configurar um pipeline de screenshots totalmente automatizado usando Screenshots.live e Fastlane. No final, seu pipeline de CI/CD vai gerar, localizar e fazer upload de todos os screenshots da App Store sem nenhuma intervencao manual.

Voce projeta seus templates de screenshots uma vez no editor visual do Screenshots.live.
Define variaveis (texto do titulo, imagem do screenshot, cor de fundo) em cada template.
Seu pipeline Fastlane chama a API REST do Screenshots.live, substituindo texto localizado e screenshots atualizados.
Fastlane faz upload das imagens finalizadas diretamente para o App Store Connect ou Google Play.

Pre-requisitos

Uma conta Screenshots.live com pelo menos um template criado.
Uma chave API do seu painel Screenshots.live.
Fastlane instalado e configurado para seu projeto.
Ruby 2.7+ (para Fastlane).
Um ambiente CI/CD como GitHub Actions, GitLab CI ou Bitrise.

Passo 1: Projetar seus templates

O conceito chave sao variaveis dinamicas:

{{headline}} para o texto de marketing
{{screenshot}} para a captura real do dispositivo
{{background_color}} para personalizacao do tema

Passo 2: Obter credenciais da API

export SCREENSHOTS_LIVE_API_KEY="sk_live_sua_chave_api_aqui"

Passo 3: Testar a API diretamente

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": "Acompanhe seus habitos sem esforco",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Passo 4: Configuracao de localizacao

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  pt:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Acompanhe seus habitos sem esforco"
          screenshot: screens/pt/home.png

device_frames:
  ios:
    - iphone_6.7
    - iphone_6.5
    - ipad_pro_12_9

Passo 5: Escrever a integracao Fastlane

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

platform :ios do
  desc "Gerar e fazer upload de screenshots localizados"
  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("Renderizando #{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

Passo 6: Integrar com CI/CD

# .github/workflows/screenshots.yml
name: Gerar screenshots App Store

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

jobs:
  generate:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - name: Configurar Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true
      - name: Gerar e fazer upload
        env:
          SCREENSHOTS_LIVE_API_KEY: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
        run: bundle exec fastlane ios screenshots

Antes e depois: O impacto real

Antes

Designer abre Figma, posiciona manualmente novos screenshots em 6 templates.
Com 10 idiomas: 360 imagens para exportar e organizar.
Tempo: 2-3 dias por ciclo de lancamento.

Depois

Desenvolvedor atualiza screenshots.yml.
Todas as 360+ imagens geradas e enviadas em menos de 15 minutos.
Tempo economizado por lancamento: 2+ dias.

Conclusao

Automatizar seus screenshots da App Store e uma das melhorias de maior impacto que voce pode fazer. Comece com Screenshots.live e recupere seus dias de lancamento.

Como automatizar screenshots da App Store com Fastlane e uma API REST