Craft - Introduction to the Data plugin

The Craft Data plugin brings real text, images, JSON, and live web content to your prototype, helping make your prototypes feel real without laboriously crafting mock data within the app. 

With Craft Data you’ll be able to:

    • Use the Type tab to insert placeholder text based on realistic data (e.g. inserting stock email addresses, names, dates, etc) rather than generic lorem ipsum.
    • Use the Photos tab to replace layers within Photoshop or Sketch with images taken from a local folder, Dropbox, Unsplash, or the web (only available if using Sketch), which allows you to easily insert images for things like user avatars, photos, and other elements where you want to use rich content when building prototypes.
    • Use the Web tab to load in content from live websites, such as a list of headlines from online articles, or photos from a specific webpage.
    • Use the JSON tool to bring real data to your text/shape/image layers in Sketch by importing JSON data from public APIs (like Spotify or Dribbble) or from local JSON files.



How to use the Data plugin

Inserting placeholder text using the Type tab

To insert placeholder text:

  1. Add or select the text layers you want to replace with simulated data. Select only those layers you want to replace with a particular type of data (e.g. email addresses).
  2. Click on the Data panel in Craft toolbar, then click Type in the Custom tab.
  3. Click on the type of data you want to substitute.

You will then see your text layers replaced with random data of the type selected.

You can also add custom types of text to insert if you have something project-specific you want to substitute in randomly. To do that: 

  1. Click on the Data panel in the Craft toolbar, then click Type in the Custom tab.
  2. Scroll down, hover over the empty slot, then click + Add Item.

  3. Choose the item you want to add from the list, or click + Add Custom. 

If you chose to add custom placeholder text, enter a name for the custom item, paste in or enter the items from which you want to randomly select, and place each item on a new line. You can then use that custom type just like one of the types of text.


Inserting images using the Photos tab

To insert images:

  1. Add or select the layers you want to replace with photos.
  2. Click on the Data plugin in the Craft toolbar, then click Photos in the Custom tab.
  3. Select your source. You can also select one of the custom Photo options, by hovering over the blank box and click +Add Item. You’ll be able to choose from options such as Dogs, Desert, Family, Landscape, and more. Then click Save Action.

You will see all of the selected layers replaced with photos pulled from your source.


Inserting web content using the Web tab

To insert web content:

  1. Select your elements.
  2. Click the Data panel, then click the Web tab.

  3. Enter a URL and click on an image. (Hold the Command button to click on a link within the website.)


Duplicating content within the Data plugin

You can use the Duplicate Content button within the Data plugin to replicate layers, and we also have a dedicated Duplicate plugin.

In Sketch, be sure you're using the Duplicate plugin to duplicate content rather than Sketch's native duplication option.

In Photoshop, you'll need to duplicate the layers, select the layers to which you want to apply Type or Photos, and re-apply. That will generate new content for all selected layers.

Currently, the option to insert content from the web is only available in the Sketch version of Craft due to limitations in Photoshop.


Inserting JSON content

The JSON plugin is meant to retrieve content and isn't meant to be a full API client. Other methods, such as PUT, POST, DELETE, etc aren't generally associated with content retrieval and thus aren't supported. Only the GET method is supported. 

Caution: If you're not familiar with JSON, you might take a look at A Non-Programmer's Introduction to JSON which explains basics of JSON and links to a few other useful resources.

To pull content from a JSON object, you've got two options: pull JSON data live from a public API or import a local JSON file.

Inserting content from a JSON object

To use the JSON plugin:

  1. Select the layer you want to update from the JSON object.
  2. Click the Data panel, then click the JSON tab to show the following pane:

  3. Enter the URL of the public API endpoint you're hitting or drag and drop a local JSON file into the drop zone. See an example URL below.
  4. Click Import to process that JSON.
  5. You'll be shown a tree view of the JSON object and you'll be able to expand/collapse keys which contain sub-objects as shown below:

  6. Browse through the object until you find a key containing text you want to insert into the selected text layer or a image-containing URL if adding an image to a shape layer.
  7. Click the name of the key to associate it with the selected layer.

Unlinking content from a JSON object

If you've previously linked a layer to a key via the JSON plugin, you can remove that association. To do so:

  1. Select the layer you want to unlink.
  2. Click the Data plugin in Craft, then click the JSON tab.
  3. Browse through the JSON object until you find the previously linked key.
  4. Click the blue x to the left of the associated key to remove the prior association.

Example: Using Spotify API to pull album data

For sake of example, say you're building a mockup for an app that involves music. You might want to quickly build a view showing some album covers, the album or song names, when they were released, etc. You can use the JSON plugin and the public Spotify API to help do this quickly:

  1. Open a Sketch file and add a rectangle shape layer for the album cover art and a text layer for the name of the album
  2. Select the shape layer that will contain the album artwork
  3. Click the Data plugin in Craft, then click the JSON tab.
  4. Enter https://api.spotify.com/v1/artists/22bE4uQ6baNwSHPVcDxLCe/top-tracks?country=US in the URL field.
  5. Click Import to return a JSON object containing the most popular songs by The Rolling Stones using the Spotify API.
  6. Navigate through the JSON object until you've expanded tracks[0].album.images[0]
  7. Click the url key to update the selected shape layer with the album artwork for the specified track.
  8. Leave the JSON plugin pane open and select the text layer that will contain the album name.
  9. Navigate through the JSON object to open up tracks[0].album again.
  10. Click the name key to update the selected text layer with the name of the album for the specified track.
  11. If you want to change this to the name of the track, click the blue x to the left of the name key to remove the prior association.
  12. Collapse the album object in the JSON view and then click on name in the main tracks[0] object to update the text layer with the name of the song instead.

JSON Frequently Asked Questions

How can I use APIs which require an API key or authentication?

At this time, authentication isn't supported by the JSON plugin. If the API you're trying to use requires authentication, you will be unable to pull content from it. If it requires an API key, you may be able to access the API if it allows passing the API key as a URL parameter but if it requires the key be passed in the body of the request or as a separate header then it won't work.

Though you can't access these APIs directly, the JSON plugin does let you import a local JSON file so you could use another API client to make your request, save the JSON file locally, and then reference it as a workaround.

Can I set custom headers on my API request?

You cannot set any custom headers on the API requests generated by the JSON plugin.

If I Duplicate an element that's been associated with JSON content, will it automatically update?

At this time, the Duplicate plugin will detect peers found within the same parent key and randomly pull those other keys during duplication. However, this may not always work as expected in particularly complex JSON objects if the selected key is deeply nested within multiple arrays or if the parent object is too far removed.