What frame size should I use in Figma for App Store screenshots?

Use the exact pixel size App Store Connect accepts for the slot. For the largest iPhone slot that is 1320 × 2868 or 1290 × 2796 in portrait; for the 13-inch iPad slot, 2064 × 2752. Figma treats its units as pixels at 1x, so a frame set to those numbers exports at exactly that size with no scaling.

Should I export App Store screenshots from Figma at 1x or 2x?

Export at 1x when the frame is already the store's pixel size. A 2x export of a 1290 × 2796 frame produces 2580 × 5592, which App Store Connect won't accept. Use 2x only if you deliberately built the frames at half size, and check the exported file's dimensions before uploading, since the store only accepts specific sizes.

Is there a free Figma template for App Store screenshots?

Yes. The Figma Community has many free App Store screenshot templates and device mockup files, and Apple publishes an official iOS and iPadOS UI kit for Figma. Check each file's frame sizes against Apple's current screenshot specifications before you use it, because older community templates are often built for sizes Apple no longer lists as the main iPhone slot.

How do I localize App Store screenshots in Figma?

The usual approach is to duplicate the whole set of frames for each language and replace the text, keeping the layout in shared components so design changes still propagate. On paid Figma plans, string variables with one mode per language let you switch a frame's copy by changing its mode. Either way, check every frame for text that grows or wraps in the new language.

How to Make App Store Screenshots in Figma (and When a Generator Is Faster)

To make App Store screenshots in Figma, create one frame per screenshot at the exact pixel size Apple accepts (for example 1290 × 2796 for the largest iPhone slot), build a reusable component that holds the headline and a device mockup, drop your app captures into the mockup, and export every frame at 1x as PNG or JPG. Because Figma units are pixels at 1x, a correctly sized frame exports at exactly the size App Store Connect wants.

Figma is a great tool for this, and it's also a lot of manual work once you add more devices, more languages and Google Play. This guide covers the setup that keeps that work manageable, and is honest about where a dedicated generator saves time.

Key takeaways

Figma frames are measured in pixels at 1x, so a frame set to an App Store Connect size exports at that exact size when you export at 1x.
App Store Connect's largest iPhone slot accepts 1260 × 2736, 1290 × 2796 and 1320 × 2868 in portrait; the 13-inch iPad slot accepts 2064 × 2752 and 2048 × 2732.
A component with auto layout for the headline and a nested device mockup lets you change type, spacing or colour once for the whole set.
Apple's official product bezels come as Photoshop and PNG files, not Figma files; Figma Community mockup files fill that gap.
Localization is the main cost in Figma: each language usually means another full set of frames to edit, check and export.

What frame sizes to use for App Store screenshots in Figma

Start from Apple's screenshot specifications, which list the exact pixel sizes each display slot takes. App Store Connect scales your largest screenshots down for smaller devices if your UI is the same across sizes, so most apps design one iPhone set and, if they support iPad, one iPad set. Add Google Play if you publish there.

Slot	Figma frame (portrait)	Notes
iPhone, largest display (often called 6.9-inch)	1320 × 2868 or 1290 × 2796	Apple also accepts 1260 × 2736. Required for iPhone apps unless you provide the 6.5-inch slot instead.
iPhone 6.5-inch	1284 × 2778 or 1242 × 2688	Only needed if you skip the larger slot or want device-specific shots.
iPad 13-inch	2064 × 2752 or 2048 × 2732	Required if the app runs on iPad.
Google Play phone	1080 × 1920	Play allows 320–3840 px per side, long side no more than twice the short side.
Google Play feature graphic	1024 × 500	One per listing, not part of the screenshot set.

Apple allows 1 to 10 screenshots per slot; Google Play allows up to 8 per device type. Our screenshot size reference keeps the full table, and the Google Play screenshot requirements post covers Play's rules in detail. If you need the feature graphic too, see our guide to the Google Play feature graphic.

One practical tip: lay the frames for a set side by side in a single row with a fixed gap. You see the whole set the way a shopper scrolls it, and you can spot a headline that's longer or a colour that's off at a glance.

How to build a reusable screenshot component

The difference between a Figma file you can maintain and one you dread opening is components. Build the layout once, then make every screenshot an instance.

1. The caption block

Create a frame with vertical auto layout containing the headline and an optional subheadline. Set the width to fill the parent and the height to hug contents, so a two-line headline pushes the device down instead of overlapping it. Use text styles for both, so changing the font or size later is one edit. Large type works best here: the headline is read at thumbnail size in search results.

2. The device mockup

Inside the device frame, put a rectangle the size of the screen area with your app capture as an image fill set to Fill. Masking the rectangle with the screen shape handles rounded corners. Make the mockup its own component, with the screen image exposed as an instance swap or image property, so swapping in a new capture doesn't mean digging through layers.

3. The screenshot component

Wrap the caption block and the device mockup in a parent frame at the store size, with vertical auto layout, padding and a background fill. Add component properties for the headline text and the screen image. Variants help if you use a few layouts, for example device centred, device cropped at the bottom, or no device at all for a closing screenshot.

Now each screenshot in the set is an instance where you edit two properties: the headline and the image. A change to padding, type or background in the main component updates all of them.

Where to get device mockups for Figma

Figma Community. Search for the device name plus "mockup". There are many free files with current iPhone, iPad and Pixel frames. Check the licence on each, and check that the screen area matches the device you captured on, or your screenshot will be stretched.
Apple Design Resources. Apple's design resources page offers official product bezels, but as Photoshop and PNG files, not Figma files. You can place the PNG over your screen rectangle in Figma. Apple asks you to review its marketing guidelines when using bezels in marketing materials. The same page has an official iOS and iPadOS UI kit in Figma, which helps if you're mocking up a screen that isn't built yet.
No device at all. Plenty of good sets skip the frame and run the capture edge to edge, or crop into a single part of the UI. It's a style choice, not a requirement.

Whatever you put in the frame, start with a clean capture: fixed 9:41 status bar, realistic data, no debug overlays. Our guide to clean simulator and emulator screenshots has the commands.

How to export App Store screenshots from Figma at exact pixels

Select every screenshot frame in the set (not the instances inside them).
In the Export section of the right panel, add an export setting: 1x, format PNG or JPG.
Export. Each frame becomes one file named after the frame.

A few things that tend to go wrong:

Wrong multiplier. 2x on a full-size frame doubles it, and the store will refuse the file. If you see 2580 × 5592, that's what happened.
Fractional frame sizes. A frame at 1290.5 px wide exports at a size the store doesn't accept. Type the dimensions in rather than dragging.
Transparency. App Store Connect doesn't accept images with an alpha channel, and Google Play asks for JPEG or 24-bit PNG without alpha. Give every frame a solid background; if a PNG is still refused for transparency, export JPG instead.
File order. Name frames with a numeric prefix (01-hook, 02-proof) so the files sort in upload order.

The localization problem

Here's where Figma gets expensive. If you ship your listing in five languages, you have five sets of frames per device, each with its own headlines to edit, check and export. Add iPad and Google Play and you're maintaining fifteen sets.

Two approaches keep it manageable:

Duplicate per language, keep components shared. Copy the row of instances for each language and override only the text. Layout changes still flow from the main component. This works on any plan, but every text change is a manual edit in every language.
String variables with modes. Store each headline as a string variable and add a mode per language. Switching a frame's mode switches its copy. According to Figma's help centre, modes are available on Education, Professional, Organization and Enterprise plans, and the number of modes per collection depends on the plan.

Neither solves text expansion. German and Finnish headlines often run longer than English, and a headline that fits on two lines in English may need three. Check every frame, and for right-to-left languages, mirror the layout rather than just the text. The translation itself deserves care too; our guides on localizing App Store screenshots and why translating isn't localizing go into both.

Custom product pages multiply the work again, since each one usually gets its own screenshots. If you're planning those, our custom product pages guide is worth reading before you set up the file.

When Figma is the right tool, and when a generator is faster

We build a screenshot generator, so weigh this accordingly. But we'd genuinely tell some teams to stay in Figma.

Situation	Figma	A screenshot generator
A designer on the team, strong brand system	Usually the better fit: full control, real components	Can feel constraining
Unusual concept (illustrated, panoramic, heavy custom art)	Better fit	Depends on the tool
One language, one store, one device	Fine; the setup cost is paid once	Faster to a first version
Several languages	Every language is another set to edit and export	Translation is usually built in
iOS and Android	Separate frames per store size	Store sizes are usually presets
Uploading	Export, then upload by hand or script it	Some tools upload directly to the stores

A common middle path: design the key visual and the first screenshot in Figma, where you have total control, then use a generator for the repetitive part of producing every size and language. Our Launch Shots vs Figma comparison lays out the trade-offs side by side, and our roundup of screenshot generators covers the other options.

If you go the generator route, Launch Shots keeps store sizes maintained across devices, translates headlines into store languages, and publishes to App Store Connect and Google Play Console. It also has an MCP server if you'd rather generate the set from Claude Code or Cursor.

Try it now

Design store-ready screenshots in minutes — free, no export watermarks.

Launch Shots is free to start. Every template (110+), 220+ device frames plus 3D mockups, AI localization, and direct upload to App Store Connect and Google Play Console. No credit card needed.

Start creating free →

Checklist: App Store screenshots in Figma

Frames typed to exact store sizes (1290 × 2796 or 1320 × 2868 for iPhone, 2064 × 2752 for iPad, 1080 × 1920 for Play).
One main component with auto layout for the caption and a nested device mockup; every screenshot is an instance.
Headline and screen image exposed as component properties.
Clean captures: 9:41 status bar, realistic data, matching device aspect ratio.
Solid background on every frame; export at 1x as PNG or JPG; numeric prefixes on frame names.
A plan for languages before you start, whether that's duplicated rows or variable modes.
Content checked against the basics in our screenshot best practices, starting with what goes on the first screenshot.