Localizing App Store Screenshots with Google Sheets and Sketch App
If you’ve ever attempted to put together App Store screenshots for the iOS App Store, you realize it can be quite exhausting and intimidating. If you want to submit 11+ languages, those feelings increase exponentially. Many apps don’t even bother localizing screenshots because of this complexity and choose to have English screenshots for every locale. This is a poor experience for non-English speakers and could prevent people from downloading your app.
Current State of App Store Screenshots
There are great free tools like fastlane that allow developers to automate screenshot building, and a plethora of other online solutions that may provide legitimate value, but most cost money.
Unfortunately, I’ve found most of these resources don’t meet our needs. If your user interface changes in your app, or if you want to change marketing directions with the look and feel of the screenshots, many times it’s like starting all over. Time goes by and screenshots become stale and outdated.
Sketch Plugins to the Rescue
There’s a great plugin I discovered that allows Google Sheets to sync with Sketch. It’s as simple as renaming your text layers in Sketch to the corresponding name in Google Sheets.* You simply paste in the Google Sheet URL via the plugin and everything magically changes for you.
*Please see Sketch plugin page for detailed information.
An epiphany happened when I started experimenting with this. If I named all my Sketch text layers appropriately, I could automate translation across all my screens by duplicating my English page and renaming it to the desired language.
Google Sheets Can Translate for You
Where I work at YouVersion, we have a team of volunteers who support us by getting copy localized. Of course, this is what we recommend for the most accurate translation. However, many organizations don’t have these available resources at hand. When thinking about this barrier to translation, I realized Google Sheets has Google Translate built right in. You can point to an English source in a different sheet and automatically have Google translate it for you.
You can learn more here about how Google Translate works in Google Sheets. To find the appropriate two letter language code you need, check this out. Also, referencing data from another Google Sheet is explained here.
So what does all of this mean? If you want to change your app store screenshot descriptions, using Sketch, you could automatically translate and update over hundreds of screenshots in less than five seconds! Magical, right?
There will need to be a little massaging/positioning of the text if certain text strings are longer, but overall, it saves hours of time instead of copying and pasting.
Taking It One Step Further
App store screen descriptions are an easy thing to tackle with this workflow, but what about an entire app experience? It’s actually pretty easy. The advantage is most designers already have Sketch files put together of major sections you might want to feature. It’s just a matter of renaming those text layers in Sketch.
Plugins like Anima’s Auto Layout help tremendously here. This plugin enables layers to space evenly regardless of the text. There will always be a little massaging of elements, but the more you can do on the front end, the more it will pay off when you automate things.
Localized Profile Images
If you want to localize your profile images, it’s really easy. Just use the Invision Craft plugin and download a bunch of images from Diverse UI. Craft allows you to create quick shortcuts by pointing to a specific folder of images.
Success For The Future
What happens when you want to change the look and feel of your screenshots (i.e. the background color or images)? Well, if you’ve set it up right, that’s extremely simple by using Sketch Symbols.
Caveats
A future feature Sketch has almost released is something called Symbol Scaling (*update, this is now available.*)It allows you to create a symbol and scale it smaller or larger in other areas but retaining all the same information. So if you make one change to it, it will change through your entire document/pages. When this releases, it will make this process even easier. Until then, I recommend using symbols sparingly (i.e. the background images/colors).
Closing Thoughts
It’s been a long road of trial and error and it’s a system that will continually change for me. What I do know is this setup will have a longer shelf life and will be maintainable for our designers or marketing team for years to come.
Open Digerati is an open source initiative from Life.Church. We’re passionate about leveraging technology to reach the world for Christ, and connecting with others who share that passion. Join us on Slack and Facebook.
