Data

With the Data tool , you can add different images and text to your designs to create realistic mockups and prototypes.

There are a number of Data sources included in the Mac app by default, split into two types:

• Text Data: real names and cities.
• Image Data: a diverse set of user photos for avatars, and tiles (for patterns).
• Linked Data: a set of user profiles that include a picture and a short bio.

You can take things further with more complex Data sources using third-party Data plugins. By default, we’ve pre-installed the Unsplash plugin, which allows you to search for and insert an image from the Unsplash library, or insert a random image.

Working with Data

Select the shape or text layer you want to add Data to, click on the Data button in the toolbar, or choose Layer > Data, and select the type of Data you want to insert.

By default we’ll show random Data from your data source. However, you can toggle the Insert Data at Random checkbox in the Data menu to show information in the same order as it is in your data source.

How to Refresh and Clear Data

Press ⇧⌃D (In version 87 and earlier: ⌘⇧D) or choose Refresh Data from the Data menu to fill your layer with different images or text from your Data source.

To remove the connection between your Data source and a layer, click Disconnect from Data Source in the Data menu.

Note: Disconnecting from a Data source won’t restore your layer’s original contents.

How to Use Data with Symbols

You can add multiple Data sources to different layers within a Symbol and refresh them all at the same time.

You can also add or refresh Data within a Symbol using the Data icon in each Symbol override.

Adding New Data Sources

You can create your own Data sources and add them to the Data tab in Settings.

Tip: Make sure to save your Data sources in a place that won’t change. If you move the location of your Data sources after you’ve added them, Sketch will not be able to find them.

Creating a Text Data Source

To create your own text Data source, create a plain text (.txt) file with each data value on a new line:

Afghanistan
Albania
Algeria
Andorra
Angola
...

Creating an Image Data Source

For a new image Data source, all you need to do is create a folder with all the different images you want to use inside and add it via the Data tab in Settings.

We currently support jpg, png, tiff, gif, and (from v90 of the Mac app) webp image file formats.

Linked Data

With 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.

Getting started with Linked Data

To get started, you’ll need a JSON file that contains the data you need. The format should look something 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 into 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 as a data source in the Mac app in the Settings window as you would with any other data source.

Note: Make sure to save images in your JSON file locally on your Mac. Keep both the JSON file and the images in the same folder. We also recommend resizing your images for better performance.

Using Linked Data

Using Linked Data in an existing design

Name the layers in a group or Symbol in your design 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 the Data toolbar item or via the contextual menu when you control-click your selection.

Note: If you select a group of layers or a Symbol, you will not be able to apply Linked Data from the Inspector. You can only apply Linked Data from the toolbar item or the contextual (Control-click) menu.

Using Linked Data on a blank canvas

You can also use Linked Data to add a new set of layers directly to the Canvas. Choose Data from the Insert menu 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.

Data Plugins

You can install Data Plugins just like regular plugins and they’ll 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.