17 de mayo de 2026 · Lectura de 11 min

How to Design App Store Screenshots in Figma

Figma es una excelente opción para diseñar capturas de pantalla de la App Store si deseas un control total del diseño. Puedes crear tus propios marcos de dispositivos, tipografía, degradados, componentes, ajustes preestablecidos de exportación y variantes localizadas. La desventaja es que Figma no tiene conocimientos sobre App Store Connect o Google Play. Debes crear el sistema de producción tú mismo.

Este tutorial explica cómo diseñar capturas de pantalla de la tienda de aplicaciones en Figma sin que el archivo se convierta en una pila de marcos duplicados. Funciona para capturas de pantalla de iOS, iPadOS, macOS y Android, y es especialmente útil si aún estás decidiendo si Figma es suficiente o si necesitas una herramienta dedicada de capturas de pantalla de la App Store.

1. Empieza con los tamaños de las tiendas

No comiences con un marco de presentación aleatorio. Empieza con los tamaños de píxeles que las tiendas realmente aceptan. Apple y Google pueden rechazar capturas de pantalla que no coincidan con sus reglas de dimensión, formato o relación de aspecto.

Para las capturas de pantalla de iPhone actuales, un tamaño primario seguro de la App Store es 1320 x 2868 para dispositivos de 6.9". Para iPad, los tamaños comunes incluyen 2064 x 2752 para iPad de 13" y 1668 x 2388 para iPad de 11". Google Play es más flexible, pero las capturas aún deben cumplir con las reglas de longitud lateral y relación de aspecto de Google.

Referencias útiles:

2. Crea una página de Figma por superficie de tienda

Mantén el archivo simple y predecible. Una estructura limpia es más valiosa que una ingeniosa:

01 - iPhone 6.9 para capturas de pantalla principales de teléfonos en la App Store.
02 - iPad 13 para capturas de pantalla de iPad.
03 - Google Play Phone para capturas de pantalla de teléfonos Android.
04 - Components para estilos compartidos, marcos de dispositivos, insignias y bloques de texto.
05 - Archive para capturas de pantalla antiguas que puedas necesitar más adelante.

Dentro de cada página, crea un marco para cada ranura de captura de pantalla:01 - Main Benefit, 02 - Feature Detail,03 - Social Proof, etcétera. Mantén el prefijo numérico en el nombre del marco porque será más fácil ordenar las exportaciones de Figma.

3. Crea un componente de captura de pantalla reutilizable

El mayor error es diseñar cada captura de pantalla como una mesa de trabajo única. Eso funciona para una versión, pero se rompe tan pronto como actualizas la aplicación, agregas un idioma o cambias el estilo de fondo.

En su lugar, crea una estructura de captura de pantalla reutilizable:

Una capa de fondo con tu tratamiento de color, degradado o imagen.
Un bloque de texto de título con estilos tipográficos compartidos.
Un bloque de subtítulo opcional.
Un componente de marco de dispositivo.
Una capa de captura de pantalla enmascarada dentro del marco del dispositivo.
Insignias, flechas, llamadas o etiquetas de características opcionales.

Usa componentes de Figma para las partes repetidas, como los marcos de los dispositivos, las insignias y las etiquetas de llamada. Usa Auto Layout donde el contenido deba refluir, especialmente para grupos de texto que puedan cambiar de longitud durante la localización.

Referencias de Figma: propiedades de componentes, variantes y Auto Layout.

4. Diseña la primera captura pensando en el visitante de la tienda

Tu primera captura de pantalla debe responder a una pregunta: ¿por qué debería importarle esta aplicación a alguien? Evita usar el primer espacio para una pantalla de configuración, una pantalla de bienvenida o una lista vaga de características.

Una fórmula práctica:

Título: de 4 a 8 palabras que expresen el resultado.
Captura del dispositivo: muestra la aplicación realizando la acción, no un estado vacío.
Apoyo visual: una insignia, gráfico o llamada si aclara el valor.
Fondo: coherente con la marca, simple y consistente en todo el conjunto.

Mantén el texto lo suficientemente grande como para que sea legible en los resultados de búsqueda de la App Store y en las vistas previas de la página del producto. Si el texto solo es legible al hacer zoom en el lienzo de Figma, probablemente sea demasiado pequeño.

5. Convierte un diseño en un conjunto completo

Una vez que la primera captura funcione, duplica el marco para cada ranura de la tienda y cambia un mensaje a la vez. Una secuencia común de siete capturas de pantalla:

Resultado principal.
Flujo de trabajo principal.
Característica que diferencia a la aplicación.
Personalización o ajustes.
Confianza, privacidad, sincronización o integraciones.
Caso de uso secundario.
Razón final para descargar.

Mantén la posición del dispositivo, la posición del título y el tratamiento del fondo de manera consistente a menos que tengas un motivo deliberado para cambiarlos. El conjunto debe sentirse como una sola historia del producto, no como siete anuncios separados.

6. Prepárate para la localización antes de traducir

La localización es el punto en el que muchos archivos de capturas en Figma se vuelven difíciles de manejar. Si duplicas cada mesa de trabajo para cada idioma, un pequeño cambio de diseño se convierte en docenas de ediciones manuales.

Para que la localización sea menos frágil:

Mantén el texto en capas predecibles: Headline, Subheadline, Badge.
Usa Auto Layout para los contenedores de texto que necesiten crecer.
Evita los saltos de línea forzados a menos que la frase sea definitiva.
Deja un ancho adicional para alemán, francés, español y otras traducciones más largas.
Crea una página o sección separada por idioma únicamente después de que el diseño base en inglés sea estable.

Si ofreces soporte para muchos idiomas, este suele ser el momento en que Figma se convierte en un cuello de botella de producción. Aún puedes hacerlo, pero requieres disciplina: nombres claros, componentes, ajustes de exportación y una lista de verificación para cada lanzamiento. Si la localización es una tarea recurrente, compara esa configuración manual con un flujo de trabajo de localización de capturas de pantalla dedicado.

7. Configura los ajustes preestablecidos de exportación

Figma te permite exportar capas y marcos seleccionados en formatos de imagen comunes. Para las capturas de pantalla de la tienda, exporta los marcos finales de nivel superior, no los grupos anidados.

Configuración de exportación recomendada:

Configura cada marco de captura de pantalla con las dimensiones de píxeles exactas de la tienda.
Agrega una configuración de exportación PNG para cada marco final.
Nombra los marcos con un prefijo relleno con ceros: 01, 02, 03.
Exporta una familia de dispositivos a la vez para que los archivos no se mezclen.
Revisa los archivos PNG exportados en el Finder antes de subirlos.

El comportamiento de exportación de Figma está documentado en su guía de exportación. La regla de producción importante es simple: a App Store Connect y Google Play les importa el archivo final, no lo limpio que se vea tu archivo de Figma.

8. Sube los archivos con cuidado

Antes de subirlos, verifica cuatro cosas:

Las dimensiones del archivo coinciden con la ranura del store de destino.
Los archivos están ordenados correctamente.
Las capturas de pantalla están en el idioma correcto.
No se han filtrado fondos transparentes ni problemas de recorte accidentales.

Específicamente para App Store Connect, cada idioma tiene su propio conjunto de capturas de pantalla. Si exportas inglés, alemán, español y francés desde Figma, mantén esas carpetas separadas y súbelas un idioma a la vez. Para obtener una guía detallada, lee Cómo subir capturas de pantalla a App Store Connect.

Dónde funciona bien Figma

Figma es una buena opción cuando necesitas diseños personalizados, hay un diseñador involucrado y tu conjunto de capturas de pantalla no cambia todas las semanas. Te brinda control total sobre la composición, la tipografía, los sistemas de marca y el acabado visual.

Dónde se vuelve problemático Figma

Figma se vuelve más difícil cuando las capturas de pantalla son parte de tu proceso de lanzamiento regular. Puntos débiles comunes:

Marcos duplicados para cada tamaño de dispositivo.
Marcos duplicados para cada idioma.
Reemplazo manual de capturas de pantalla del simulador.
Exportación manual y organización de carpetas.
Diseños fáciles de romper cuando los textos traducidos son más largos.
Sin flujo de trabajo nativo para subir a App Store Connect.

Nada de esto convierte a Figma en una mala herramienta. Simplemente significa que Figma es una herramienta de diseño general, no un flujo de trabajo diseñado específicamente para capturas de pantalla de la App Store.

Una alternativa más rápida para desarrolladores independientes

Si solo creas capturas de pantalla una o dos veces al año, Figma puede ser suficiente. Si realizas lanzamientos a menudo, ofreces soporte para múltiples idiomas o mantienes capturas de pantalla de la App Store y Google Play juntas, prueba Screenshot Bro.

Screenshot Bro es una aplicación nativa de Mac e iPad para diseñar, localizar, exportar y subir capturas de pantalla de tiendas. Te proporciona filas de dispositivos, plantillas reutilizables, localización integrada, exportación por lotes y subida a App Store Connect sin necesidad de reconstruir un sistema de producción en Figma. También puedes echar un vistazo a la descripción general de características para ver en qué se diferencia este flujo de trabajo de un archivo de diseño general.