Workflow

From Figma frame to App Store gallery

You already have the screens. What is missing is the layer on top: a headline, a backdrop, a device shell, and files at the pixel sizes the stores validate. Here is the shortest path from one to the other.

Reading time: about 6 minutes

Step one: the export settings

Almost every quality problem downstream starts here. Six settings, once, on the frame.

SettingUseWhy
FormatPNGJPEG is fine for photographic screens, but PNG keeps UI edges and small type crisp.
Scale2x or 3xExport bigger than you need. Upscaling a 1x frame later shows on every hairline border.
FrameThe device frame itselfSelect the frame, not the artboard group. Exporting a group can bake in the canvas background.
BackgroundOpaqueTurn off transparent background. Stores reject alpha channels and a transparent export composites unpredictably.
Contents onlyOffLeave "Contents Only" unchecked so clipped content is not cropped away at the frame edge.
Size capUnder 10 MBThe upload limit per file. A 3x export of a dense screen can exceed it — drop to 2x if it does.

The whole workflow

  1. 1

    Export the frames you want to show

    In Figma, select each device frame, add a PNG export at 2x in the right-hand Export panel, and export. Five to seven frames is the right number — the first two carry most of the conversion.

  2. 2

    Skip the mockup plugin

    Device-frame plugins and downloadable PSD mockups give you a framed screen and nothing else: no headline, no backdrop, no store-size export, and no second language. Upload the plain frame instead.

  3. 3

    Upload the raw exports

    Drop the PNGs into the generator. A vision pass reads all of them together and derives your palette, category and visual mood, which is what keeps the finished set coherent.

  4. 4

    Pick the store and the languages

    Apple, Google Play, or both. Add up to five storefront languages per batch. Choose up to four art directions if you want options rather than one answer.

  5. 5

    Export at store dimensions

    The ZIP arrives foldered as AppStore/iPhone-6.9, AppStore/iPad-13 and PlayStore/Phone at the exact pixel sizes each store validates against.

What a mockup plugin leaves you to do

Figma device-frame plugins are good at exactly one thing. The rest of the gallery is still your afternoon.

 Figma pluginThis generator
A framed screenYesYes
A benefit headline written for youNoYes
Backdrop derived from your paletteNoYes
Exact store pixel dimensionsManualEnforced
Alpha channel flattenedManualAutomatic
Five languages in one passNoYes
Four art directions to compareNoYes
Foldered ZIP for uploadNoYes

Questions

What resolution should I export Figma frames at?+

Export at 2x, or 3x if the file stays under 10 MB. The generator renders its own output at store dimensions, so a larger source only helps — but a 1x export of a 393 pt frame is roughly 393 px wide and will look soft once it is scaled to 1290 px.

Do I need a Figma app store screenshot template?+

No. A template gives you a layout you then have to fill in, resize and re-translate by hand for every language. Uploading the plain frame skips all of that — the layout, headline and export sizing are generated.

Can I upload a Figma link instead of a PNG?+

Not currently. Export the frames as PNG or JPG and upload the files. It takes one keystroke in Figma once the export setting is on the frame.

Will it keep my exact UI?+

Yes. The frame you upload is preserved as-is and the composition is built around it. Nothing inside the device is redrawn.

My design is not final. Is it worth doing now?+

It is worth doing early precisely because it is cheap. Generating a gallery from work-in-progress frames often surfaces that your strongest screen is not the one you planned to lead with — which is a design decision, not a marketing one.

Export three frames and try it

Three free credits is exactly three finished screenshots — enough to compare against whatever you would have built by hand.

Upload a Figma export