Skip to content
Todas las publicaciones
Blog25 de marzo de 20264 min read
SL

Screenshots.live

Team

Capturas de pantalla multi-plataforma para App Store: Una plantilla, cada dispositivo

Gestionar capturas de pantalla para iPhone, iPad, telefono Android y tablet Android significa cientos de assets. Descubre como el template porting de Screenshots.live te permite disenar una vez y convertir automaticamente a cada dispositivo.

El problema de las capturas multi-plataforma

Si publicas una app tanto en iOS como en Android, ya conoces la matematica brutal de las capturas de pantalla. Apple requiere capturas para iPhone 6,7 pulgadas, iPhone 6,5 pulgadas, iPad 12,9 pulgadas. Google Play quiere capturas de telefono a 1080x1920 y capturas de tablet a 1600x2560. Cada ficha de tienda necesita entre 4 y 10 capturas por tipo de dispositivo.

Hagamos las cuentas con un escenario realista. Supongamos que soportas 10 idiomas y necesitas 5 capturas por tipo de dispositivo en 4 categorias (iPhone, iPad, telefono Android, tablet Android):

4 tipos de dispositivo x 5 capturas x 10 idiomas = 200 assets individuales.

Son 200 imagenes que necesitas disenar, exportar, revisar y subir. Cada vez que actualizas la UI de tu app, haces un rebranding o lanzas una promocion estacional, repites todo el proceso.

Por que mantener sets de capturas separados no funciona

Diseno manual en Figma o Sketch. Un disenador crea cada captura individualmente. Es el enfoque mas comun y el mas lento. Coordinar cambios entre 200 archivos introduce desfase de versiones.

Herramientas con plantillas por dispositivo. Algunas herramientas permiten plantillas, pero requieren una separada para cada tamano. Sigues gestionando 4 plantillas por captura.

Redimensionado generico. Tomar una captura de iPhone y redimensionarla a dimensiones Android. Esto produce imagenes borrosas y resultados poco profesionales.

Como funciona el Template Porting en Screenshots.live

Screenshots.live resuelve esto con una funcion llamada template porting. El concepto es simple: disena tu captura una vez para un tipo de dispositivo, y el sistema la convierte automaticamente a todos los demas recalculando proporcionalmente coordenadas, tamanos de fuente y posiciones de elementos.

Paso 1: Disena tu plantilla base. Abre el editor visual y crea una plantilla para iPhone 6,7 pulgadas (1290x2796 pixeles). Coloca tu marco de dispositivo, captura de app, titulo, subtitulo y elementos de fondo exactamente donde los quieras.

Paso 2: Porta a otros dispositivos. Haz clic en el boton de portado y selecciona tus dispositivos objetivo: iPad 12,9 pulgadas, telefono Android, tablet Android. Screenshots.live analiza cada elemento y recalcula posicion, tamano y proporciones para las nuevas dimensiones.

Paso 3: Revisa y ajusta. Las plantillas portadas aparecen en tu dashboard. En la mayoria de los casos, se ven perfectas inmediatamente. Para casos especiales, puedes hacer ajustes manuales rapidos.

Paso 4: Renderiza todas las variaciones via API. Con tus plantillas listas, una sola llamada API con tus datos de localizacion genera cada variacion. Un set de plantillas, una llamada API, los 200 assets entregados como archivo ZIP.

Detalles tecnicos de la conversion proporcional

El template porting no es un simple redimensionado. El sistema realiza varios calculos:

Mapeo de posicion. Las coordenadas X e Y se recalculan como posiciones proporcionales en el nuevo canvas.

Escalado de tamano. Las dimensiones se escalan proporcionalmente para mantener el peso visual.

Ajuste de tamano de fuente. Los tamanos de fuente se recalculan para mantener el mismo tamano relativo.

Manejo de relacion de aspecto. Cuando origen y destino tienen diferentes relaciones de aspecto, el sistema ajusta el espaciado vertical inteligentemente.

Antes y despues: El impacto real

Antes de Screenshots.live:

  • 200 frames individuales en Figma
  • 40 horas de trabajo de diseno inicial
  • 200 exportaciones manuales
  • 8-12 horas por cada ciclo de actualizacion
  • Alto riesgo de inconsistencias entre plataformas

Despues de Screenshots.live:

  • 5 plantillas base disenadas en el editor visual
  • 4 horas de trabajo de diseno inicial
  • Portado a todos los dispositivos con un clic
  • Una llamada API para renderizar los 200 assets
  • 30 minutos por cada ciclo de actualizacion
  • Consistencia perfecta garantizada

Es una reduccion de 40 horas a 4 horas para la configuracion inicial, y de 12 horas a 30 minutos para cada actualizacion posterior. En un ano con actualizaciones mensuales, ahorras aproximadamente 130 horas.

Usando la API para renderizado multi-plataforma

POST https://api.screenshots.live/v1/render
{
  "templateId": "tpl_abc123",
  "locales": ["en", "de", "es", "fr", "ja", "ko", "zh", "pt", "it", "nl"],
  "devices": ["iphone67", "ipad129", "android_phone", "android_tablet"],
  "variables": {
    "en": { "headline": "Track Your Fitness" },
    "es": { "headline": "Registra tu actividad fisica" }
  }
}

La API devuelve un archivo ZIP con las 200 capturas, organizadas por idioma y tipo de dispositivo.

Primeros pasos con capturas multi-plataforma

  1. Registrate en Screenshots.live y crea tu primera plantilla para tu tipo de dispositivo principal.
  2. Perfecciona tu diseno en el editor visual con capturas reales y texto localizado.
  3. Porta la plantilla a tus otros tipos de dispositivo con un clic.
  4. Conecta la API a tu pipeline de compilacion y renderiza todas las variaciones automaticamente.
  5. Sube a ambas tiendas usando Fastlane o subida manual con archivos correctamente nombrados.

Pasas de gestionar 200 archivos individuales a gestionar 5 plantillas. Cada actualizacion es una edicion de plantilla seguida de una llamada API.

Publicaciones relacionadas