The Demo‑to‑ASO Creative Sprint: 5 export recipes to turn a playable into store screenshots, video storyboards, and ad variants

Start by creating a single source of truth file: one Figma page named Demo→ASO with frames for every key screen flow (onboarding, core job, success). Add descriptive names with slugs you’ll use in exports (example: onboarding_1, feature_pay, share_success). That makes batch exports and later automation predictable.

Create device preset frames sized to the stores and ad placements you’ll target. At minimum include: iPhone 15 Pro (1290×2796 visual frame scaled to App Store device mock), Google Play phone (1080×1920/8:5 crops), and a square/landscape variant for ads. Use clearly labeled frames like iPhone_AppStore_1x, AndroidPlay_8_5, Ad_1080x1080.

Set export settings on each frame: PNG/JPG at 2x and 3x for high‑density screens, and SVG or optimized JPG for ad thumbnails. In Figma’s Export panel add scale rows (1x, 2x, 3x) with suffixes ("", "@2x", "@3x") so a single click produces all densities you’ll need for App Store Connect and Play Console uploads. Also set the color profile to sRGB to avoid color shifts when uploading.

bullets_field_placeholder

Screenshots sell value quickly. Use a 3‑line visual hierarchy: 1) the hero visual (real in‑app screen), 2) one short benefit headline (6–8 words max), and 3) a 2–3 word CTA line that reinforces intent (e.g., “Get started”, “Share now”). Keep copy high‑contrast and avoid tiny type — test legibility at phone size in Figma by zooming to 100%.

Frame rules: show the real UI edge‑to‑edge for credibility, add a 10–12% padding for overlay text, and treat the top 20% as the headline band on iOS where it’s most visible. For Play Store remember you can supply multiple sizes (phone, 7-inch, 10-inch, Chromebook) but start with the phone 8:5 crop and export additional crops only for large tablet flows.

Produce three screenshot sequences per user journey: Problem → Solution (core feature) → Outcome (success). Export each sequence to both iPhone and Android frames using your 2x/3x rows. This gives you 6–9 store screenshots per locale fast.

bullets_field_placeholder

App Store preview videos are short: 15–30 seconds. Use a three‑act storyboard: hook (3–5s) that communicates what the app does, demonstration (8–15s) that shows the core flow in motion, and close (4–6s) with the CTA and a final key screen. Keep each beat tied to an explicit user benefit — avoid feature lists.

Create the storyboard as a horizontal Figma frame with 3–7 panels (each panel = 2–5 seconds). Record short screen recordings of the demo flows, trim to the panel durations, and import clips into Figma or a simple editor to add headline overlays and poster frames. Export a 30s master and produce 15s/6–15s ad cuts from the same panels.

Follow Apple’s specs when exporting: progressive, H.264/HEVC compatible settings, and 15–30s length per preview. Also export a poster-frame PNG (first frame) because App Store may show it when autoplay is off.

bullets_field_placeholder

From the same storyboard and exported clips, produce a matrix of ad variants: 1) Social square (1:1) 2) Feed vertical (4:5 / 9:16) 3) Landscape (16:9). Keep the creative logic identical across aspect ratios: same hook, same primary CTA timing, and a single creative focus per cut.

Use tight crop rules: keep the focal UI elements within the central 60% of the frame so conversions don’t break when swapping aspect ratios. In Figma, create mask frames sized to each ad aspect, place the same video or still inside them, and export. Produce 5–10 variants: different headlines, first‑frame thumbnails, and 3 durations (15s, 6s, 3s) for paid channels.

Name exported assets to map directly to campaigns and placements (example: onboarding_hook_15s_1x_1080x1080.jpg). This reduces back‑and‑forth with ad ops and speeds A/B tests.

bullets_field_placeholder

Sizing cheats: rely on Figma export scales and suffixes to produce 1x/2x/3x outputs in one click. For App Store screenshots export device mock variants (portrait iPhone frames) at 3x to produce crisp retina images; for Play Console aim for 8:5 phone crops at 1080×1920 and check the Play Console help page for exact pixel constraints per device family.

Localization: keep your text layers separate from UI layers and create locale variants as component instances. Use the same frames and swap the text layer to export localized screenshot sets. This saves time when you need language-specific CTA sequencing and poster frames.

Wrap up by validating assets against each store’s requirements: Apple allows up to three app previews per localization and enforces 15–30 second lengths; Google Play requires specific screenshot counts per device family and gives flexible aspect rules. Run one final check in the target consoles before uploading.

bullets_field_placeholder