Design JSON data with Sketch
Often, UI designers are asked to produce a design that involves lists of images and texts. Having a good understanding and control over the data/API that you are designing is crucial especially in web-based products, so let’s see how Sketch JSON plugin can help us do that.
Grabbing data
First we need a JSON file. But any data tables or lists should work(bc we can potentially convert them to JSON).
I picked a free recipe API called recipepuppy.com. If you put http://www.recipepuppy.com/api/?q=burger in the URL, it will come back with a list like this,
Great. Let’s design that.
Designing components
Looking at data, we need a component that will have a place to display thumbnail, title and possibly ingredient. Let’s quickly design a mockup in Sketch.
A tip - Naming your symbols/elements as JSON field name can minimize communication issues in a team or with clients.
Now is the fun part — import that JSON. Clik on the data import plugin by InVision. Install it if you don’t have that.
Once it’s done, it will show you formatted JSON data. Now you can assign fields to your design elements.
Once they are all assigned it will look like this,
Let’s loop through this vertically. You can control the number of iterations and the gutter under Duplicate menu.
After the plug-in runs its script, you will have data that are nicely mapped out for Sketch like so,
After this you could play with symbols, or more plug-ins and etc. This demo design was created in less than 20 minutes. Pretty neat!
Pros and cons
I feel this is more of a bug than a con, but when you assign a JSON field to a nested symbol and duplicate, it does not iterate the list but literally just duplicate the first item over and over.
This could be a bit of a pain when it comes to change the size or dimensions of an element since there are not symbolized.
The workaround I found is to make all the other elements that has nothing to do with the data a symbol and then create elements for the iteration and group them together.
This wouldn’t make them act like a symbol but this way, if you wanted change something you could do it to the group and run the script.
Or, if you feel ambitious, you could write a plug-in to do that for you! I believe you can write that in JavaScript (CocoaScript converts it to Objective C for the application). Check the API out if you’d like.
Pros — obviously the fact that you could work with real data. If you have APIs that you need to design, this is probably the fastest way to produce a hi-fi mockup. Imagine having to manually insert every image and paragraph— and I have seen designers done that in 2017 🤦.
Anyway, I hope my blog is helpful to your project.
Happy coding, designing and building cool stuff!
