"Filling layouts with content, real images and text is a critical step in the design process. It’s not about making things look pretty or more finished. It’s about testing your layouts and visual design in a variety of situations to see what needs to be improved". — Peter Nowell, Sketch Master.

TL;DR We have a shit tonne of free data for designers.

Sketch introduced us to Data in version 52 on Oct 2 2018, which provided designers with a new opportunity to populate their designs with text and images faster and simpler than ever.

There have been many articles published explaining why designers should be using data to improve their designs (I will link to these in the footer). But there is a problem with using data in your designs. We first need to create it to have it at hand when it is required, and this is no small task.

By default Sketch ships with text data for Names and Cities and image data for Faces, Tiles and of course Unsplash. This article will focus on text data.

Creating text data that is useful takes a significant amount of time, from curating, creating, formatting, storing, organising, installing and testing the data. Let’s take something from our currency category for example, on the face of this it appears a simple task, create a list of currency values but the first item to consider is the currency itself, USD, GBP, EUR and many more to consider, Range is also a factor from $0–$100, $100–$1,000, etc. Then there is the value itself, should this be a random value ($49.51) or rounded (£49.00) or even specific ($49.99 or $49.95). Then there is a quantity of data, how much data is a designer likely to require to successfully populate their design and achieve a real and complete design.

The currency, range, value and quantity of data required are all dependent on the current project, and this will be specific to every project.

For non-numerical data, language becomes the key factor, English being the primary language for data, but what about localised versions of all non-numerical data? Given the complexity and time it takes to create data for a specific project, we decided to create SketchAppData to solve this problem; a place where users can have free and instant access to unlimited data sets.

The Format also plays a role in text data, let’s take an example from the Date & Time category. A simple date in the calendar can take make forms, for example, 01 May 2020, Monday 01, May 2020. Monday, May 01, 2020.

To start with we have created 284 data sets across 17 data categories totalling 14,866+ unique data entries to get started ( I think this makes sketchappdata.com the largest data repository for designers currently available).

Sketch Data Categories

  1. Alphanumeric
  2. Animals
  3. Art & Design
  4. Business
  5. Currency (multiple currency, range, value)
  6. Date & Time (multiple formats)
  7. Food & Drink
  8. Identity
  9. Language
  10. Letters
  11. Media (grouped JSON coming soon)
  12. Numeric Digit
  13. Science & Technology
  14. Sport & Leisure
  15. Transport
  16. Travel
  17. Religion

Data is available in TXT and JSON format and can be downloaded for free, without any download limits. All data will be maintained with new data being added frequently.

Using TXT data

Sketch natively adopts TXT data, which is the simplest method of using data in your designs. Users can add a TXT file via the Sketch preferences panel and this data will become available via Layer > Data and the toolbar icon (if the designer has enabled it on their toolbar)

Data inserted via Sketch’s native data tool populates your design with a random entry from your specified data file. In some instances, this randomness could cause an issue for the designer, so when order is important you should opt for using JSON data.

Remember and store your data somewhere sensible and final.

Using JSON data

If you are looking to use data in a more organised method, then JSON is what you need. To use JSON data you need to use a third-party plugin (I have listed many plugins in the footer for Sketch, Figma, XD and Photoshop). JSON data allows the designer to use data that has been arranged into groups, for example, this can be a username matched with an email address or for more complex use-cases you can combine text and image data.

Take a TV App as an example using data in JSON format would allow the designer to populate movie artwork with say movie title and runtime into the correct layers in their design.

Tip: Perfect for day 25 of the UI Design Challenge

Populating Movie Groups using Data Populator plugin with movie-dB JSON file.

JSON Data code sample.

As you can see from the code sample below, we have included many more data points. The JSON file consists of keys and values, where the key is the “title” and the value is the “name” (i.e. Joker), this data is grouped so the plugin can populate your design while respecting the data grouping.

In this snippet, we have included many keys as an example to show how designers can take the data as far as they would like and add as much information as their project requires, including URLs from hosted images.

{
"title": "Joker",
"year": 2019,
"poster": "https://bit.ly/3aKDyob",
"cover": "https://bit.ly/2U284nA",
"genre": "Crime",
"rating": 8.6,
"runtime": "2 hours 2 mins",
"certification": 15,
"director": "Todd Phillips",
"castmain": "Joaquin Phoenix",
"castmainprofile": "https://bit.ly/3aI55Xk",
"castsupport": "Robert De Niro",
"castsupportprofile": "https://bit.ly/30Yp27Z",
"description": "In Gotham City, mentally troubled comedian Arthur Fleck is disregarded and mistreated by society. He then embarks on a downward spiral of revolution and bloody crime. This path brings him face-to-face with his alter-ego: the Joker."
},

JSON data also respects order.

Using JSON via plugins such as Craft by Invision and Data Populator by Christophe Stoll, allow the designer to respect data order. This is important in instances where the designer requires data to be populated in a specific order such as alphabetical or numerical.

Let’s get started?

Check out sketchappdata.com and grab some data files and play around. You can also drop your email address below to subscribe to our future articles and data .sketch file examples to show you how to and how not to use data. We are currently building out the sketchappdata.com/learn page to give a step by step guide on using data.

sketchappdata.com is not affiliated with Bohemian Coding, (we’re just friends)

Data Plugins for Sketch

  1. Data Populator by Christophe Stoll (works with Adobe XD)
  2. Craft by Invision (works with Adobe Photoshop)

Data Plugins for Figma

  1. JSON Populate by Bart S.
  2. API / JSON Sync by Emin Sinani
  3. Data From Local by Ashung Hung
  4. Content Reel by Microsoft
  5. Data Lab by Pavel Kuligin

If we missed a plugin or you are making a data plugin, reach out to us on Twitter and introduce yourself.

Data Tutorial

If you are new to data, here is a great tutorial video from Peter Nowell's Sketch Master course.

Using Real Content & Data

Other great data articles worth reading.

Modern design tools using real data by Josh Puckett

Do more with data by Ale Muñoz

Working with data by Pizza Yap, Meng To