Create screenshots for submission

To submit your app to the App Store and Play Store, you will need screenshots in various dimensions. This article explains how to get those.

Required dimensions

To be able to submit your app to the stores, screenshots in different dimensions are needed. We use the dimensions below, but others options are also possible. You can find this in the Apple Developer Portal or Play Console Help.

  • App Store
    • 1242 x 2208 (iPhone 8)
    • 1080 x 2340 (iPhone X and up)
    • 2048 x 2732 (iPad)
  • Play Store
    • 1440 x 2560 (phone)
    • 800 x 1280 (7 inch tablet)
    • 1600 x 2560 (10 inch tablet)

Generate screenshots

First, you will need to take the screenshots that you can later put into our Figma template. To create these, you will need three devices:

  • iPhone XR and up
    To generate 6.5'' screenshots and 5.5'' screenshots
  • iPad Pro 2nd or 3rd generation and up
    To generate 12.9'' screenshots
  • Android device
    Google Console provides more flexibility, therefore the specific device is not of a crucial importance

If you do not have the access to one of the required devices and therefore cannot generate some of the screenshots, please contact our support email: support@conference-compass.com.

Access the Figma template

Figma is a web-based design programme, in which we have created a template containing the correct screenshot dimensions. This template can be found here

To use the template, first make sure to create an account on Figma. You can directly create one with Google, or with an email address.

Once the account is created, you will see that you cannot edit the template directly. In order to create your own file, you need to make a copy. Click the icon top left, chooses File and then Save local copy

Now you can customize the template.

Customize Figma template

Adjust the background

You can adjust the background of all screenshots at the same time by updating the component. To do so, go to the Components page on the left column.

Find the component Background and expand it. You can have a solid background, a gradient, or a background image. Click the eye to make the ones you're not using invisible. Select the layer you want to adjust the properties of. The properties are then shown in the panel on the right. 

Solid Gradient Image
Select or enter a hexadecimal color. Select the type of gradient (linear or radial) and choose the start and end colors and transparency. To replace the image, hover over the image field and select Choose image. Then select the image from your file browser. By default, it is set to Fill, meaning that parts of the image are cropped so that it fills the entire frame. Alternatively, you can also drag the image from Finder directly onto the small thumbnail below Fill on the right. 

 

 

 

 

 

 

 

 

 

 

 

Customize the text and font

To change the text, just double click it and type whatever you want to have in your screenshots.

To change the font, select the text or the entire frame and choose your font, size, spacing, etc. in the right panel.

Replace the images with your screenshots

To replace the images that are in the template with your own screenshots, make sure that you have selected the layer you want to replace. Hold down Cmd on Mac, or Ctrl on Windows, and hover over the frame until the screen gets a purple border, and then click.

In the panel on the right, you can then replace the image by selecting another one from your computer. Alternatively, you can also drag the image from Finder directly onto the small thumbnail below Fill.

Please note that the stores only require at least 2 images, so you do not have to use all 5. If you decide not to use some screens, just select the screen to delete and press the Delete button on your keyboard. On the other hand, you can also create more screenshots if you want: select the entire frame, right click and choose Copy, and paste it elsewhere in the file.

Export the screenshot files

To export the files, make sure all frames are selected by drawing a rectangle over them.

At the bottom left, below Export, click the button Export 30 layers. Wait for a bit, and then select the folder to export the files to.