Figma App Store screenshots: frame sizes, export settings and a 3D workflow

Figma frame sizes for App Store and Google Play screenshots

Design each screenshot in a frame that is already the final pixel size. When the frame matches the store size exactly, a 1x export produces an upload-ready file with no resampling, and text stays as sharp as you drew it. Apple accepts JPEG or PNG and between 1 and 10 screenshots per device size and localization.

For iPhone you provide the 6.9″ set (or the 6.5″ set as a fallback); App Store Connect scales them for smaller iPhones. The 13″ iPad set is required only if your app runs on iPad. Google Play is range-based rather than fixed: any size from 320 to 3840 px works as long as the long side is no more than twice the short side. The full list of accepted variants is in our App Store and Google Play screenshot sizes guide.

Export settings that pass the upload check

Figma exports PNG, JPG, SVG and PDF, with scale presets from 0.5x to 4x or a fixed width or height. According to Figma’s own documentation, it is not possible to export a PNG without an alpha value: every PNG is a 32-bit RGBA file, even when the frame has a solid background. Google Play requires JPEG or 24-bit PNG with no alpha, and developers regularly report App Store Connect refusing Figma PNGs with an “image can’t contain alpha channels or transparencies” error.

The simplest fix is to export JPG. Figma exports JPGs at High quality by default, which keeps UI text readable; don’t lower it for screenshots. If you need PNG, flatten the alpha channel after export (for example by re-saving the file with alpha turned off in macOS Preview) before uploading. To turn a PNG export into a JPEG without leaving the browser, see our free image converter and video-to-GIF tools.

• Scale: 1x when the frame is already at store size. Exporting a 440-wide frame at 3x also works, but only if the result lands on an accepted size.
• Format: JPG (High) for store uploads; PNG only if you strip the alpha channel afterwards.
• Background: fill the whole frame with an opaque color or image so no edge pixel is transparent.
• Naming: prefix frames with their order (01-onboarding, 02-search) and add the locale as a suffix, so a batch export sorts correctly.

Structure the Figma file so the set stays editable

A screenshot set is usually 5–10 frames per device size, multiplied by every language you support. Rebuilding frames by hand for each change doesn’t scale, so build one master component (background, headline block, device area) and make every screenshot an instance of it. A change to the headline style or background then propagates to the whole set.

Put headlines in auto layout containers so longer translations grow the block instead of overflowing it, and use variants or variables for light/dark themes and per-language copy. If you ship in several languages, the planning side of that — which markets to localize first and what to translate — is covered in our guide to localized App Store screenshots.

Where Figma stops: angled 3D devices

Figma is excellent for UI layout, components and copy, but its frames are flat. Realistic device rotation, depth, reflections and shadows are hard to fake with 2D mockup frames, and every change of angle means re-editing the mockup by hand.

A practical split is to keep designing the app screens in Figma and move the presentation step — device, camera angle, lighting, background — into a 3D tool. Ecranify renders real 3D device models in the browser, so the screen you exported from Figma becomes a texture on the device and you choose the angle with the mouse instead of redrawing it.

Step by step: from a Figma screen to a 3D App Store screenshot

For the 3D workflow you export the app screen itself (not the finished screenshot) from Figma, at the device’s native resolution, so it maps onto the 3D display without stretching. The iPhone 18 Pro Max display, for example, is 1320 × 2868 px and the iPhone 18 Pro display is 1206 × 2622 px.

• Design the app screen in Figma at the target device’s screen proportions and export it as PNG, JPEG or WebP.
• Open the free Ecranify editor (no account needed), pick a device such as the iPhone 18 Pro Max or Pixel 10 Pro XL, and drop the exported screen onto its display.
• Drag to orbit the camera to the angle you want and set a gradient or image background. The full editor (after signing in) adds lighting, device rotation, and headlines as 2D or 3D text.
• Choose a store export preset (iPhone 6.9″ 1320 × 2868, iPad 13″ 2064 × 2752, Google Play phone 1080 × 1920 and others) and export.

Continuous carousel strips without manual slicing

A continuous layout — a background, headline or device that runs across two or more screenshots — is fragile in Figma: the frames have to be sliced at exact offsets, and reordering the set breaks the seams.

In the Ecranify editor you compose the strip as one scene and the carousel export slices it into 2–5 frames, each at the exact store size. A configurable gap (5% of the frame width by default, up to 15%) leaves an empty gutter between slices to match the spacing the store adds between gallery images, so a device that straddles a seam still lines up. Carousel export is part of the paid editor.

ASO tips for designer-led screenshots

A clean workflow only matters if the result converts. The broader strategy — ordering, captions and testing — is in our App Store screenshot best practices; these are the points that trip up Figma-first teams most often:

• Lead with the benefit: put a short headline in the top third of the frame, where the device doesn’t cover it.
• Enlarge the UI: real in-app text is often too small to read in search results, so increase font sizes and contrast on screens made for the store.
• Keep one camera setup: use the same device angle and lighting across a set so it reads as one coherent story.
• Respect the edges: keep key UI away from the frame edges and the device corners so nothing important is clipped.

Build these in Ecranify

Frequently asked questions

Related guides & comparisons