With the Data tool, you can add different images and text to your designs to create realistic mockups and prototypes.
Sketch comes with several types of data sources by default, including:
- Text Data: names and cities.
- Image Data: a diverse set of profile pictures for avatars and tiles.
- Linked Data: a set of user profiles that include a picture and a short bio.
The Unsplash plugin comes pre-installed with Sketch, which you can use to search for and insert images from the Unsplash library or an image at random. You can also use data sources using third-party Data plugins.
Adding data to layers
To quickly add data to your Canvas as a new layer, open the Insert + menu in the Toolbar and select Data , or choose Insert > Data from the Menu Bar. Then, select the the text, image or linked data you want to add.
To add data directly into an existing layer, first select your layer, open Layer > Data in the Menu Bar, then choose a Text or Image data type (Sketch will always insert Linked data as its own group of layers).
Keep in mind that you can only add image data to an existing shape or image layer. Similarly, you can only add text data to an existing text layer.
By default we’ll show random data from your data source. However, you can toggle off the Insert Data at Random checkbox in the Data menu to show data in the same order as it is in your source.
Refreshing and disconnecting data
To refresh images or text from a data source, select one or more data layers, open the Insert + menu in the Toolbar, then choose Data > Refresh Data. Alternatively, choose Layer > Data > Refresh Data in the Menu Bar, or press ⇧⌃D (version 87 and earlier: ⇧⌘>D).
To disconnect a data source, select one or more data layers, open the Insert + menu in the Toolbar, choose Data > Disconnect from Data Source. Alternatively, choose Layer > Data > Disconnect from Data Source in the Menu Bar.
Keep in mind that disconnecting a layer from a data source won’t restore its original contents.
Using data with Symbols
You can add multiple data sources to different layers within a Symbol.
To refresh all images or text data that you already have in a Symbol, select it and head to Layer, Data, then choose either Images or Text in the Menu Bar.
You can also add or refresh text data in a Symbol using the Data button in each Symbol override in the Inspector.
If you have multiple images in a Symbol but only want to refresh a single image it contains, expand the Symbol in the Layer List and select the image (or Command-click on it), then click on the Data icon in the Overrides panel in the Inspector. Alternatively, select the image in your Symbol, then head to Layer > Data > Refresh Data from Symbol Source in the Menu Bar.
If you have multiple images in a Symbol, you can refresh them all at once via Overrides in the Inspector — but not one at a time. To refresh a single image, select it in the Layer List (or Command-click the image), then head to Layer > Data > Refresh Data from Symbol Source in the Menu Bar.
Adding new data sources
You can create your own data sources and add them to Sketch via Sketch > Settings > Data.
Creating a new data source
To create your own text data source, create a plain text (.txt) file with each data value on a new line, for example:
Afghanistan
Albania
Algeria
Andorra
Angola
...
For a new image data source, all you need to do is create a folder containing all the different images you want to use, then add it via the Data tab in Settings.
You can use JPG, PNG, TIFF, GIF, and (from v90 onwards) WebP file formats for image data.
Save your data sources in a location that won’t change. If you move a data source elsewhere, you’ll need to add it to Sketch again with the updated location.
Using linked data
For linked data you can use JSON files that combine different sets of data in meaningful ways, making it easier to stress test your designs more realistically.
Creating a JSON file with linked data
To get started, you’ll need a JSON file that contains data formatted like this:
[
{
"Photo": "baobab.jpeg",
"Location": "Menabe, Madagascar",
"Title": "Avenue of the Baobabs",
"Trees": "20 trees",
},
{
"Photo": "laurel.jpeg",
"Location": "Madeira, Portugal",
"Title": "Laurel Forest",
"Trees": "300 trees",
},
{
"Photo": "bamboo.jpeg",
"Location": "Kyoto, Japan",
"Title": "Sagano Bamboo Forest",
"Trees": "2000 trees",
}
]
You can also include nested data structures in your JSON files and use them in Symbols and groups. Use the group’s name as a nested group in the JSON structure. The nested data will appear in a group within each set of data.
[
{
"name": "Anje Keizer",
"avatar": "/Faces/109.jpg",
"location": "Bangkok",
"bio": "Dog lover 🐕, mahjong champion 🀄️, and traveler 🗺 ",
"social": {
"handle": "@akeizer01",
"bio": "Loving life and living in Dallas, go Mavs!"
}
},
]
Add your JSON file via Sketch > Settings > Data > Add Data, as you would with any other data source.
Save your JSON file locally on your Mac — and keep both the JSON file and the images in the same folder. We also recommend resizing your images for better performance.
Using linked data in an existing design
In the Layer List, name layers in a group or Symbol with exactly the same names you’ve used in your JSON data file. Once you’ve done that, select your group or Symbol and choose your new JSON data source from Data in the Toolbar, or via the contextual menu when you Control-click your selection.
If you select a group of layers or multiple Symbols, you won’t be able to apply Linked Data from the Inspector. Instead, apply linked data using Data in the Toolbar, or the contextual menu (Control-click).
Using linked data on a blank Canvas
You can also use linked data to add a new set of layers directly to the Canvas. From the Insert menu, choose Data and select the linked data source you want to use. You can then arrange your linked data as a grid to add more entries, and choose Refresh Data to refresh each layer with new information.
Linking with data plugins
You can also install data plugins just like regular plugins, which will open up a whole new range of data sources for you to use.
If you’re interested in creating a data plugin, check out this handy guide, and our developer documentation.