Skip to main content
← Back to articles

Developer resources

App Store Screenshot Figma Template: How to Set One Up Right (Plus 5 Free Community Files)

How to build or pick an App Store screenshot Figma template: the exact frame sizes, a component structure that survives 10 screenshots × 30 locales, export settings that App Store Connect accepts, and five free Figma Community files worth starting from.

If you already design in Figma, an App Store screenshot Figma template is the obvious way to make store screenshots. It works, and thousands of listings are built that way. It also fails in predictable places: a frame at the wrong size, an export with an alpha channel, a caption that overflows in German, and an afternoon lost renaming forty PNGs so App Store Connect takes them in order.

This guide covers how to set up a Figma file that avoids those failures, what to look for in a Community template, five free files worth starting from, and where a template stops being enough. For the broader "Figma or a dedicated tool" question, see screenshot generator vs Figma.


Frame Sizes: Get These Right First #

Every problem with Figma screenshots starts with a frame at the wrong size. Set the frames to the exact pixel sizes App Store Connect accepts and export at 1x. Do not design at half size and export at 2x; rounding on odd dimensions produces off-by-one files that the upload rejects.

Device slot Frame size (portrait) Notes
iPhone 6.9-inch (required) 1320 × 2868 Or 1290 × 2796 or 1260 × 2736
iPhone 6.5-inch 1284 × 2778 Only needed if there is no 6.9-inch set
iPad 13-inch (required if on iPad) 2064 × 2752 Or 2048 × 2732
Mac 2880 × 1800 Landscape, 16:10
Apple Watch 410 × 502 Ultra size; the store scales down
Apple Vision Pro 3840 × 2160 Landscape

Landscape iPhone and iPad frames are the same numbers reversed. The complete lists, including every optional class, are in the iPhone, iPad and Watch and Vision Pro guides.

In practice you need two frames for most apps: one 6.9-inch iPhone frame and one 13-inch iPad frame. App Store Connect scales those down for every smaller class.


A File Structure That Survives Scale #

A template that looks fine with five English screenshots turns into a mess at ten screenshots and eight languages. The structure below keeps it manageable.

One page per device. iPhone on one page, iPad on another. Do not mix sizes on a page; batch export becomes unreliable.

A device frame component. Build the phone bezel as a component with an image fill in the screen area. Every screenshot is an instance, so swapping the bezel style or moving to a new iPhone shape is one edit.

A caption component with auto layout. Put the caption in an auto-layout frame with fixed width and hug height, so a longer translation wraps to a second line instead of running off the canvas. Set the text style once and reuse it.

A screenshot component that combines the two. Background, caption instance, device instance. Ten screenshots are ten instances with different image fills and caption text.

Variants for locale, if you localize. A component set with a variant per language keeps every locale's caption in one place. It is still manual, but it is at least one file rather than eight.

Consistent layer names. Name each screenshot frame with a prefix that sorts correctly: 01-iphone-en, 02-iphone-en. App Store Connect orders uploads by file name in some paths, and an export named Frame 47 is a sorting problem waiting to happen.


Export Settings App Store Connect Accepts #

  • Format: PNG or JPEG. PNG is the safe default.
  • Scale: 1x, on a frame already at the target pixel size.
  • No transparency. Give every frame a solid or gradient fill. A transparent background exports as a PNG with an alpha channel, and App Store Connect refuses the file. This is the most common Figma-specific rejection.
  • Colour profile: sRGB. Figma exports sRGB by default; do not switch the file to Display P3 for screenshots.
  • Batch export: select all frames on a page and export at once. With the naming above, the files land in order.

Run the exported folder through the free screenshot validator before uploading. It checks dimensions, format and the alpha channel in a few seconds.


Five Free Figma Community Templates #

These are free on the Figma Community at the time of writing. Duplicate one rather than starting from a blank file; the frame sizes and basic structure are already there. Check that a file has been updated for the 6.9-inch iPhone size before relying on it.

  1. FREE App Store Screenshot Templates, a broad starter set for both App Store and Google Play.
  2. App Store and Play Store Screenshot Template, with layouts for iPhone, iPad and Android phones and tablets.
  3. Free App Store and Play Store Screenshot Template, a lighter single-style file.
  4. App Store Screenshot Template by ASO.dev, which supports iPhone, iPad and Mac and is set up for localization and bulk export.
  5. 500+ App Store Screenshot Templates, a large collection if you want to browse styles.

Whichever you pick, do the same three checks before you build on it: the iPhone frame is one of the accepted 6.9-inch sizes, the background layer has a solid fill, and the caption is in an auto-layout frame rather than a fixed text box.


Where a Figma Template Stops Being Enough #

A template solves layout. It does not solve the production work that a store listing actually consists of, and that work grows with every device and language.

  • Sizes. Each additional device class is another set of frames to maintain. A change to the caption style is a change in every one.
  • Localization. Each language is a manual duplication and a paste. Ten screenshots in eight languages is eighty captions to place by hand and check for overflow.
  • Export and upload. Batch export gives you a folder. Getting the folder into App Store Connect, in the right slots and the right order for every locale, is a separate afternoon. The upload guide shows the manual route.
  • Updates. Every release with a new screen means repeating all of the above.

The point at which this stops being worth it is usually the second language or the second release. The time comparison in the Figma post puts numbers on it.


The Built-In Alternative #

Screenshot Studio ships 25 templates that do the same job as a Figma template, with the production work attached. Several follow the look of listings people already know: a warm-paper travel layout, a glowing-capitals dark layout, a flat-colour layout with a magnifier over one control. You can browse all of them in the template gallery.

The difference from a Figma file is what happens after you pick one. Drop in your captures, type the captions, and the template renders every device size from the one design. Add languages and the captions are translated with built-in AI, with layouts that adjust when the text runs long. Export produces every required file with no alpha channel, or upload sends them to App Store Connect in the right slots. The whole thing is free to build; you pay once when you export.

If you want the Figma design and the automated production, the hybrid works too: design the look in Figma, export the background and any illustration as flat images, and use them as the background in Screenshot Studio. The tool handles frames, captions, sizes, languages and upload from there.


Frequently Asked Questions #

What size should an App Store screenshot Figma frame be? 1320 × 2868 pixels for the required iPhone 6.9-inch set, and 2064 × 2752 for the iPad 13-inch set. Export at 1x.

Why does App Store Connect reject my Figma PNG? Almost always transparency. Give the frame a solid fill so the PNG has no alpha channel. The second most common cause is a frame exported at 2x from a half-size design, which produces off-by-one dimensions.

Can I use a Figma template for Google Play too? Yes. Google Play accepts a wider range of sizes, so an iPhone frame usually works as-is. The Google Play sizes guide has the limits.

Is there a free Figma template with device frames? The Community files above include bezels. Check that the bezel matches a current iPhone shape; several older files still use the notch rather than the Dynamic Island.


Conclusion #

A Figma template is a fine way to design App Store screenshots and a slow way to produce them. Set the frames to the exact accepted sizes, build the caption and device as components, give every frame a solid fill, and export at 1x with sortable names. Start from one of the free Community files rather than a blank canvas. When the second language or the second release arrives, the built-in templates do the same layout with the sizes, translation and upload handled for you. Download Screenshot Studio and try one on your own captures.

Developer resources

Keep the design, lose the export spreadsheet

Screenshot Studio ships 25 built-in templates, exports every device size from one design, translates captions with built-in AI, and uploads to App Store Connect. Build it free, pay once when you export.