Store Creative Snippets: 30 Reusable Figma Components to Generate Screenshots, Preview Videos, and Ad Variants

Design one ‘demo’ artboard that contains the canonical screen(s) of your app and use 30 atomic Figma components to generate every downstream asset. Partition components into four groups: device frames & safe‑masks, layout panels (single, grid, carousel), marketing overlays (headline, subhead, feature badges), and CTA/variant tokens (primary CTA, secondary CTA, price, short copy). By assembling these primitives you get predictable, repeatable exports for store screenshots, short preview videos, and ad cards.

Keep every component a variant‑driven component in Figma (size, language, color, CTA state). That makes bulk copy swaps and size adjustments fast: change text in one place and push updates across all exports. Use Figma’s Auto Layout and constraints so components scale cleanly across required sizes, and use slices or export frames to lock the exact pixels you need for each destination.

Set export targets in advance and add them as named slices/frames beside the demo artboard. For iOS, Apple requires screenshots for specific display classes and enforces file formats and sizes; include 6.7" and 5.5" variants at minimum and prepare App Preview video files that meet App Store preview rules. For Google Play, include the phone screenshots plus feature graphic and an optional promo video — Play accepts JPEG or PNG with specific aspect guidance. Preparing these exact targets before design avoids last‑minute rework and App Review rejections.

For paid acquisition, prepare a standard set of ad variants: square 1080×1080, vertical 1080×1920 (Stories/Reels), landscape 1200×628 for link ads, and a tall 1080×1350 (4:5) for feed. Use export scales in Figma (1x, 2x) so you have retina and compressed-ready versions. Save named export presets for each placement to hit specs quickly when you export batches.

Build every copy element as a text token within a component variant (headline-short, headline-long, subcopy). When A/B testing store captions or ad hooks, create a simple CSV with headline variants and use a Figma plugin (or built‑in text replacement workflows) to push swaps across artboards. Structure your pages so each export frame references the same text and components — swapping the master text updates every derived asset.

For CTAs, maintain three visual states: primary (solid), secondary (outline), and micro (text-only). Export each asset with CTA toggled to produce ad variants quickly. When your Figma file is ready, use slices or export frames set to the exact pixel dimensions and run batch export. Use Figma’s export presets to create both compressed JPEGs for stores and lossless PNGs for high-res promo use.

App Store preview videos must be screen captures of your app and follow Apple’s content and technical rules (length, codecs, and truthful representation). Build a storyboard of 3–5 scenes from your demo artboard, export sequential frames from Figma at target device resolution, and use a simple video tool (Premiere, CapCut, or command-line ffmpeg flows) to stitch them. Keep motion tight: 3–6 second shots, 1–2 headline overlays, and a final CTA frame.

For social ads, design vertical 9:16 compositions using your reusable components so the same assets power both store previews and reels. Export a clean poster frame (matches Google Play feature graphic or App Store poster) and a short 15–30s vertical edit that reuses the same typography and CTAs from your screenshots to preserve creative continuity.

Start timer. Follow these steps in order to complete a publishable asset pack in 90 minutes: (1) confirm demo artboard screens and component variants, (2) run a quick copy swap (headline set A), (3) toggle CTA states and produce three CTA variants, (4) export screenshot slices for iOS and Android targets, (5) export poster frames and compile a short preview video, (6) export ad sizes (square, vertical, landscape), and (7) compress and organize outputs in named folders for App Store Connect and Play Console uploads.

Use this folder structure when exporting so uploads are fast and repeatable: /app-store/iphone-6.7/, /app-store/iphone-5.5/, /play/phone/, /play/feature-graphic/, /ads/1080x1080/, /ads/1080x1920/, /videos/. Attach a README with copy variants and CTA mapping so teammates and agencies can re-run exports without opening the Figma file. AppWispr customers often use this exact structure to speed launches and keep creatives versioned.