Tools and Tutorials9 minute read

Prototyping with Real Data – A Framer Tutorial

Prototyping with real data can be compared to building something out of LEGO: Instead of working with imaginary, loose shapes, we can use existing components out of the box and build something real.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Prototyping with real data can be compared to building something out of LEGO: Instead of working with imaginary, loose shapes, we can use existing components out of the box and build something real.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Wojciech Dobry
Verified Expert in Design

Wojciech is a product designer and web designer with eight years of experience. He’s passionate about typography and sound design.

Read More

Expertise

PREVIOUSLY AT

Amazon
Share

Framer is one of the most powerful app prototyping tools out there. It can be used to design for any mobile device, from iOS to Android. If you know a bit of programming, its capabilities are virtually unlimited because it’s based on CoffeeScript—a relatively easy programming language. A designer would only be limited by their imagination and coding skills.

Framer - What is it?


To follow this article, you should have at least a basic knowledge of Framer. We will use Design Mode and Code Editor. If you want to supplement your knowledge, you can read our previous Framer articles: How to Create Stunning Interactive Prototypes, 7 Simple Microinteractions to Improve Your Prototypes

Why You Should Use Framer with Real Data

A common problem in designing or prototyping is the lack of real data. When a new function is designed for an existing product, instead of using fictitious content, logical, relevant, and real-looking content can be displayed. It can be any kind of data—user photos, for example. This way, no time is wasted trying to come up with bogus content, and mistakes that come from using invalid data will be avoided. All available data is visible, and it can be established what content may still be needed—as a result, communication with stakeholders and the development team is more effective. It’s also possible to design around different use case scenarios.

When we design a new function, we sometimes forget that not every user profile is complete, not all categories in the store have the same quantity of products, and not every product displays the same data. Prototyping with real data can be compared to building something out of LEGO blocks: Instead of working with imaginary, loose shapes, we can use existing components from the box and build something real.

Let’s Prototype with Real Data!

The real fun in Framer starts when real data that is updated in real time from a database is used. Any kind of data can be applied, for example: user profiles with photos, street addresses, stock quotes, exchange rates, weather forecasts, transaction information— any data that apps typically use. Really powerful product design starts to happen when you combine real-time prototyping with real data. And it will no longer be necessary to use the infamous Latin-esque “lorem ipsum” placeholder text pieces.

Framer prototype combined with Mapbox API by Uber

The API Using Real Data: What Is It? How Do We Use It?

An Application Programming Interface (API) is the interface through which we communicate with applications. Imagine an app as a restaurant. The food is the data and the waitstaff is the API. You ask the waitstaff for the food—that’s all you need to do. The waitstaff (API) and the kitchen (database) takes care of the rest.

It’s all about access to real data that lives in a given database.

What is an API?


Every app has an API that allows data to be captured and displayed. Some APIs are publicly available, and some are used in internal products only.

Publicly available APIs are widely used to build new applications. For example, in order to build a weather application, some weather data is required. With the help of numerous weather forecast websites that share their public APIs, it’s super easy. What’s more, many different APIs can be combined to create a completely new product.

Where Can We Get Real Data? The Open API Lists

There are many publicly available APIs that provide various data. Here is a shortlist of five which are great for prototyping with real data in Framer. Each of these APIs also returns data in JSON format, which can be easily handled in the framework.

Random User – Definitely the best API for beginners. It generates complete, random user profiles, from an avatar to an email address.

User avatars from Random User API

OpenWeatherMap – this is a very easy API to use. It allows you to check the current weather and forecasts in any location. Using this API, we can display data such as temperature, humidity, or wind speed.

Weather forecast app using real data API in Framer

Pokéapi – one of the best APIs created for educational purposes. Looking for something about Pokémon? It can be found here. This is a full RESTful API linked to an extensive database detailing everything about the Pokémon main game series.

Pokémon mobile UI concept using real data API in Framer

Instagram – the first API in the list that requires authorization to use. Its service, however, is very simple. You can get access to all Instagram photos and users and display them in your new app.

Instagram on smartwatch using real data API in Framer

Mapbox – provides a number of incredible services that are easy to integrate with an application, from maps and directions to geocoding and even satellite imagery. Foursquare, Evernote, Instacart, Pinterest, GitHub, and Etsy all have something in common—their maps are powered by Mapbox.

This API is different from previous ones because it does not return JSON files, but gives access to all Mapbox functionality. Mapbox also produced a great tutorial on how to use their API in Framer.

Mapbox maps via API on mobile phones

Random User API Tutorial in Framer Using Real Data

Framer prototype with Random User API data

To understand how to work with APIs in Framer, let’s start with the Random User API. We will need a single app screen—a user list.

Step 1: Design Mode

Design mode in Framer

Here is a list of users containing names, surnames, and avatars. That’s all that’s required. The most important part of this process is to name and group all the elements properly. Avatars and names are grouped in the box layer, and all boxes are grouped inside the list:

Layers in Framer

The last thing that needs to be done in Design Mode is to mark the list layer as an interactive layer. To do that, just click the target icon.

Step 2: Understanding JSON

First of all, it’s necessary to understand what JSON is and how to get it outside Framer. In the Random User API docs, find a request for data from the API. It looks like this: https://randomuser.me/api/?results=20. As you can see, it’s a regular link that opens a JSON file in your browser:

Unformated JSON file in Chrome

As is, it doesn’t look clear at all. To view JSON files formatted properly, use the Chrome plugin called JSONview. With the plugin, the file will look like this:

Formated JSON file in Chrome

Much better. Now it should be easy to read. The file contains the array of results with user data, which was received after asking the API for it. So what is the JSON file? Without going into the technical details, it’s a text file based on JavaScript syntax that contains specific data from a database. JSON can be used in Framer to display data from it.

Step 3: Import the JSON File to Framer

Now, the JSON file can be imported into Framer with a single line of code:

data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

Create the object called data that will contain the JSON file. Use the print function to see if the JSON file was imported properly:

print data

Framer with opened console window

Step 4: Accessing Specific Data from the JSON File

Now go back to the JSON file structure:

JSON file structure

In this JSON file, results is an array that contains more objects. Each object is a different user. First, one of these objects has to be targeted. Use the print function to better understand what’s going on:

print data.results[1] 

Framer console:

{gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"benjamin.petersen@example.com", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

The figure in brackets represents a number of the object in the array. Using data.results[1], access to all of the first user’s data in the JSON file is received.

Then, items like name or surname can be displayed:

print data.results[1].name.first

Framer responds with: "benjamin". Et voila! Access to the data from the API has been achieved!

Step 5: Displaying the Data from JSON

Finally! The only thing left is to display the data. Now, a simple loop that will target all layers from the design mode has to be created. Read more about targeting layers with a loop in this previous article.

We are using x = 0 to target the first object in the array from the JSON data. Then, for each children element of the list, we assign the data from the JSON data. At the end of the loop, we add +1 to use data from the next object in the array:

x = 0

for i in list.children
  i.children[2].text = data.results[x].name.first
  i.children[1].text = data.results[x].name.last
  i.children[0].image = data.results[x].picture.large
  x++

That’s it! Now you can go back to the design mode and play with the design, and the real data will be displayed in your prototype!

Final prototype in Framer

You can download the above Framer file here: https://framer.cloud/djmvG

Instagram API – Real-time Data in Framer

Instagram is an interesting starting point to begin a journey with real-time data. The instructions are relatively easy to follow, and the API provides interesting data – you receive complete access. In this part of the article, the Instagram API is used to build a simple prototype that displays my Instagram profile data: name, latest photo, and number of likes.

Framer design mode vs. real data prototype

Step 1: Get an Access Token

To use the Instagram API, an access token is required. It can be obtained in two different ways:

  1. The most common way is to go to the Instagram for Developers website and follow the instructions. This process might be complicated for non-technical people.
  2. Fortunately, there is an easy and secure way to get it. Pixel Union developed a much easier one-click process: Go to their website and click the Get Access Token button.

Step 2: Enable Cross-domain Requests

After receiving an access token, one little trick is required. Instagram doesn’t allow API requests from your localhost (Framer), and therefore server-side queries must be used. One of them is JSONProxy. Go to their website, paste a request from Instagram API, and hit GO.

JSONProxy website

Once it’s done, instead of using the Instagram API link, the JSONProxy link can be used.

Step 3: Design a Simple App in Framer

Design mode in Framer

There are only three crucial elements in this design: the name placeholder, a rectangle that will display the latest photo, and the number of likes under the image. All of these are marked as interactive layers to be reused in the code editor.

Step 4: Write Four Lines of Code to Use Data from Instagram

Final prototype in Framer: code editor

The flow here is the same as in Random User API. Any user data can be accessed from Instagram:

yourAccessToken = "YOUR-ACCESS-TOKEN"

instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}"

likesCount.text = instagramJSON.data[1].likes.count
name_1.text = instagramJSON.data[1].user.full_name
photo.image = instagramJSON.data[1].images.standard_resolution.url

That’s it! Five lines of code, and you can prototype using live and real data provided by Instagram. Download a working prototype here: https://framer.cloud/iYAXl. (Please keep in mind you have to add your own ACCESS KEY to run this prototype.)

Summary – Pros and Cons

By creating prototypes that use real data obtained through an API from a database, new creative possibilities and the ability to check the product design are brought to light—prototypes that are 100% consistent with the product can be built and new functions tested on real users. With a preview of all data in the system, it is harder to miss an element that must be included in the design, and with access to real data, design mistakes that come from using fake data are avoided.

That said, high-fidelity prototyping in Framer is quite expensive. It takes a lot of tweaking to get the desired effect—which eats up time and money. As shown in the Random User API example, communicating with the API is not difficult, but a great deal of time is still needed to create a great prototype from it.

Nevertheless, when given full measure, it’s certainly worth considering. Happy prototyping with real data!

Hire a Toptal expert on this topic.
Hire Now
Wojciech Dobry

Wojciech Dobry

Verified Expert in Design

Kraków, Poland

Member since November 17, 2016

About the author

Wojciech is a product designer and web designer with eight years of experience. He’s passionate about typography and sound design.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

PREVIOUSLY AT

Amazon

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.