PRODUCT DESIGN
Figma API for Art Export and Global Language Automatization
Problem:
App Stores for various devices like FireTV, Roku, Android, and Apple require UI screenshots to showcase the content of the apps. Growth marketing teams regularly update these screens to increase download goals as well as market new content on the apps. Furthermore, each country has its own version of these screenshots, resulting in 1000s of required assets.
The original workflow was manual, required many checkpoints, wasted valuable time reviewing assets by stakeholders, unorganized workflow, many copy errors, etc.
Example of a Finnish UI Screen Export
Objective:
Our objective was to improve productivity for designers updating artwork, accuracy for copy teams inputting global languages into the Figma template, and efficiency when exporting hundreds of assets for various devices using one plugin tool.
Implementing this workflow and plugin would also reduce the processing time from over 1 week to 1 to 2 days to optimize artwork for sprint releases. Additionally, It would streamline how we communicated with the global copy teams, production operations, and release management deadlines.
Enter 'Blade Runner' for HBO Max, Max, and discovery+. Working alongside a principal product designer, I created a seamlessly integrated template with an external spreadsheet for the copy team to update with any language as needed. After the art was updated, the designer would run the plugin from within Figma, which updated the text for each selected country. Once approved, selecting the screens or entire set was as simple as running the export plugin which also renamed the files, grouped them in folders, and optimized file sizes for each platform.
Research:
I needed to identify the pain points of the current workflow with external teams, find patterns in the art and copy, and work with the existing design system to create a new solution.
I was able to create a text pattern with the copy needed. Any text that was repetitive would be one identifier instead of having an ID for each text field. I also searched for character and paragraph styles that could be consolidated.
Before I started the Figma template, I created a working list of IDs, character/paragraph styles, selected the required UI screens, and gathered all the art content.
Solution:
The first step was creating a Figma template with new components and variants relevant only to the App Store based on the core design system. The challenge was making the design system work on mobile, tablet, and TV UI mockups that varied in pixel, as well as accommodating the global territory nuances.
Enter 'Blade Runner' plugin for HBO Max, Max, and discovery+. Working alongside a principal product designer, I created a template that seamlessly integrated with an external spreadsheet for the copy team to update with each territory language as needed. Once the spreadsheet was updated, I could run the plug-in which updated the country pages associated with their identifiers.
Then I reviewed each page and updated any required artwork. If a global change was needed, I updated the base components accordingly. Below is an example of the mini design system I created solely for App Store usage.
Rough draft of custom design system with variants for each country.
Mobile design mockups using grouped base components before the text is imported by the plugin.
Base components for tablet - 2 different orientations: iPad and Android
Base components for TV
Example of the plugin design workflow, approval process, spreadsheet setup, and export requirements.
Final Result:
After 4 months of development and testing, we successfully distributed the plugin for production and shared the new template with the internal design and copy teams. Overall the project was a success and our leadership was pleased with the improved process times and reduced errors. Our global teams were also impressed by the ease of use to input copy, provide feedback, and minimize translation mistakes.
