How to create UX mockups in 7 simple steps using Sketch App, the data populator plugin and JSON.
As a UX or UI Designer, at some point in time, you will have mocked up some sort of listing page.
This usually involves a number of items that have set attributes with slight variations, arranged in a standardised layout.
As a UX Designer at Mulberry, I create a lot of wireframes and prototypes for product listing pages. After numerous projects, I started to grow a little tired of the repetitive nature of the work and looked for ways to automate the process.
The remainder of this article focuses on the process I go through and how I think it can help you too!
TLDR
Play the video below if you prefer to skip the bulk of this article.
Sidenote
This article assumes you’ve already been doing your homework and know that designing with real has many benefits.
If you’re new to all this, then I recommend checking out these articles first:
Data Populator Plugin
There are various ways in Sketch (and XD) to quickly mock-up listing pages using a combination of Symbols + Make Grid.
There are a few interesting options to integrate real data into your designs including you Sketch’s built-in data plugin or InVision’s Craft plugin. But in my experience, both of these plugins have their limitations. After some research, I stumbled across the Data Populator Plugin.
Much like Craft, this neat plugin lets you set up a JSON data source and quickly populate your designs. The key here is that you can control the order and number of items you populate (you can also randomise. This gives more realistic results.
Design Process
Follow the steps below to start designing with Data Populator. If you want more granular detail about how the plugin works, check out the Documentation section on the Data Populator website.
Step 1
Download and install the plugin using the link above, or through Sketch Runner.
Step 2
Set up your JSON data source.
At Mulberry, we use Algolia to power our search. I logged into the dashboard and downloaded the respective product groupings (Women’s Bags, Jewellery etc) as JSON files.
If you don’t have a pre-existing JSON file, you can always set up one, just follow the docs above for more info
Step 3
Assuming you have already created a symbol in your Sketch file (or library) you next need to ensure you name the layers in your symbol to match the keys used in your JSON file.
Essential Step
It is important that your layer names match the name of the JSON keys. If they don't, then the data won't know which layers to target and the plugin won't pull the data into your design.
Step 4
Again I am assuming you have created a layout for your symbols, be that a single instance or multiple like I have below in my PLP (product listing page).
Select all the symbol instances on the current artboard. You can also select symbols across multiple artboards.
Step 5
Now go to the menu bar and select Plugins > Data Populator > Populate with JSON.
Step 6
The first time you run the plugin it will prompt you to choose your JSON file (you can save these as presets).
Go into Finder, find the respective file and then select the root key of the JSON file, in my case ‘hits’ and select the ‘reload’ button.
This should give you your JSON preview like in the screenshot below. Then select the ‘populate’ button.
Step 7
If all's gone well your symbol instances should now have been populated with your JSON data. In my case, I've now got a product listing page full of real products.
Final Thoughts
I've found the Data Populator plugin super helpful for speeding up my workflow when creating any screens that include multiple instances of the same symbols.
It's made my wireframes more representative of the end product, reduces manual data input errors and frees up my time to focus on more challenging tasks.
I'm constantly on the lookout for new tools and plugins, so if you have anything interesting to share or an alternative workflow I'd love to hear from you.
Leave a comment below or give me a shout on twitter.
Image Credits
Header image from the awesome illustration library available at UnDraw.
