How do you make App Store screenshots in Figma?
Published
Short answer
Build each screenshot as a Figma frame set to the exact pixel size Apple accepts, then do the repeatable work once: turn the headline block, device frame and background into a component with variants, add auto layout to the headline so it survives longer translations, and place captures as native-resolution image fills. Export the frame as PNG at 1×, with an opaque background covering every edge — but check the result for an alpha channel before you upload, because Figma writes one into every PNG it exports2 (source 2).
Key points
- Design the frame at the exact accepted pixel size — 1290 × 2796 for the 6.9-inch class, for example1 (source 1) — rather than building larger and scaling down on export. Scaling introduces resampling Figma does not warn you about.
- An opaque background stops literal transparent pixels, but it does not remove the alpha channel itself. Figma’s own help documentation says plainly: “It’s not possible to export PNGs without an alpha value”2 (source 2). A fully opaque design can still trip Apple’s check.
- One component with variants for the headline block, device frame and background means a single label or colour edit updates every screenshot that uses it5 (source 5).
- Auto layout on the headline block keeps the layout intact when translated copy runs longer or shorter than the original4 (source 4).
- Figma checks none of this against store rules. Nothing in the export panel warns about a wrong pixel size or a lingering alpha channel, and every localisation multiplies the frame count by exactly the number of languages you ship.
Set the frame to the exact export size, not a scaled-down original
Start by creating a frame at the exact pixel dimensions Apple accepts for the display class you are targeting — see the accepted size table for the current list. For a 6.9-inch iPhone set that is commonly 1290 × 27961 (source 1). Type the width and height straight into the frame’s size fields in the right sidebar rather than drawing it by eye.
Design at that size directly instead of building a larger canvas and scaling the export down. Figma’s export scale field is a multiplier applied to the frame’s own dimensions2 (source 2), so a frame that is not already the target size needs a multiplier that lands on an exact accepted value — and if it does not land exactly, Apple accepts nothing but an exact match1 (source 1). Working at 1× throughout removes that arithmetic entirely.
Turn the repeated parts into a component with variants
The headline block, the device bezel and the background are usually identical across every screenshot in a set, except for one or two details. Build one of each, then select the variations you need — one per screen, one per language — and combine them into a single component set5 (source 5). Figma organises the result as one component set with a variant property you switch per instance, rather than several unrelated components that happen to look alike.
- A “screen” property for which marketing message shows on each of the ten frames.
- A “language” property once you start localising, so the same layout carries different copy.
- A single shared background or device component reused by every variant, so a colour or bezel change is one edit.
Place an instance of the component on each frame and override just the text or image that differs. The shared structure — spacing, corner radius, device frame position — stays locked to the master component, so a layout fix made once propagates to every screenshot that uses it.
Auto layout on the headline block, for when copy length changes
Select the headline text and its container and add auto layout4 (source 4). Auto layout arranges the children by direction, spacing, padding and alignment, and adjusts automatically when the content inside changes4 (source 4) rather than leaving you to nudge things by hand.
This matters most the moment you localise. Marketing copy for the same screenshot can run noticeably longer or shorter once translated, and a fixed-height text box either clips the longer version or leaves visible dead space around the shorter one. A headline set to hug its content grows or shrinks with the translation and keeps whatever sits below it in place.
Place raw captures as image fills, at native resolution
Figma has no dedicated image layer type — an imported photo or screen capture is added as a fill on a shape6 (source 6). Use Place image, or drag the file onto an existing shape, to drop the raw capture in at its original dimensions, then build the device frame around it rather than stretching the capture to fit a shape drawn at the wrong size.
Export as PNG at 1×, then check for the alpha channel
Select the frame, open the Export section near the bottom of the right sidebar, add an export setting, and set the format to PNG and the scale to 1×2 (source 2). The frame must be fully opaque — a background rectangle or shape filling every edge — because Apple rejects any screenshot that carries transparency1 (source 1).
An opaque background is necessary, but it is not the whole fix. Figma’s own help documentation is direct about this: “It’s not possible to export PNGs without an alpha value”2 (source 2). Every PNG Figma exports carries an alpha channel as part of the file format, whether or not any pixel in it is actually transparent — which is why a fully opaque design can still trigger the alpha-channel rejection. See why uploads get rejected for the other common causes.
- Set the frame’s width and height to the exact accepted pixel size before placing any content.
- Build the repeated parts as a component with variants, and add auto layout to the headline block.
- Place captures as image fills at native resolution, and fill the frame background with an opaque colour or shape covering every edge.
- Select the frame, add an export setting, and choose PNG at 1×2 (source 2).
- Export as JPEG, or check the resulting PNG for a lingering alpha channel, before you upload.
Name frames for predictable filenames, then export the whole set at once
Whatever you name the frame becomes the exported file name3 (source 3). Name each frame plainly and in the order you want the screenshots to appear — “01-onboarding”, “02-camera”, “03-export” — so the exported files sort correctly without renaming them by hand afterward. Add a locale in the export Suffix field rather than in the frame name itself, so “01-onboarding” exports as “01-onboarding-de” for German without touching the base layer name2 (source 2).
Once every frame in the set has an export setting attached, use File, then Export, to bulk-export every selection on the page that has one configured, rather than exporting frames one at a time3 (source 3). Review the list before confirming — anything left unchecked is skipped.
This whole workflow is a real option, and for a team that already lives in Figma it is often the right one. If you would rather not maintain a Figma file for this at all, Shotluma is a free, MIT-licensed, browser-based alternative with no account required: describe the app and it drafts a screenshot set as editable layers, exporting at 1290 × 2796 and 1242 × 2688. It does not produce iPad sizes or Google Play-compatible dimensions, so an iPad app or a Play Store listing still needs the Figma approach above.
Frequently asked questions
Should I export at 2× and scale the file down for a sharper screenshot?
No. Apple checks the exact pixel dimensions of the file you upload against its accepted list1 (source 1), and a 2× export doubles whatever the frame already measures. Design the frame at the target size and export at 1× so the numbers match without arithmetic.
Will Figma warn me before I upload if the pixel size or alpha channel is wrong?
No. Nothing in Figma’s export panel checks a frame against App Store rules, and nothing flags the alpha channel it writes into every PNG2 (source 2). The first place that check happens is App Store Connect itself, after upload — see why uploads get rejected for the other failure modes worth checking first.
Do I need a separate Figma file for every localisation?
Not a separate file, but a separate full set of frames: each localisation needs its own one to ten screenshots at the same pixel size1 (source 1). Components and variants make that fast to produce, but they do not make the extra frames disappear — ten screenshots in five languages is fifty frames to keep in sync.
Can I export a single frame instead of the whole batch?
Yes. Export settings and the export action both work on whatever is selected, so selecting one frame and exporting produces just that file. Bulk export through File, then Export, is only faster when you want everything with an export setting attached at once3 (source 3).
Do the same components work for an iPad screenshot set?
The components can be reused, but the frames cannot: iPad requires its own accepted pixel size — see the accepted size table — and its aspect ratio differs enough from iPhone that the layout usually needs rebuilding inside the component, not just resizing the frame around it.
Sources
- 1Screenshot specifications — App Store Connect Help — Apple Developer, File format, pixel dimension and transparency requirements. Read .
- 2Export formats and settings for static designs — Figma, PNG alpha channel, JPG transparency, scale and Suffix field sections. Read .
- 3Export from Figma Design — Figma, Export panel location, layer-name-to-filename behaviour, and bulk export via File > Export. Read .
- 4Guide to auto layout — Figma, What auto layout does. Read .
- 5Create and use variants — Figma, Combine as variants. Read .
- 6Add images and videos to designs — Figma, Images as fills, and the 4096px resolution limit. Read .