My Process for Creating App Screenshots 💻 📱

Hey there! 👋

While building my iOS app (https://snackfolio.com/) I’ve developed a short process for generating screenshots and also updating them. I’m writing this to share my workflow and also get any insights from you on what else I might be missing or how your process differs.

Tools

I’m using a combination of 3 apps:

• Figma (https://www.figma.com/, which is free)
• Rotato (https://rotato.app/, which was a one time purchase)
• https://app.haikei.app/ for generating the background waves; this can easily be exported as SVG and then imported in Figma

Workflow

1. I run the app on my iPhone and take screenshots which are saved in Apple Photos.
2. I import all of the screenshots in Figma.
3. For the light and dark mode image, I use 2 images and a mask to create that diagonal effect.
4. I export all images as files, which I then import into Rotato. I keep a .rotato file for a normal, front facing screenshot and then an additional 2 for the ones that are angled.
5. For this specific set of screenshots, I've removed all the 3D "natural" options from Rotato (screen reflections, shadows, realistic iPhone edges)
6. Back in Figma I have a background layer with the waves and another one with the screenshots. Both these are used together with a horizontal negative offset in each of the "frames" that will export the final set of App Store images. This allows for those elements that span multiple adjacent images in the store.
7. I have 2 layers for both the 6.5 and 5.5 mandatory screen versions. Because the dimensions (and ratio) are different, I need to create them separately, to avoid any alignment issues.

Issues

Ideally I'd want to have it more automated, but it's not worth spending time on optimizing my flow because of the current frequency with which I need to update these screenshots. I also might experiment more with the design which requires more flexibility. This might change in the future.

Next

In the future I’m also considering recording a video of the app being used (plus a voice over from me) so I’ll probably use Rotato for some 3D animations.
I've also tried some app screenshot tools out there, but I haven't seen one that allows for 3D rotations. Because I'm using Figma and Rotato anyway, this was my preferred choice. It is considerably more work than using an app specifically designed for it, but for me it works fine.

What does your process look like? Do you have any ideas on how I could improve mine?