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


Data

The Craft Data tool for Sketch brings real text, images, JSON, and live web content to your prototype, helping you create realistic prototypes without wasting time creating mock data. 

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 (stock email addresses, names, dates, etc.) rather than generic lorem ipsum.
  • Use the Photos tab to add images from a local folder, Dropbox, Unsplash, or the web, allowing you to quickly mock up user avatars, photos, and other elements.
  • Use the Web tab to add 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 import JSON data from public APIs (like Spotify or Dribbble) or from local JSON files.

 

Using the Type tab

You can use the Type tab to insert realistic placeholder text like headlines, email addresses, or custom items.

Inserting placeholder text

To insert placeholder text:

  1. 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 (names, email addresses, etc).
  2. Click the Data icon (data-icon.png), and then click the Type tab.
  3. Click a type item (Headlines, Article, etc.), and then, if required, click a category (Advertising, Beauty, etc.).

The placeholder text should now be inserted into your project.

insert-placeholder-text.gif

Adding a new type item

If you’re looking for a particular type item and you can't find it (for example, phone numbers), you can add a new item.

To add a new item:

  1. Click the Data icon (data-icon.png), and then click the Type tab.
  2. Scroll down, hover over the empty field, and click Add item.
  3. Click the item you want.

You will now be able to use that type item to insert placeholder text.

add-type-item.gif

Creating a custom type item

If you need to use custom data for placeholder text, you can create a new type item and upload your own text.

To create a new type item:

  1. Click the Data icon (data-icon.png), and then click the Type tab.
  2. Scroll down, hover over the empty field, and click Add item.
  3. Click Add Custom.
  4. Enter an item name, choose a symbol, and paste in your text.
    Only one text item should exist on each line.
  5. To enable randomization, uncheck the box Preserve Order.
  6. Click Save.

You will now be able to use the custom type item to insert placeholder text.

add-custom-type-item.gif

Using the Photos tab

Using the Data tool, you can insert placeholder images into your prototype from Unsplash, Dropbox, or a local folder.

Inserting placeholder images

To insert placeholder images:

  1. Select the layers where you want to add an image.
  2. Click the Data icon (data-icon.png), and then click the Photos tab.
  3. To insert a photo, click the Unsplash button, and then click the All Photos drop-down.
  4. Choose a category and click Place Photos.
insert-placeholder-image.gif

You can also insert images from a local folder or Dropbox.

insert-from-folder-or-dropbox.png

To upload from a local folder instead of Unsplash, click the Folder button, choose the correct folder from your computer, and click Place Photos.

To upload from Dropbox, click the Dropbox button, paste in the URL, and click Place Photos.

Adding a new photo item

If there is a particular photo category that you want to access frequently and quickly, you can add it as a new item.

To add a new photo item:

  1. Click the Data icon (data-icon.png), and then click the Photos tab.
  2. Hover over an empty field and click Add item.
  3. Name the item and select a symbol.
  4. In the first drop-down, click Unsplash. In the second drop-down, select a category.
    You can also choose to upload from Dropbox or a local folder. To do so, paste in the appropriate Dropbox link or select the correct folder on your computer.
  5. Click Save action.
add-new-photo-item.gif

To use your new photo item:

  1. Select a layer in your file.
  2. Click the Data icon (data-icon.png), and then click the Photos tab.
  3. Click the new photo item name.

An image will automatically be inserted into your file.

Using the Web tab

With the Web tab of the Craft Data tool, you can insert an image from any web page.

To insert web images:

  1. Select the layer where you want the content.
  2. Click the Data icon (data-icon.png), and then click the Web tab.
  3. Enter a URL and click an image.
    To click a link within the website, hold Command.

The image will automatically be inserted into your file. You can also use the star icon to bookmark your favorite pages.

insert-image-from-web.gif

Duplicating content

Within the Craft Data tool, there is a button labeled Duplicate Content. This button will open the Craft Duplicate tool.

Although Duplicate and Data are two separate tools, they work well together. For example, if you use the Data tool to insert text or images into a layer, when that layer is duplicated, new text or images are generated for each duplicate.

duplicate-data.gif

To learn more, check out the Craft Duplicate guide.

Inserting JSON content

The Craft Data tool also allows you to add content from a JSON object. You can either add JSON data from a public API or import a local JSON file.

The JSON feature only allows for content retrieval and is not a full API client. Only the GET method is supported. Other methods—such as PUT, POST, and DELETE—are not supported.

For a brief overview of JSON and links to other useful resources, check out A Non-Programmer's Introduction to JSON.

Inserting content from a JSON object

To add content via the JSON tool:

  1. Select the layer where you want the content.
  2. Click the Data icon (data-icon.png), and then click the JSON tab.
  3. Enter the URL of the public API endpoint you're hitting. Alternatively, drag and drop a local JSON file into the drop zone. 
  4. Click Import.
  5. Browse through the object until you find a key containing text you want to add or the URL for an image you want to add.
  6. Click the name of the key.

The content should now be added to your selected layer.

add-content-via-JSON.gif

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.

Removing an association with the JSON content does not automatically update the layer. The image or text that was populated by the JSON will remain in the layer until replaced or deleted. 

To unlink JSON content:

  1. Select the layer you want to unlink.
  2. Click the Data icon (data-icon.png), and then click the JSON tab.
  3. Browse through the JSON object until you find the previously linked key.
  4. To the left of the associated key, click the blue X.
unlink-JSON-content.png

Learn something new

Getting Started Guides