How spreadsheets became one of my essential design tools
Be lazy: Photoshop, Figma, XD, and so many others let you pipe data directly into your layouts
How I feel when I use spreadsheets.
Early in my career, I was a co-op student at a large game company. I was assigned an extremely menial task that took weeks (if not months) to complete and ended up giving me a repetitive stress injury. My fingers would go numb and tingle, and my entire arm was messed up, I was in constant pain all the way up to my shoulder.
The task was to mask out (in 3D) all the places where an in-game NPC helicopter should not be able to fly. It was a collision mesh that blanketed every corner of every level in the game. The work itself involved moving individual points around in 3D to follow city topology in order to prevent the helicopter from accidentally passing through something solid like a building. It was done entirely manually. It was the worst.
One day, a senior software engineer strolled past my desk and remarked, incredulously, “You’re still working on the heli-mesh? Can’t they automate that?”
I wish I could remember his name because that rhetorical question changed my life:
“Can’t they automate that?”
This is now something I ask myself frequently and evangelize:
“Can I automate this?”
I started by exploring automation in Photoshop, using Photoshop Actions to resize batches of image files with a few clicks. I learned about the Generate Assets feature that, when turned on, automatically exports layers as files according to how they’re named.
Adobe’s diagram of how Generate Assets works
Adobe’s example of a data set
Spreadsheets are obviously useful for planning, categorizing, chart-making, and tracking, but the way I use them for design automation is really quite basic: for storing information. This information is then easily read directly from Google Sheets via plugins (Adobe XD, Sketch, and Figma), allowing anyone with access to contribute changes.
Google Sheets Sync plugin by Dave Williams in the Figma Community
With a minimal amount of setup (plugins usually have their own syntax) and whatever data cleanup is necessary, it has always been super satisfying to let the computer do things for me in a fraction of the time it would’ve taken me to do manually.
Situations where this has been super useful:
adding placeholder user data (like names, avatars, stats, prices, product images, and more) to help a mockup feel more realistic
viewing UI text in many different languages to see if any of them will break the layout
adding translations to app store screenshots (3 device sizes ✖️ 6 screenshots ✖️ 30 languages = at least 500 strings)
replacing and exporting custom assets in marketing emails and social media posts for use across multiple brands
A portion of SongPop’s app store screenshot translations were accomplished with the click of a button (after I batch-renamed the relevant layers!)
And if you’re wondering, somebody eventually did automate the creation of the helicopter collision mesh!