El problema de las capturas manuales

Si alguna vez has publicado una aplicacion movil, conoces el dolor. En cada ciclo de lanzamiento, abres Figma o Sketch, actualizas manualmente las capturas de pantalla para cada tamano de dispositivo, cada idioma, cada pantalla. Para una sola aplicacion que soporta iPhone, iPad y Android en 10 localizaciones, puedes estar viendo cientos de assets individuales que producir, exportar y subir.

La mayoria de los equipos pasan de uno a tres dias completos en este proceso por lanzamiento. Y lo peor es que es casi totalmente repetitivo. La plantilla de diseno no cambia. Los marcos de dispositivo no cambian. Solo cambian el contenido de la captura y el texto.

Hay una forma mejor.

La alternativa automatizada: Screenshots.live + Fastlane

En esta guia, veremos como configurar un pipeline de capturas de pantalla completamente automatizado usando Screenshots.live y Fastlane. Al final, tu pipeline de CI/CD generara, localizara y subira todas tus capturas del App Store sin intervencion manual.

Asi funciona el flujo de trabajo:

Disenas tus plantillas de capturas una vez en el editor visual de Screenshots.live.
Defines variables (texto de encabezado, imagen de captura, color de fondo) en cada plantilla.
Tu pipeline de Fastlane llama a la API REST de Screenshots.live, sustituyendo texto localizado y capturas actualizadas.
Fastlane sube las imagenes terminadas directamente a App Store Connect o Google Play.

Requisitos previos

Una cuenta de Screenshots.live con al menos una plantilla creada.
Una clave API de tu panel de Screenshots.live (Configuracion > Claves API).
Fastlane instalado y configurado para tu proyecto.
Ruby 2.7+ (para Fastlane).
Un entorno de CI/CD como GitHub Actions, GitLab CI o Bitrise.

Paso 1: Disenar tus plantillas

Inicia sesion en Screenshots.live y abre el editor visual. Crea una plantilla para cada espacio de captura que necesites. Para la mayoria de las apps, son de 4 a 8 plantillas que cubren tus funcionalidades clave.

El concepto clave son las variables dinamicas. Al disenar tu plantilla, insertas marcadores de posicion en lugar de codificar texto o imagenes fijos:

{{headline}} para el texto de marketing
{{screenshot}} para la captura de pantalla del dispositivo
{{background_color}} para la personalizacion del tema

Cada plantilla soporta automaticamente todos los tamanos de dispositivo: iPhone 6.7", iPhone 6.5", iPad Pro y todas las resoluciones estandar de Android.

Paso 2: Obtener tus credenciales API

Navega a tu panel y genera una clave API. Necesitaras dos valores:

Tu clave API (un token Bearer para autenticacion)
Tus IDs de plantilla (visibles en la URL del editor de plantillas o via la API)

export SCREENSHOTS_LIVE_API_KEY="sk_live_tu_clave_api_aqui"

Paso 3: Probar la API directamente

Antes de integrar con Fastlane, verifica que la API funciona con una peticion cURL simple:

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": "Rastrea tus habitos sin esfuerzo",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Paso 4: Crear tu configuracion de localizacion

Crea un archivo YAML que mapee cada idioma con sus textos traducidos:

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  es:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Rastrea tus habitos sin esfuerzo"
          screenshot: screens/es/home.png

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

Paso 5: Escribir la integracion con Fastlane

Anade esto a tu Fastfile:

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

platform :ios do
  desc "Generar y subir capturas localizadas"
  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} captura #{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

Paso 6: Integrar con CI/CD

# .github/workflows/screenshots.yml
name: Generar capturas del 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: Generar y subir capturas
        env:
          SCREENSHOTS_LIVE_API_KEY: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
        run: bundle exec fastlane ios screenshots

Antes y despues: El impacto real

Antes: El flujo manual

El disenador abre Figma, coloca manualmente nuevas capturas en 6 plantillas.
Exporta para 3 tamanos de dispositivo por plataforma = 36 imagenes por idioma.
Con 10 idiomas: 360 imagenes para exportar y organizar.
Subida manual a traves de App Store Connect y Google Play Console.
Tiempo: 2 a 3 dias por ciclo de lanzamiento.

Despues: El pipeline automatizado

El desarrollador actualiza screenshots.yml con nuevos textos o capturas.
Push a main. CI/CD se ejecuta automaticamente.
Todas las 360+ imagenes generadas y subidas en menos de 15 minutos.
Cero intervencion manual. Cero assets mal ubicados.
Tiempo ahorrado por lanzamiento: 2+ dias.

Conclusion

Automatizar tus capturas del App Store es una de las mejoras de mayor impacto que puedes hacer a tu proceso de lanzamiento. Con Screenshots.live para el renderizado y Fastlane para la subida, eliminas dias de trabajo manual y reduces los errores a cero.

La configuracion inicial lleva aproximadamente una hora. Despues, cada lanzamiento se entrega automaticamente con capturas perfectas y localizadas. Comienza con Screenshots.live y recupera tus dias de lanzamiento.

Como automatizar capturas de pantalla del App Store con Fastlane y una API REST