Craft data tool
  • 15 Feb 2023
  • 4 Minutes to read
  • Dark
    Light

Craft data tool

  • Dark
    Light

Article Summary

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. 

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. Select the Data icon (data-icon.png) in the Sketch toolbar, and then select Type.
  3. Select a type item (Headlines, Article, etc.), and then, if required, select a category (Advertising, Beauty, etc.).

The placeholder text should now be inserted into your file.

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. Select the Data icon (data-icon.png) in the Sketch toolbar, and then select Type.
  2. Scroll down, hover over the empty field, and select Add item.
  3. Select the item you want.

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

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. Select the Data icon (data-icon.png) in the Sketch toolbar, and then select Type.
  2. Scroll down, hover over the empty field, and select Add item.
  3. Select Add Custom.
  4. Enter an item name, choose a symbol, and paste in your text.
    Note: Only one text item should exist on each line.
  5. To enable randomization, uncheck the box Preserve Order.
  6. Select Save.

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

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. Select the Data icon (data-icon.png) in the Sketch toolbar, and then select Photos.
  3. To insert a photo, select Unsplash, and then select the All Photos drop-down.
  4. Choose a category and select Place Photos.

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

  • To upload from a local folder instead of Unsplash, select Folder, choose the correct folder from your computer, and select Place Photos.
  • To upload from Dropbox,select Dropbox, paste in the URL, andselect 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. Select the Data icon (data-icon.png) in the Sketch toolbar, and thenselect the Photos tab.
  2. Hover over an empty field andselect Add item.
  3. Name the item and select a symbol.
  4. In the first drop-down,select Unsplash. In the second drop-down, select a category.
    Note: 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. Select Save action.

To use your new photo item:

  1. Select a layer in your file.
  2. Select the Data icon (data-icon.png) in the Sketch toolbar, and thenselect Photos.
  3. Select 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. Select the Data icon (data-icon.png) in the Sketch toolbar, and thenselect Web.
  3. Enter a URL andselect an image.
    Note: 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.

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.

NoteThe 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. Select the Data icon (data-icon.png) in the Sketch toolbar, and thenselect JSON.
  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. Select 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. Select the name of the key.

The content should now be added to your 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.

NoteRemoving 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. Select the Data icon (data-icon.png) in the Sketch toolbar, and thenselect JSON.
  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

Read Sketch's documentation to learn more about the Sketch toolbar and how to customize it.


Was this article helpful?