Marketing assets · v1.0 · 2026-04-19
App Store + Play Store screenshots
Seven marketing slides composed from seven native-3× Mobile-app screens
(1179×2556) — exported at every store-required size via a Next.js generator.
Source PNGs are rendered natively from Figma, not software-upscaled, so the in-frame
detail is crisp all the way down to the thumbnails inside each screen.
Overview
What’s in this set
The seven phone screens below are the raw input to the App Store slide generator. Each slide wraps one screen in a branded canvas (headline, eyebrow, decorative pins / polaroids, background gradient), then exports at every pixel size Apple and Google require.
Source screens
7 × 1179 × 2556 PNG
screenshots/en/
iPhone slide sizes
6.9″ · 6.5″ · 6.3″ · 6.1″
exports/iphone-6.9/ …
Android slide
1080 × 1920 PNG
exports/android/
Play feature graphic
1024 × 500 PNG
exports/feature-graphic/
Final output
What lands on App Store Connect
These are the seven App Store + Play Store marketing slides, rendered by the Next.js generator at iPhone 6.9″ master size (1320 × 2868). The generator takes each source screen (below), wraps it in a device frame, branded background, headline, eyebrow, and decorative pins / polaroids, and exports PNGs at every size Apple and Google require.
7 phone screens
Native-3× Mobile-app captures (1179 × 2556).
Next.js + html-to-image
One React component per slide composes frame + background + text + accents.
36 final PNGs
7 slides × 4 iPhone sizes + Android + feature graphic.
Canvas sizes
Every size the stores ask for
Apple requires one screenshot per display-size tier; it auto-scales within a tier but not across them. Google Play takes one master plus a feature graphic.
| Platform | Device tier | Pixels | Slides | Notes |
|---|---|---|---|---|
| iOS | iPhone 6.9″ | 1320 × 2868 | 7 | Master canvas — all other iPhone sizes re-export from the same composition |
| iOS | iPhone 6.5″ & 6.7″ | 1284 × 2778 | 7 | Covers iPhone 11/12/13/14 Plus & Pro Max family |
| iOS | iPhone 6.3″ | 1206 × 2622 | 7 | iPhone 15/16 Pro |
| iOS | iPhone 6.1″ | 1125 × 2436 | 7 | iPhone 11/12/13 Pro |
| Android | Phone | 1080 × 1920 | 7 | Google Play marketing screenshots |
| Android | Feature graphic | 1024 × 500 | 1 | Play Store listing banner — no device frame |
Inputs · source screens
The seven app screens behind the slides
These are the raw Mobile-app screens that feed the generator above — no frame, no background, no headline.
Captured from the Mobile-app Figma file (ngu8u7dzrbq08RIPSedKOC)
at native 3× (393 × 852 → 1179 × 2556), so every thumbnail, icon, and label inside the app stays crisp when rendered at the final slide size.
Edit the React slide that references one of these files to change what the composed slide looks like.
Generator
Run it locally
The final store-ready PNGs are composed by a Next.js app in design-ai/app-store-screenshots/.
Each slide reads one of the seven screens above, wraps it in a frame, and renders at every required size.
Start the dev server
Preview all seven slides at every size with live reload.
cd design-ai/app-store-screenshots
bun install && bun dev
Preview a single slide
Proof a slide at a specific device size via query string.
open http://localhost:3030\
/?only=0&device=iphone&w=1320
Export every PNG
Headless-Chrome batch — writes to exports/ by device tier.
./export.sh
Source
Where the code lives
Single-file slide definitions — edit one file to change any slide.
Slide definitions
Seven React components — one per slide
app-store-screenshots/src/slides/index.tsx
Preview + export page
Offscreen full-size copies fed to html-to-image
app-store-screenshots/src/app/page.tsx
Phone & Android frames
iPhone mockup + Android capsule
app-store-screenshots/src/components/frames.tsx
Constants
Canvas sizes · palette · phone-width math
app-store-screenshots/src/lib/constants.ts