Cómo hacer capturas de pantalla para el App Store en Figma (y cuándo un generador es más rápido)

Para hacer capturas de pantalla para el App Store en Figma, crea un frame por captura con el tamaño exacto en píxeles que acepta Apple (por ejemplo, 1290 × 2796 para el espacio de iPhone más grande), construye un componente reutilizable con el titular y un mockup de dispositivo, coloca las capturas de tu app dentro del mockup y exporta cada frame a 1x en PNG o JPG. Como las unidades de Figma son píxeles a 1x, un frame con el tamaño correcto se exporta justo al tamaño que pide App Store Connect.

Figma es una herramienta estupenda para esto, y también supone mucho trabajo manual en cuanto sumas más dispositivos, más idiomas y Google Play. Esta guía explica la configuración que hace ese trabajo llevadero, y es sincera sobre dónde un generador dedicado te ahorra tiempo.

Qué tamaños de frame usar para las capturas del App Store en Figma

Empieza por las especificaciones de capturas de pantalla de Apple, que indican el tamaño exacto en píxeles que admite cada espacio de pantalla. App Store Connect reduce tus capturas más grandes para los dispositivos más pequeños si tu interfaz es igual en todos los tamaños, así que la mayoría de las apps diseñan un set para iPhone y, si son compatibles con iPad, otro para iPad. Añade Google Play si publicas allí.

Apple permite de 1 a 10 capturas por espacio; Google Play permite hasta 8 por tipo de dispositivo. Nuestra referencia de tamaños de capturas de pantalla tiene la tabla completa, y el artículo sobre los requisitos de capturas de pantalla de Google Play explica en detalle las reglas de Play. Si también necesitas el gráfico de funciones, consulta nuestra guía del gráfico de funciones de Google Play.

Un consejo práctico: coloca los frames de un set uno al lado del otro en una sola fila con un espacio fijo entre ellos. Así ves el set completo como lo recorre alguien en la tienda, y detectas de un vistazo un titular más largo de la cuenta o un color que desentona.

Cómo construir un componente reutilizable para las capturas

La diferencia entre un archivo de Figma que puedes mantener y uno que te da pereza abrir son los componentes. Construye el diseño una vez y haz que cada captura sea una instancia.

1. El bloque de texto

Crea un frame con auto layout vertical que contenga el titular y, si quieres, un subtítulo. Ajusta el ancho para que llene el contenedor y el alto para que se adapte al contenido, de modo que un titular de dos líneas empuje el dispositivo hacia abajo en vez de superponerse. Usa estilos de texto para ambos, así cambiar la fuente o el tamaño más adelante es una sola edición. Aquí funciona mejor la tipografía grande: el titular se lee en miniatura en los resultados de búsqueda.

2. El mockup de dispositivo

Dentro del marco del dispositivo, pon un rectángulo del tamaño del área de pantalla con la captura de tu app como relleno de imagen en modo Fill. Si enmascaras el rectángulo con la forma de la pantalla, resuelves las esquinas redondeadas. Convierte el mockup en un componente propio, con la imagen de pantalla expuesta como propiedad de intercambio de instancia o de imagen, para que cambiar la captura no signifique rebuscar entre capas.

3. El componente de la captura

Envuelve el bloque de texto y el mockup en un frame padre con el tamaño de la tienda, con auto layout vertical, padding y un relleno de fondo. Añade propiedades de componente para el texto del titular y la imagen de pantalla. Las variantes ayudan si usas varios diseños, por ejemplo, el dispositivo centrado, el dispositivo recortado por abajo o sin dispositivo para una captura de cierre.

Ahora cada captura del set es una instancia en la que editas dos propiedades: el titular y la imagen. Un cambio de padding, tipografía o fondo en el componente principal las actualiza todas.

Dónde conseguir mockups de dispositivos para Figma

• Figma Community. Busca el nombre del dispositivo más «mockup». Hay muchos archivos gratuitos con marcos actuales de iPhone, iPad y Pixel. Revisa la licencia de cada uno y comprueba que el área de pantalla coincide con el dispositivo en el que hiciste la captura, o tu captura quedará estirada.
• Apple Design Resources. La página de recursos de diseño de Apple ofrece marcos oficiales de producto, pero en archivos de Photoshop y PNG, no de Figma. Puedes colocar el PNG sobre el rectángulo de pantalla en Figma. Apple te pide revisar sus directrices de marketing si usas los marcos en materiales de marketing. En la misma página hay un kit de UI oficial de iOS y iPadOS en Figma, útil si estás maquetando una pantalla que todavía no está construida.
• Sin dispositivo. Muchos sets buenos se saltan el marco y muestran la captura de borde a borde, o recortan una sola parte de la interfaz. Es una decisión de estilo, no un requisito.

Pongas lo que pongas en el marco, empieza con una captura limpia: barra de estado fija a las 9:41, datos realistas y nada de superposiciones de depuración. Nuestra guía de capturas limpias del simulador y el emulador tiene los comandos.

Cómo exportar desde Figma capturas del App Store con los píxeles exactos

1. Selecciona todos los frames de captura del set (no las instancias que hay dentro).
2. En la sección Export del panel derecho, añade un ajuste de exportación: 1x, formato PNG o JPG.
3. Exporta. Cada frame se convierte en un archivo con el nombre del frame.

Algunas cosas que suelen salir mal:

• Multiplicador equivocado. Exportar a 2x un frame a tamaño completo lo duplica, y la tienda rechazará el archivo. Si ves 2580 × 5592, es lo que pasó.
• Tamaños de frame con decimales. Un frame de 1290,5 px de ancho se exporta a un tamaño que la tienda no acepta. Escribe las dimensiones en lugar de arrastrar.
• Transparencia. App Store Connect no acepta imágenes con canal alfa, y Google Play pide JPEG o PNG de 24 bits sin alfa. Dale a cada frame un fondo sólido; si un PNG sigue rechazándose por transparencia, exporta en JPG.
• Orden de los archivos. Pon un prefijo numérico en el nombre de los frames (01-hook, 02-proof) para que los archivos se ordenen según el orden de subida.

El problema de la localización

Aquí es donde Figma sale caro. Si publicas tu ficha en cinco idiomas, tienes cinco sets de frames por dispositivo, cada uno con sus propios titulares que editar, revisar y exportar. Suma iPad y Google Play y estarás manteniendo quince sets.

Hay dos enfoques que lo hacen manejable:

• Duplicar por idioma y mantener los componentes compartidos. Copia la fila de instancias para cada idioma y sobrescribe solo el texto. Los cambios de diseño siguen llegando desde el componente principal. Funciona en cualquier plan, pero cada cambio de texto es una edición manual en cada idioma.
• Variables de tipo cadena con modos. Guarda cada titular como una variable de tipo cadena y añade un modo por idioma. Al cambiar el modo de un frame, cambia su texto. Según el centro de ayuda de Figma, los modos están disponibles en los planes Education, Professional, Organization y Enterprise, y el número de modos por colección depende del plan.

Ninguno resuelve la expansión del texto. Los titulares en alemán y finés suelen ser más largos que en inglés, y uno que cabe en dos líneas en inglés puede necesitar tres. Revisa cada frame y, en los idiomas de derecha a izquierda, refleja el diseño completo, no solo el texto. La traducción en sí también merece cuidado; nuestras guías sobre cómo localizar capturas de pantalla para el App Store y por qué traducir no es localizar tratan ambos temas.

Las páginas de producto personalizadas multiplican otra vez el trabajo, porque cada una suele llevar sus propias capturas. Si las tienes en mente, vale la pena leer nuestra guía de páginas de producto personalizadas antes de montar el archivo.

Cuándo Figma es la herramienta adecuada y cuándo un generador es más rápido

Nosotros hacemos un generador de capturas, así que tómalo con eso en cuenta. Pero, sinceramente, a algunos equipos les diríamos que se queden en Figma.

Un término medio habitual: diseñar la pieza visual clave y la primera captura en Figma, donde tienes control total, y luego usar un generador para la parte repetitiva de producir todos los tamaños e idiomas. Nuestra comparación entre Launch Shots y Figma pone las ventajas y desventajas lado a lado, y nuestro resumen de generadores de capturas repasa las otras opciones.

Si te decides por un generador, Launch Shots mantiene al día los tamaños de las tiendas para todos los dispositivos, traduce los titulares a los idiomas de las tiendas y publica en App Store Connect y Google Play Console. También tiene un servidor MCP si prefieres generar el set desde Claude Code o Cursor.

Checklist: capturas de pantalla para el App Store en Figma

• Frames con los tamaños exactos de la tienda escritos a mano (1290 × 2796 o 1320 × 2868 para iPhone, 2064 × 2752 para iPad, 1080 × 1920 para Play).
• Un componente principal con auto layout para el texto y un mockup de dispositivo anidado; cada captura es una instancia.
• Titular e imagen de pantalla expuestos como propiedades del componente.
• Capturas limpias: barra de estado a las 9:41, datos realistas y la misma relación de aspecto que el dispositivo.
• Fondo sólido en cada frame; exportación a 1x en PNG o JPG; prefijos numéricos en los nombres de los frames.
• Un plan para los idiomas antes de empezar, ya sean filas duplicadas o modos de variables.
• Contenido revisado con lo básico de nuestras buenas prácticas para capturas de pantalla, empezando por lo que va en la primera captura.