The Short Answer
Figma is worth the setup when you ship screenshots repeatedly — several apps, several locales, or a listing you refresh every release. For a one-off set, a generator is faster and the output is store-correct by default.
The setup that works: frames sized at exact export dimensions, the device frame and background as components, captions as a text component with one instance per screenshot, and locales handled with variables rather than duplicated pages.
That sounds like a lot and takes about an hour once. After that, a full set of eight screenshots in four languages regenerates in the time it takes to paste new captures in.
What follows is the structure, the export settings that avoid App Store Connect rejections, and the point at which this stops being worth doing yourself.
The setup that works: frames sized at exact export dimensions, the device frame and background as components, captions as a text component with one instance per screenshot, and locales handled with variables rather than duplicated pages.
That sounds like a lot and takes about an hour once. After that, a full set of eight screenshots in four languages regenerates in the time it takes to paste new captures in.
What follows is the structure, the export settings that avoid App Store Connect rejections, and the point at which this stops being worth doing yourself.
Frames at Export Size, Not Design Size
The single most important decision is to build at the exact pixel dimensions you'll upload, at 1x.
Designing at some comfortable size and scaling on export is where the off-by-a-few-pixels rejections come from. A frame at 1320 x 2868 exported at 1x gives you exactly 1320 x 2868 every time.
Create one frame per screenshot, named for the store slot — `ios-01`, `ios-02` and so on — because Figma uses the frame name as the filename and correctly-named exports save real time at upload.
Set up a page per platform. iOS frames at the 6.9-inch dimensions, Play frames at 1080 x 1920, tablet frames at 1600 x 2560. Same content, three canvases, and no scaling anywhere.
If you're unsure which sizes you actually need, our Play Store sizes guide and the iOS equivalent list the current requirements — and in both cases you need fewer sets than you'd expect, because both stores scale down from the largest.
Designing at some comfortable size and scaling on export is where the off-by-a-few-pixels rejections come from. A frame at 1320 x 2868 exported at 1x gives you exactly 1320 x 2868 every time.
Create one frame per screenshot, named for the store slot — `ios-01`, `ios-02` and so on — because Figma uses the frame name as the filename and correctly-named exports save real time at upload.
Set up a page per platform. iOS frames at the 6.9-inch dimensions, Play frames at 1080 x 1920, tablet frames at 1600 x 2560. Same content, three canvases, and no scaling anywhere.
If you're unsure which sizes you actually need, our Play Store sizes guide and the iOS equivalent list the current requirements — and in both cases you need fewer sets than you'd expect, because both stores scale down from the largest.
Components for the Repetitive Parts
Three things repeat across every screenshot: the background, the device frame and the caption block. All three should be components.
The background component holds your brand colour or gradient. Change it once and all eight screenshots update, which is what makes seasonal or campaign variants trivial.
The device frame component holds the phone artwork with an image fill placeholder inside. Swap the fill per instance and the frame stays pixel-identical across the set — this is the part that looks amateurish when done by hand, because slight size differences between frames are very visible in a carousel.
The caption component holds the text style, position and any background shape behind it. Make the text a component property so you can edit copy without entering the component.
With those three in place, a new screenshot is: duplicate a frame, swap the image fill, change the caption text. Under a minute each.
The background component holds your brand colour or gradient. Change it once and all eight screenshots update, which is what makes seasonal or campaign variants trivial.
The device frame component holds the phone artwork with an image fill placeholder inside. Swap the fill per instance and the frame stays pixel-identical across the set — this is the part that looks amateurish when done by hand, because slight size differences between frames are very visible in a carousel.
The caption component holds the text style, position and any background shape behind it. Make the text a component property so you can edit copy without entering the component.
With those three in place, a new screenshot is: duplicate a frame, swap the image fill, change the caption text. Under a minute each.
Handling Locales Without Duplicating Everything
Localised listings are where hand-built screenshot files fall apart. Four languages times eight screenshots is 32 frames, and keeping them in sync manually is the actual work.
Figma variables solve this. Create a string variable per caption, with a mode per language, then bind the caption text to the variable. Switching the mode on a page swaps every caption at once.
What this doesn't solve is text length. German captions run considerably longer than English, and a caption that fits on one line in English wraps to three in German — which is why localised screenshots so often look broken.
Design the caption block to a worst-case length rather than the English one, and check every locale before exporting. Our guide to localizing app store listings covers what else changes per market beyond the text.
Right-to-left languages need mirrored layouts, and that genuinely does mean a separate page. Variables won't flip your composition for you.
Figma variables solve this. Create a string variable per caption, with a mode per language, then bind the caption text to the variable. Switching the mode on a page swaps every caption at once.
What this doesn't solve is text length. German captions run considerably longer than English, and a caption that fits on one line in English wraps to three in German — which is why localised screenshots so often look broken.
Design the caption block to a worst-case length rather than the English one, and check every locale before exporting. Our guide to localizing app store listings covers what else changes per market beyond the text.
Right-to-left languages need mirrored layouts, and that genuinely does mean a separate page. Variables won't flip your composition for you.
Export Settings That Avoid Rejections
Three settings, and getting them wrong causes most upload failures.
Export at 1x, PNG, with the frame's background set to a solid opaque colour. A frame with a transparent background exports a PNG with an alpha channel, which App Store Connect rejects even when nothing looks transparent.
Set the document colour profile to sRGB rather than Display P3. Figma defaults vary and P3 exports either get rejected or render with shifted colours in the store.
Use Export All from the page rather than exporting frames individually, so filenames stay consistent and nothing gets missed.
Before uploading, open one exported file and check the pixel dimensions match what you expect. It takes five seconds and catches the frame that got nudged to 1319 pixels wide at some point.
Our breakdown of App Store Connect screenshot rejections covers the full list of errors and what each one actually means.
Figma's own guide to exports covers the settings panel in detail, including how export scale interacts with frame size.
Export at 1x, PNG, with the frame's background set to a solid opaque colour. A frame with a transparent background exports a PNG with an alpha channel, which App Store Connect rejects even when nothing looks transparent.
Set the document colour profile to sRGB rather than Display P3. Figma defaults vary and P3 exports either get rejected or render with shifted colours in the store.
Use Export All from the page rather than exporting frames individually, so filenames stay consistent and nothing gets missed.
Before uploading, open one exported file and check the pixel dimensions match what you expect. It takes five seconds and catches the frame that got nudged to 1319 pixels wide at some point.
Our breakdown of App Store Connect screenshot rejections covers the full list of errors and what each one actually means.
Figma's own guide to exports covers the settings panel in detail, including how export scale interacts with frame size.
When to Skip Figma Entirely
This workflow earns its keep at scale. Below a certain volume it's overhead you don't need, and I'd rather say that plainly than pretend everything needs a design system.
If you ship one app, refresh the listing twice a year and don't localise, building this setup costs more time than it saves. A generator that outputs store-correct sizes with frames and captions gets you there in twenty minutes — that's what PlayMockup is for, and the frame library covers current devices without you sourcing artwork.
If you ship several apps, localise into four or more languages, or update screenshots every release, Figma pays back quickly because the marginal cost of a variant approaches zero.
A reasonable middle path: use a generator for the framing and export, and Figma only for the hero screenshot that carries the campaign idea. That's where design effort actually converts, and the remaining seven frames are mechanical.
Whichever route you take, the thing that decides installs is the first frame and the clarity of the captions, not the tool. Everything above is about removing friction so you spend your attention on that.
If you ship one app, refresh the listing twice a year and don't localise, building this setup costs more time than it saves. A generator that outputs store-correct sizes with frames and captions gets you there in twenty minutes — that's what PlayMockup is for, and the frame library covers current devices without you sourcing artwork.
If you ship several apps, localise into four or more languages, or update screenshots every release, Figma pays back quickly because the marginal cost of a variant approaches zero.
A reasonable middle path: use a generator for the framing and export, and Figma only for the hero screenshot that carries the campaign idea. That's where design effort actually converts, and the remaining seven frames are mechanical.
Whichever route you take, the thing that decides installs is the first frame and the clarity of the captions, not the tool. Everything above is about removing friction so you spend your attention on that.
Keeping the File From Rotting
Screenshot files degrade faster than product design files, because they're touched rarely and urgently. Six months later nobody remembers which page is current.
Three habits keep it usable. Name pages by store and platform rather than by date, so `iOS — current` beats `screenshots v4 final`. Archive old campaigns to a separate file rather than leaving dead pages in the working one. And keep a single cover frame listing which sizes are exported where, updated whenever a store changes requirements.
Store captures with the file, not just the composed frames. When you need to change one caption in eight months, having the raw screen images sitting in an assets page saves you re-running the emulator.
Version the file at each release rather than continuously. Figma's history is fine for undo, and named versions at ship points are what let you answer "what did the listing look like when installs dropped" — which is a question that comes up more often than you'd think.
None of this matters for a single app shipped once. All of it matters by the third app.
The rule I'd give anyone starting out: build the system the second time you need it, never the first. Premature structure is its own kind of waste, and you won't know which parts actually repeat until you've done the job by hand once.
Three habits keep it usable. Name pages by store and platform rather than by date, so `iOS — current` beats `screenshots v4 final`. Archive old campaigns to a separate file rather than leaving dead pages in the working one. And keep a single cover frame listing which sizes are exported where, updated whenever a store changes requirements.
Store captures with the file, not just the composed frames. When you need to change one caption in eight months, having the raw screen images sitting in an assets page saves you re-running the emulator.
Version the file at each release rather than continuously. Figma's history is fine for undo, and named versions at ship points are what let you answer "what did the listing look like when installs dropped" — which is a question that comes up more often than you'd think.
None of this matters for a single app shipped once. All of it matters by the third app.
The rule I'd give anyone starting out: build the system the second time you need it, never the first. Premature structure is its own kind of waste, and you won't know which parts actually repeat until you've done the job by hand once.
Frequently asked questions
What size should Figma frames be for app store screenshots?
Exactly your export dimensions at 1x — 1320 x 2868 for the 6.9-inch iPhone class, 1080 x 1920 for Play phones, 1600 x 2560 for 10-inch tablets. Designing at another size and scaling on export causes the pixel mismatches that get uploads rejected.
How do I handle multiple languages in a Figma screenshot file?
Use string variables with a mode per language and bind caption text to them, so switching mode swaps every caption at once. Design the caption block for the longest language rather than English, since German and Finnish routinely run 30% longer.
Why do my Figma exports get rejected by App Store Connect?
Usually a transparent frame background producing an alpha channel, or a Display P3 colour profile instead of sRGB. Set an opaque background on the frame, switch the document to sRGB, and export PNG at 1x.
Is Figma better than a screenshot generator?
Only at scale. For several apps, multiple locales or per-release updates, Figma's marginal cost per variant approaches zero. For a single listing refreshed twice a year, a generator like [PlayMockup](/create) produces store-correct output far faster.
Should I design all screenshots in Figma or just the first one?
A sensible middle path is designing the hero screenshot in Figma, since that's the frame carrying the campaign idea, and generating the remaining mechanical frames. Effort spent on frame one converts; effort spent on frame seven mostly doesn't. Build the reusable system the second time you need it rather than the first, since you cannot tell which parts genuinely repeat until you have done the job by hand once.
Build the mockup in your browser.
Drop a screenshot into a real device frame and export at the exact store size — free, no signup.