Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


The Craft Data tool for Sketch 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. 

If using Photoshop, check out the article Craft Data for Photoshop.

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 with images taken from a local folder, Dropbox, Unsplash, or the web, 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 web page.
  • Use the JSON tool to bring real data to your layers by importing JSON data from public APIs (like Spotify or Dribbble) or from local JSON files.



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 the Data panel in Craft toolbar, and then click Type in the Custom tab.
  3. Click the type of data you want to insert.

You will then see your text layers populated 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 populate in randomly. To do that: 

  1. Click 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 the Data tool in the Craft toolbar, and 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 an image. (Hold the Command button to click a link within the website.)

You can also use the star icon to bookmark your favorite pages.

Duplicating content within the Data tool

You can use the Duplicate Content button within the Data tool to replicate layers using the Duplicate tool. Be sure you're using the Duplicate tool to duplicate content rather than Sketch's native duplication option.

Inserting JSON content

The JSON tool 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. 

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 tool:

  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 an 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 tool, you can remove that association. To do so:

  1. Select the layer you want to unlink.
  2. Click the Data icon (data-icon.png) 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.

Learn something new

Getting Started Guides