How to Create App Store Screenshots with Figma — Complete Guide for iOS and Android

Setup and context

When users discover your app on the App Store or Google Play, the first visual elements they see are screenshots. How effectively you communicate your app's value in these few screens directly impacts download rates and user acquisition.

This guide walks you through creating professional, store-optimized screenshots using Figma—covering both iOS and Android, multi-device support, multiple languages, and practical implementation tips. By the end, you'll have a reusable template system that saves you hours on future updates.

Understanding App Store and Google Play Screenshot Requirements

Before you open Figma, understanding each platform's technical specifications is crucial. Getting this wrong means wasted revisions and missed deadlines.

App Store Specifications and Device Support

App Store users see different screenshots depending on their device, so supporting multiple sizes ensures better presentation across all iPhones and iPads.

Large Device Support (Highly Recommended)

• 6.7-inch: 1290 × 2796 px (aspect ratio 19.5:9) — iPhone 15 Pro Max and similar
• 6.5-inch: 1284 × 2778 px (aspect ratio 19.5:9) — iPhone 14 Pro, 15 and similar
• Recommendation: Support at least these two sizes for maximum reach

Standard Device Support (Optional)

• 5.5-inch: 1242 × 2208 px (aspect ratio 9:16) — iPhone 8 Plus compatible
• 4.7-inch: 750 × 1334 px (aspect ratio 9:16) — iPhone 6s compatible
• Use these if targeting older device users

iPad Support (For Universal Apps)

• iPad (landscape): 2732 × 2048 px (aspect ratio 4:3)
• iPad Pro (portrait): 2048 × 2732 px
• Essential if you're publishing a universal app

You can provide 2-10 screenshots per app. Apple recommends using multiple sizes for better previews. Typically, your first 3-5 screenshots highlight main features, while remaining slots showcase detailed functionality and real-world use cases.

Google Play Specifications and Requirements

Google Play has simpler but specific requirements:

Recommended Dimensions and Format

• Recommended size: 1080 × 1920 px or 1440 × 2560 px
• Format: PNG or JPEG (compression rate flexible)
• Aspect ratio: 9:16 preferred (other ratios work but may display incorrectly)
• Max file size: 8 MB per file (1-2 MB optimal)

By Device Type

• Smartphones (primary): 1080 × 1920 px
• Tablets: 1440 × 2560 px
• Required count: 2-8 screenshots

Google Play is more forgiving with size variations, but adhering to official specs consistently improves quality and visibility.

Setting Up Your Figma Template

Let's build your screenshot foundation in Figma.

Step 1: Create Frames with Proper Settings

Open Figma and create a new file. Select the Frame tool and create frames with these specifications:

For App Store

1. Frame name: AppStore_67in_ja (include language code)
2. Dimensions: 1290 × 2796 px
3. Background: White or light gray (for visibility during design)

For Google Play

1. Frame name: GooglePlay_1080x1920_ja
2. Dimensions: 1080 × 1920 px
3. Background: White or light gray

If supporting multiple languages, organize pages by language:

• Page 1: Template
• Page 2: Japanese
• Page 3: English
• Page 4: Screenshots_Draft

Step 2: Add Device Mockups

Figma's plugin ecosystem provides excellent device frame options. Install these from Figma Community:

Recommended Plugins

• "Device Frame Generator" — Creates multiple device frames automatically
• "Apple Devices" — Realistic iPhone/iPad frames
• "Device Mockups" — Multi-platform mockups
• "Angle" — 3D device perspective (great for presentations)

These plugins automatically insert realistic device frames (bezels, notches, home indicators) that match your frame dimensions.

Setup tips:

1. Define your frame dimensions before running the plugin
2. Select the exact device model
3. Let the plugin apply mockups automatically
4. Use "Angle" to adjust perspective if desired

Step 3: Design Backgrounds and Layouts

Effective screenshot backgrounds elevate your design:

Background Techniques

• Gradient backgrounds: More refined than solid colors. Try 2-3 subtle colors
  • Example: Light blue fading to white
  • Method: Draw rectangle → Design panel → Fill → Gradient
• Brand color accents: Add your brand color at 20% opacity to unify visual identity
• Whitespace management: Don't overload—aim for 3-5 key pieces of information per screenshot
• Visual flow: Follow the Z-pattern (top-left → right → bottom-left → bottom-right)

Implementation Example For Rork-generated apps:

1. Export your AI-generated UI as PNG
2. Import into Figma (Assets → Import)
3. Place inside the device mockup's screen area
4. Layer text elements on top
5. Add gradient background below

Typography and Text Strategy

Effective screenshots balance visual appeal with clear communication. Text should support your ASO strategy.

Recommended Information and Layout Strategy

1. Headline: What can users do with your app? (15-25 characters, 48-56px)
   • Position: Top 20-30% of screen
2. Feature descriptions: Maximum 3 lines, concise (32-40px)
   • Use bullet-point format
3. CTA (optional): "Download" button or text
   • Use contrasting color for visibility
   • Position: Bottom of screen

Typography Hierarchy

Create clear text hierarchy for better readability:

Recommended Size Scale

• Main headline: 48-56px (bold, weight 700-800)
• Subheading: 32-40px (medium, weight 600)
• Body text: 24-28px (regular, weight 400-500)
• Caption: 16-20px (regular, weight 400)

Font Selection

• Japanese: Noto Sans JP, Hiragino Sans (readable sans-serif options)
• English: Inter, Roboto, Montserrat (modern sans-serif)
• Mixed languages: Ensure visual balance between Japanese and English fonts

Safe Area Considerations

• Top: Reserve 44-48px for notch
• Bottom: Reserve 34px for home indicator
• Left/right: Reserve 16-20px on each side
• Minimum font size: 32px for readability

Workflow: Integrating Rork-Generated UIs

If you're using Rork to generate app UIs, here's the efficient workflow:

Efficient Multi-Screen Process

1. Export UI from Rork as PNG

   • Select "Export" → PNG format
   • Use highest quality (2x or 3x resolution)
   • Enable transparent background

2. Import into Figma

   • Open Assets panel → Import
   • Drag and drop your PNG
   • Paste into device frame's screen area
   • Resize to fit properly

3. Add Headlines and Background

   • Use Text tool (T key) for headline
   • Layer gradient background underneath
   • Verify color harmony

4. Create Multiple Language Versions

   • Right-click frame → Duplicate
   • Rename page by language (_ja → _en)
   • Edit text layers only
   • Check layout doesn't break

Time Savings Through Templating

After 2-3 hours on the first language version, you'll have a reusable template. Subsequent screenshots take just 30 minutes.

Template Best Practices

• Componentize: Convert frequently-used text styles and buttons to components
• Variants: Pre-create language and device-size variants
• Auto Layout: Text changes automatically adjust layout

Export Settings and Quality Management

Optimizing PNG Export

• Format: PNG (compress without quality loss)
• Resolution: 1x (outputs frames at exact dimensions)
• Background: Include background checkbox confirmed
• Pixel size: Don't deviate from specified dimensions

Batch Export Workflow

1. Select all export-target frames (Shift+click)
2. Open right panel → Export section
3. Add new export settings with "+" button
4. Select PNG format
5. Click "Export all" and choose destination folder

Pro Tip: Name frames with language codes (ja_6_7_inch, en_6_7_inch) for easy post-export organization.

File Size and Quality Balance

• App Store: Target under 5 MB per file
• Google Play: 8 MB maximum limit
• Production: 1-2 MB optimal (faster downloads)

Compression approach:

• Figma's native compression achieves 70-80% file size reduction
• Further optimize with TinyPNG if needed

Multi-Language Strategy

Scaling to multiple languages is where templates shine:

Language-Specific Workflow

1. Finalize your base language (Japanese) version

   • Lock all design decisions
   • Plan layouts with generous text space for longer languages

2. Duplicate and translate

   • Right-click page → Duplicate
   • Organize by language
   • Edit text only, never reposition

3. Verify layout integrity

   • Different languages have different text lengths
   • German is typically 1.5-2x longer than Japanese
   • Chinese is often more compact
   • Account for these differences in frame design

4. Batch export all frames

   • Select all frames
   • Use batch export feature for efficiency

Text Length Expansion by Language

• Japanese: 100% (baseline)
• English: 120-130%
• German: 150-180%
• Simplified Chinese: 80-90%
• Traditional Chinese: 85-95%

Summary and Next Steps

Figma's templating approach transforms screenshot creation from tedious to efficient. Initial investment in a solid template pays dividends across all languages and A/B test variations.

Time Investment Baseline

• First language (template creation): 3-4 hours
• Each additional language: 30-40 minutes
• Full multi-language rollout (5 languages): 4-5 hours total

Recommended Next Steps

1. Run A/B testing: Create multiple screenshot variations and measure performance
2. Optimize copy: Refine text based on what resonates with your audience
3. Seasonal updates: Refresh screenshots to match campaigns or seasonal features
4. Gather user feedback: Show real users and iterate based on reactions

Professional screenshots are essential to app success. Use this Figma workflow to create compelling store assets that drive downloads.