Designing with JSON in Sketch

I last wrote about using data in Sketch back in 2018. Sketch 52 had just added support for populating designs with a random image selected from a folder of images, or with a random piece of text from a plain text (.txt) file. It was a cool new feature, but was rather limited. There was no way to connect multiple bits of data — an image with an associated piece of text, for example. Sketch 71 added a Linked Data feature — the ability to use a .json file to populate text and image layers.

Let’s take a real example of when this would be useful. Here’s a screenshot from the old Sketch community on Spectrum. The Team list displays the name, username, and image of every member of the team. If we were designing this we’d want them to match up. Even if you’re using made up names and random faces, you would want female faces next to female names, and male names next to images of men.

If we were designing this interface, we would want the name Will Harris to be connected to the username, @willharris, and the right image. Developers work with JSON all the time. JSON is a bunch of key value pairs: the values can be text or a path to an image. In a file I’ll name users.json we can create any linked data we want:

[
{
"username": "@bomberstudios",
"name": "Ale Munoz",
"image": "/ale.jpg"
},
{
"username": "@checkyourvector",
"name": "Anthony Collurafici",
"image": "/anthony.jpg"
},
{
"username": "@nicolas-prieto",
"name": "Nicolas Prieto",
"image": "/nic.jpg"
},
{
"username": "@willharris",
"name": "Will Harris",
"image": "/will.jpg"
}
]

Once you’ve created a .json file, go to preferences and then navigate to the Data tab and click the “Add Data” button and then select the JSON file.

Then just make sure the layer names in Sketch match the names you’ve used in the JSON file. If you’re going to use images, stick them in the same folder as the JSON file so that it’s simple to reference the path to the image.

Now you can try different design options without ever needing to copy and paste any text or images. Change the data in your JSON file and it’ll update it everywhere its used in your design.

The JSON file can also contain nested data:

{
"username": "@ollie",
"name": "Ollie Williams",
"image": "/oliver.jpg",
"location": {
"city": "London",
"country": "UK"
}
}

In this example, to use the nested data, a group inside the user symbol would need to be called location and its text layers would need to be called city and country.

You can choose to insert the data from the JSON file either in a randomised order or in the order used in the file.

The official Sketch documentation has some more info on using this feature.