Data

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

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.

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.

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.

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.

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.