Table of contents
- Quick nav
How to Make App Store Screenshots in Figma: Frame Sizes, Template Setup and Batch Export
Why Figma screenshots need their own workflow
"App store screenshot template figma" is one of the most common searches from designers and indie developers getting ready to ship. The free Figma plan covers almost everything you need. Drawing the screenshots is the easy part. Three other things cause the trouble:
- Frame size. Every frame has to match a pixel size the store accepts. If it's off by even 1px, App Store Connect rejects the upload.
- Volume. A real listing means 5–10 screenshots × several device classes × several languages. Without a template, changing one caption means editing dozens of frames.
- Export. It's easy to export at the wrong scale or leave an alpha channel in the file.
This guide gives you a reusable Figma file structure, from creating frames to exporting. If you're not sure which device classes are mandatory, start with the required screenshots FAQ.
Step 1: Create frames at the official pixel sizes
Use the Frame tool (F) and type the width and height into the properties panel yourself. Skip presets like "iPhone 16 Pro Max": they're in points, not screenshot pixels.
| Purpose | Frame size (portrait, px) | Notes |
|---|---|---|
| iPhone, large Dynamic Island class | 1320 × 2868 | Good master design size |
| iPhone, medium Dynamic Island class | 1206 × 2622 (or 1179 × 2556) | The class that gates submission |
| iPad 13-inch | 2064 × 2752 (or 2048 × 2732) | Required if your app runs on iPad |
| Google Play phone | 1080 × 1920 (9:16) | Sides 320–3840px; long side no more than 2× the short side |
| Google Play feature graphic | 1024 × 500 | Shown at the top of the listing |
Two habits that save time:
- Design the master at the largest size. Scale it down or re-lay it out for smaller classes. Never stretch a small design up.
- For panoramic sets, build one wide frame (5× the screen width) and slice it with five equal child frames. The panoramic screenshots guide walks through it.
Step 2: Build a component-based template
A page layout that stays manageable:
| Page | Contents |
|---|---|
| 00 Components | Device frames, caption styles, backgrounds, badges |
| 01 iPhone 6.9 | All large-class screenshot frames |
| 02 iPhone 6.3 | Medium-class frames (instances of the same components) |
| 03 iPad 13 | Tablet frames |
| 04 Google Play | Android phone shots and the feature graphic |
| 99 Export | Only the final frames to export, so you can select all at once |
How to split the components:
- Make each screenshot a main component. It holds the background, headline, subhead, device frame and a UI placeholder. Other sizes use instances, so one edit to the main component updates every size.
- Drop UI captures in as an image fill on the screen area. To swap a screen, change the fill and leave the layout alone.
- Wrap text in Auto Layout with a fixed width and wrapping turned on, so longer translations don't overflow.
- Save colors and type sizes as Styles or Variables. Then a theme change happens in one place.
For font choice and the minimum caption size that still reads at thumbnail scale, see fonts for App Store screenshots.
Step 3: Manage localized captions
Localization is where Figma files usually get out of hand. There are three common approaches:
- Variable modes. Store each caption as a string variable with one mode per language. Switch a frame's mode to switch its language. This works best with a few languages and stable copy.
- One page per language. The most obvious option. Every design change has to be repeated in each copy, so it only makes sense for 2–3 languages.
- Import from a spreadsheet with a plugin. Keep the copy in a sheet and use a data-populating plugin to fill the text layers. This suits teams with many languages and copy that changes often.
Whichever you choose, check for three things. Do long German or Russian words break out of the text box? Does your font cover every Chinese and Japanese glyph you use? Do right-to-left languages need a mirrored layout?
Step 4: Export settings
Select every frame on the 99 Export page and set the Export panel:
| Setting | Recommendation |
|---|---|
| Scale | 1x. Frames are already at final pixels, so don't use 2x or 3x |
| Format | PNG or JPG. JPG never carries an alpha channel |
| Frame fill | Give every frame a solid fill. Never leave it empty |
| File names | Prefix with order, like "01-home" and "02-search" |
Then check pixel size and alpha before you upload. On macOS, the built-in sips tool does it:
sips -g pixelWidth -g pixelHeight -g hasAlpha *.png
If you see hasAlpha: yes, export as JPG instead, or flatten the image onto a solid background. For other upload failures, see App Store Connect screenshot upload errors.
Troubleshooting table
| Symptom | Cause | Fix |
|---|---|---|
| "Dimensions are wrong" on upload | Used a Figma device preset (points) or exported at 2x | Type pixel sizes into the frame and export at 1x |
| Blurry caption edges | Master was designed small and scaled up | Redo the master at the largest class |
| One caption change means dozens of edits | No components or instances | Make each screenshot a main component |
| Headline overflows after translation | Text box has a fixed width and height | Use Auto Layout with fixed width and hug height |
| Upload rejected for transparency | PNG still has alpha | Export JPG or flatten the background |
When you don't need a full Figma file
Sometimes all you need is to drop a UI capture into a device frame and add a headline. In that case, a browser tool with store size presets, such as AppShot Maker, is faster than maintaining a Figma template. Switch back to Figma when you need fully custom art direction.
Summary
- Create frames at screenshot pixels, not device presets, and design the master at the largest class.
- Make each screenshot a component and use instances for other sizes and languages.
- Pick one localization method: variable modes, one page per language, or a plugin import.
- Export at 1x, then check size and alpha before uploading.