How to empower your Sketch designs with real data using JSON

I personally struggled to connect my designs with real data in Sketch. Not because of the lack of tutorials or knowledge out there but because of the lack of updated articles. If you are reading this in a couple of years, the technics described here might not work, but worth to try.

Prerequisites

To follow along the technics I am going talk about, you will need to download couple of things.

• Sketch version 71 or newer
• Visual Studio Code ,Atom or Sublimetext (my prefered editors)
• Sketch plugins: Data Populator , Invision Craft Plugin

How Sketch uses JSON data

The JSON file format uses data_key to which it attributes data_values, you can think of this as a pair. If that’s too complicated, think about this pair as the connection between a physical key and a door. To access what’s inside the door, you need a key to open it. All the keys are grouped together in a key chain. You have different key chains which opens different set of doors, giving you access to different values.

[ //Begin creating an array
  { //Data for design layer group 1
  "data_key1":"string_value1",
  "data_key2":1111222333,
  "data_key3":true
  },
  { //Data for design layer group 2
  "data_key1":"string_value2",
  "data_key2":444455556666,
  "data_key3":false
  }
] //End the array

Sketch look at that same structure in this way:

[ //Begin creating an array
  { //Data for design layer group 1
  "layer_name1":"string value",
  "layer_name2":1111222333,
  "layer_name3":true
  },
  { //Data for design layer group 2
  "layer_name1":"data_value1",
  "layer_name2":444455556666,
  "layer_name3":false
  }
] //End the array

In conclusion, the data_key values in the JSON file are actually our Sketch Layers names.

Technic 1 : Using sketch linked data

The Linked Data technic comes straight from Sketch documentation.

Screenshot from Sketch’s documentation about linked data

There is one big caveat to this technic, which I am here to debunk. All the values in the JSON files needs to be converted to Strings and the images needs to point to a folder.

This is how the JSON file needs to be formatted in order to make this technic to work.

[
    {
        "animal":"Dog",
        "name":"Evelyne",
        "breed":"Cocker Spaniel",
        "gender":"female",
        "fur":"goldern brown",
        "age":"16",
        "image":"/Desktop/DogImages/Evelyne.jpg"
    }
]

As you can see, Sketch needs all the images, booleans, hyperlinks, integers to be converted to strings.

If the image file is in the same folder as the JSON file, you can skip the path to it to only folder name and image name per my example this will look like this /DogImages/Evelyne.jpg.

Link your JSON file by going to Preferences > Data > Add Data

To use this data inside Sketch, all you have to do is to create a group or symbol or just place them all in one artboard with the layers names matching the JSON keys.

If you want to go the extra mile and apply this technic to your design system components and nest infinite amount of data, Sketch documentation got you covered.

To refresh the data that you already linked, all you have to do is to press conveniently Shift+Command+D (⇧⌘D)

Pros:

• Everyone can go and create its own data with its own images without relying on fancy API stuff
• To update the data is super fast and I mean mega fast with ⇧⌘D compared this to some plugins
• Lot’s of Sketch documentation showing variety of examples
• Very good for quick mocks

Cons:

• You can’t use raw API data, since it will contain values that are not strings and Sketch will tell you that you can’t link that file.
• Requires lots of manual work for images such as renaming, organizing etc.

Technic 2 : Using DataPopular Sketch Plugin

As mentioned in the Prerequists of this article, you will need to get the Data Popular plugin first.

Now let’s tweak out JSON data to resemble something that you might get from an API. We are going to make the image to be a link and the age to be a integer, and lastly we will insert a boolean for not particular reason just because we can. Here is how that new set looks like.

[
    {
        "animal":"Dog",
        "name":"Evelyne",
        "breed":"Cocker Spaniel",
        "gender":"female",
        "fur":"goldern brown",
        "age":16,
        "vaccinated":false,
        "image":"https://www.hepper.com/wp-content/uploads/2021/11/english-cocker-spaniel-on-bed.webp"
    }
]

Before we open the plugin and we give it the MyData.json file, we have to make couple of changes to the layers names.

Then select all elements and apply our data.

This is the results after you hit Populate on the modal.

To refresh the content, you will need to evoke the plugin again and press populate again or press SHIFT + COMMAD + X (⇧⌘D). There is also a checkmark in the plugin to Randomize the data if you want something different each time you press populate.

Pros:

• Can use raw JSON data & data endpoints
• No need to group or do other manipulation of the layers to apply the data
• Trim text and create grids if you have lots of repeating content all in one step.

Cons:

• It becomes really slow with heavy imagery datasets
• You have to rename the layers properly and that might not work for components in design systems
• To refresh the content, you have to select the plugin again. Currently there isn’t any shortcuts to do that.

Technic 3 : Using Invision Craft Plugin

I don’t believe this plugin needs too much of an introduction since its the most widely know plugin for sketch.

Disclaimer: The version that I have of Invision Craft only allowed me to have the most simple options of the plugin, therefore I wasn’t able to use the Grid functionality of the plugin which would have taken advantage of the JSON file.

To use it, just go to Craft Sketch Panel and select Data. Navigate to JSON field and either drop your JSON url endpoint or your file (this is what I’ve used).

The final verdict of this technic is:

Pros:

• Can use raw JSON data or data endpoints
• You don’t have to name, group or do anything to your layers. You just select and apply.
• Technically you can populate a grid with the plugin but I didn’t have that functionality to test for this article.

Cons:

• Once the data is inserted in the designs, I was not successful to update it easily.
• Layers must be selected one at a time. It’s unclear how any process of further automation can be achieved in comparison to the Linked Data or Data Populator plugin, therefore don’t recommend this for Design System Components.
• Couldn’t test the Data option in conjunction with the Grid option.

Final thoughts

The Linked Data approach to data population in Sketch is the fastest and more reliable, however it requires quite some setup from renaming the layers to editing your JSON data to strings.

The Data Populator plugin its good and versatile tool which is straightforward to use and don’t require any special setup for your data. Have nice features such as The ability to install it within the Runner Plugin and launch it from there is a nice plus.

Finally, the Invision Craft plugin left much to be desired. It got the job done with a raw data sets, but my testing with it didn’t produce any results that were to the level of the other two technics.