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.