How to Make App Store Screenshots in Figma (Step by Step)

Quick answer: Create one Figma frame per screenshot at the exact store size, such as 1206 × 2622 for the required 6.3-inch iPhone size. Build components for the device and headline, use auto layout so text can grow, and keep copy in string variables per language. Export at 1× as JPG or flattened PNG. For many sizes and languages, a dedicated generator is faster.

Every exported pixel must match an accepted size, so start with the frames, not the artwork.

The full matrix lives in our App Store screenshot sizes guide and the Google Play size guide, so check there for every accepted variant.

Then set up the file:

1. Press F for the Frame tool, click once on the canvas, and type the width and height in the right sidebar.
2. Name frames with a consistent pattern, such as en-US_6.9_01-hero. The layer name becomes the file name on export.
3. Duplicate the frame for each screenshot, usually five to eight, and line them up with no gap. That shows the gallery the way people will scroll it.
4. Add a solid or gradient fill to every frame. A frame with no fill exports with transparent areas.

Panoramic sets

If you want artwork that flows across screenshots, make one wide frame, for example 6600 × 2868 for five 6.9-inch screens, and design across it. Then use the Slice tool (S) to draw five 1320 × 2868 slices and export the slices. Keep headlines and key UI away from slice edges. Our panoramic screenshot guide covers safe zones.

Components are what keep a 40-frame file manageable. Select an element and press Cmd+Option+K (Ctrl+Alt+K on Windows) to make it a component, then place instances in each frame.

Create at least these:

• Device mockup. A phone frame with a rectangle for the screen. Drop each screenshot onto the rectangle as an image fill, so swapping screens takes one drag. Apple publishes official device bezels in its Apple Design Resources.
• Text block. An eyebrow, headline and subtitle with shared text styles.
• Badge or rating row, if you use social proof.

Capture the source screenshots cleanly first: a 9:41 status bar, full battery and realistic demo data. The clean status bar guide has the exact commands. Editing the main component later updates every instance, which is the real payoff when your brand color or device mockup changes.

Select the eyebrow, headline and subtitle and press Shift+A to wrap them in a vertical auto layout frame. Give it a fixed width that leaves comfortable margins, and set its height to hug the contents. Now a longer headline pushes the subtitle down instead of overlapping it.

Practical text rules for store screenshots:

• Keep headlines to three to six words, with one benefit each. Our caption guide has dozens of examples.
• Size type for the thumbnail. Zoom out until the frame is about as tall as a search result card on your phone. If you can't read the headline there, it's too small.
• Leave room for translation. German and French headlines often run noticeably longer than English, so don't design to the last pixel.

Figma's string variables are the cleanest way to localize inside Figma:

1. Create a variable collection called Copy, with one string variable per headline and subtitle.
2. Add a mode for each language, such as English, German and Japanese, and fill in the translations.
3. Bind each text layer to its variable.
4. Duplicate your row of frames for each language and set the mode on each row.

Switching a row's mode updates all of its text at once, which makes overflow easy to spot. The number of modes you can create depends on your Figma plan, so check before you commit to this setup.

The limits show up at scale. Each language needs its own copies of the frames at every size you ship, and right-to-left languages like Arabic and Hebrew need mirrored layouts, not just translated strings. Five screenshots, three device sizes and ten languages already means 150 frames to check and export.

App Store Connect and Google Play both want flattened images, and Google Play rejects PNGs with an alpha channel outright.

1. Select all frames (or slices) for one language and size.
2. In the Export section of the right sidebar, click the plus button and set the scale to 1x.
3. Choose JPG, which can't contain transparency and exports at High quality by default, or PNG if you need lossless output.
4. Use File, then Export (Shift+Cmd+E) to export many frames at once.

Two settings cause most rejected files. Exporting at 2x doubles the dimensions so they no longer match any accepted size, and unchecking "Show in exports" on a frame's fill leaves the background transparent.

Check your PNGs before uploading. On a Mac, sips -g hasAlpha screenshot.png reports whether a file has an alpha channel, and sips -s format jpeg screenshot.png --out screenshot.jpg converts it to a flat JPG. ScreenShipper's free screenshot size checker shows which store slot an image fits and flags alpha channels. More fixes are in our alpha channel guide.

The 6.9-inch and 6.3-inch iPhone frames have almost identical proportions, so the Scale tool (K) can resize one set into the other cleanly. Other targets need real layout work:

• iPad is close to 4:3. Scaling a phone layout leaves huge empty space, and Apple expects iPad screenshots to show your iPad interface. Redesign the layout with the device shown larger or in landscape.
• Google Play limits the long side to twice the short side. A 1320 × 2868 iPhone frame is about 2.17 to 1, so it can't be reused as-is. Use a 1080 × 1920 frame and re-flow the content.
• Google Play feature graphic is a separate 1024 × 500 landscape design.

Figma is the right tool when you need custom illustration, your design system already lives there, or you ship one language on one platform. The work multiplies with every size and language you add:

A common split is to design the look in Figma and produce the store sets in a generator. Our guide to choosing a screenshot generator lists the criteria.