Lorem Ipsum No More

In highly-complex industries showing accurate data to a user can make or break a research session. The numbers are the experience and often they’re the most personal part of your product. In my experience however, getting accurate data into my design has been disproportionally time-consuming. After months of experimentation with various tools, plugins, and scripts, the proverbial stars aligned and the resulting process is too good not to share.

Sketch + Google Sheets

When it comes to design tools, we’re undoubtedly in a Golden Age. The sense of allegiance I once had to a single design product seems almost quaint (long live Photoshop, first of its name). There are certainly some design tools that make accurate data entry more seamless, but since our team uses Sketch, it had to be the tool-of-choice.

In addition, while Google Docs makes one step in the process much easier, there are many alternatives to replace it if needed.

Step 1: Sketch Plug-in

Data Populator takes structured data from a JSON file and fills text and image layers that you’ve marked in Sketch. It’s a free plugin offered by Precious Design Studio, but you should buy them a coffee since they’re about to save you a boat load of time.

GET DATA POPULATOR

Step 2: Sheets Plug-in

Power Tool takes a spreadsheet and outputs the data into a structured JSON file.

See where I’m going with this?

GET POWER TOOLS

Step 3: Prepare Your Symbols

Prepare your symbols thoughtfully.

Sketch 58 gave us Smart Layout, probably the most important feature since symbol Overrides. With it, symbols will resize in a pre-defined way as text or symbols are added or removed. It’s incredibly powerful on its own, but when combined with Data Populator, the potential increases exponentially. Here’s how I recommend you set up your layers.

In this simple example, I created a “Transaction” symbol to represent financial transactions on a personal account.

I encourage you to experiment with Sketch’s new Smart Layout as it can get tricky with complex symbols. Once you get a handle on it though, it can be incredibly powerful.

Prepare your symbols thoughtfully

Pay particular attention to the way that layers are labeled. These layer names will end up corresponding to the column headers in a Google Sheet. Note that the text in the design itself does not have to match. Also, images! Yes! We’ll swap those out too.

Step 4: Prepare Your Data

Once your symbol is ready, hop on over to Google Sheet and structure the sheet to match the layers you laid out in your symbol.

The columns are case sensitive

Make sure that all of your cells are marked as plain text. For images, the path name is relative to where you’ll end up putting the JSON file. Once you’re ready, select all of the data that you’ll want to make available to your Sketch File, including the headers, and choose “Convert” from your Power Tools Add-On.

Add-On > Power Tools > Convert

Match the settings above

When exporting, turn all of the convert options off, and turn the “First row is the header” on. Then, export the selection to JSON!

Copy that text into any text editor, and save it as a .JSON in the folder where your images were placed.

Step 5: Feel the Magic

Almost there! Go back to your Sketch project, and select an instance of your symbol. Select Plugins > Data Populator > Populate with JSON.

Make sure that the right layer is selected

There are some helpful options here that you can play around with, but for this purpose, I’ve turn the random order off, and had the plug in create a gride for me.

BOOM. Five layers appear with real data, real images, all spaced and ready to be shared. This moment is euphoric if you didn’t already know that.

Now that everything is set up, updating or changing the data is extremely easy. Just re-export the Google Sheet, overwriting the previous file. Then repopulate the layers with the Data Populator plugin. That’s it.

Final Thoughts

While there may be faster alternatives to exporting from Google Sheets, there are a few benefits. Namely that you can share the Sheet with other stakeholders to populate with realistic data themselves. Sometimes your product manager, or even the user will be the best person to tell you what data is realistic and Google Sheets provides a common medium to collect that data. Lastly, consider duplicating the data file to show the same design but through the eyes of a different persona.

I’m just scratching he surface of this process, and I’m sure improvements will be made over time. I hope though, that before that happens this helps you save time and make better experiences.