Great Data Sources to Breathe Life Into Prototypes

In the most recent article Design With Live Data we wrote about live-data prototyping in Adobe XD. In the example we show you how to breath life into your prototype through real data from public APIs.

What if you would want to bring in data like music from sites like Soundcloud, news from Yahoo Finance, Bloomberg or photos from Instagram profiles? What if you would want to actually search Soundcloud or Bloomberg for the right music or news articles?

That sounds pretty cool, doesn’t it?

How to get to the actual data?

The more complicated way: Open up an web service and then look up the APIs calls that your browser does when the site loads and builds up. Whether you will see the actual URL that the client (your browser) calls up depends on the technology that the site uses.

It may happen that, even if the site is mostly API based, you won’t find the actual server call. The reasons for this are manyfold. One aspect is, of course, the fact that the site owners don’t want random strangers to scrap data off their site.

The simple way: Use our sheet on Google Sheets.

Use our sheet! No effort required.

The idea here is to import data into your UI prototypes through Adobe XD, Figma or Sketch. In the most recent article Design With Live Data you’ll find a step-by-step process on how to set up the XD file, Google Sheets and import the data.

Now, for the data.

Below you will find a few more data sources that you can use to breath life into your prototypes. We have combined all sources into 1 single Google sheet.

In order to actually import data from that Google sheet, first you have to reference the respective data in other tabs (Soundcloud, Yahoo…) from tab “XD” (the very first tab). Hence, before using the XD plugin, go in to the first tab called “XD”, type “=“ and then navigate to the respective data tab you want to import. For details on how to do this, please refer to our recent article Design With Live Data.

Yahoo Finance

We found an API call that allows you to pull all articles with title, description and link for a stock ticker you enter, here “NYSE-BABA”. “NYSE” is the exchange, “BABA” the respective stock ticker. For example, the complete symbol for Apple would be “NASDAQ-AAPL”. To the find the ticker, go to tradingview.com and search for a company. Then copy + paste the complete ticker.

Bloomberg

The data tab for Bloomberg is very static unfortunately. You will find about 50 articles updated on a daily basis.

Instagram

We would expect that many folks and designers will love this.

Through this sheet you can pull images or any other data for that matter from any Instagram user. The pity is though that you have to replace the actual API call. It’s not possible to simple enter the instagram username, at least not in our sheet (at the moment).

If you are looking other types of images, replace the URL in cell "A4" (for Instagram) in the tab "APIs" with the following ones:

• For beautiful images of cooked food -› keep the current URL**
• For images of cars -› copy and paste this URL
• For images of gadgets -› copy and paste this URL
• For beautiful landscapes of planet earth -› copy and paste this URL

Give it a try with prototypes into which you want to import images.

If you seek to find your own data sources, make sure to read our most recent article Design With Live Data which explains every step in detail.

Thanks for reading.