App Store mockup to test icons and screenshots
There are many online platforms to check the look of an app showcase. I don’t use them as they aren’t integrated with the main graphic design tools (Photoshop, Sketch, Figma). It’s important to see the final result right away and not to upload draft versions multiple times. Currently I’m using mockups for Photoshop that I’ve promptly created for myself. They are not beautiful but serve me well.
In this post I’m going to share about my first try to make this mockup neat without losing its main function.
The mockup was created in Figma. It’s a conditionally free tool that fully functions in any browser. It’s useful to create interface and prototypes similar to Sketch. In contrast to Photoshop, it’s much faster. Figma works on Windows and iOS, while Sketch only works on iOS.
I decided to start with Figma so that the mockup could be used not only by designers but marketers.
Components
The mockup is build with components, which are equivalent to smart objects in Photoshop. This allows to instantly update an icon regardless of its location. It works with screenshots, too.
Preview of the main pages graphics on App Store for iPad and iPhone
The mockup can show a preview of an app page, search page and an icon on the desktop for iPad (Pro, Air) and iPhone (7, X). You can use an old-fashioned way and send the preview pic to a chat for approval of add a user and discuss certain aspects of design directly in the layout.
Comments inside the layout
Preview
Export of graphics in accordance with technical requirements
The mockup enables you to export the graphics so that you can upload it to App Store. It’s handy if you create graphics using Figma.
Perks
You can modify the mockup, change the color of the device, the composition of the preview. The distance between screenshots is proportional to those on the app page. It’s handy when you need to draw pictures split on several screenshots.
How to use
Open this link, sign in/sign up, copy the mockup.
How to use Figma: export, components, layers panel