Naming convention
Follow the naming convention below:
| Platform | Web | iOS | Android |
|---|---|---|---|
| Icon | ic-name | icon-name | ic_name |
| Background | bg-name | background-name | bg_name |
| Image | img-name | image-name | img_name |
Promotional graphic assets for App Store and Play Store
To publish an app, we need to create promotional images or videos for the App Store and/or Play Store. Each platform has a specific set of requirements, so these graphics must be made accordingly.
App Store
The App Store shows promo images according to the device you are viewing it from. That is why we need to create App Store images previewing the app for different devices.
You can find the list of devices and their corresponding static screenshot sizes here. If you create a promo video, follow these guidelines.
Goole Play Store
The requirements for Play Store are a bit simpler, especially for static images.
As for the video, you can add a promotional YouTube video within your gallery.
Mockup templates
App icons
App icons are a crucial part of a product’s visual identity and are often included in the Styleguide to ensure consistency across platforms. When creating app icons, it's essential to design versions for both iOS and Android, adhering to each platform's official guidelines and templates. Here you can find their official Figma templates to help you design app icons for your app:
However, when developing apps, we (especially developers and QA) work with different environments like production, staging and development to manage various stages of the process. To avoid confusion and make it easy to tell them apart, when needed, we have to create app icons with ribbons that show which environment they belong to. These icons help the team quickly identify the right version of the app and prevent mix-ups. Here is our Figma template (🔒Internal use) which you can use to quickly add environment ribbons to your app icons.