Connected Prototypes

Creating networked prototypes with Framer and Firebase

Introduction

We’re surrounded by things that talk to other things. Just about every digital service we use communicates in one way or another. It’s happening when you’re sending a message to your friend with Signal, when Instagram uploads one of your photographs to a server, and when your Medium drafts are automatically saved.

If the things we design are meant to communicate, we need to be able to properly explore those interactions in our prototypes. We need prototypes that can communicate with each other. Fortunately, that’s something we can do quite easily with Framer and Firebase. In this tutorial, I’ll show you how in a few simple examples that you can download and try for yourself.

Our Ingredients

1. Framer is one of my favourite prototyping tools. You can download a free trial here.
2. Firebase is a mobile and web application development platform. We’ll use it’s realtime database to allow our Framer prototypes to communicate with each other. You can create a free account here.
3. Marc Krenn has created a fantastic Firebase module for Framer that powers all of the examples below. You can download it on Github.

Getting Started

1. Create your own Firebase account.
2. Download one or all of the Framer prototypes below.
3. (The Firebase module is already included in the prototypes.)
4. Replace projectID and secret in each Framer prototype with the information from your own Firebase account. You can read about where to find that information here.
5. That’s it!

Example 1

In the first example, we sync a single prototype across several devices. When we interact with our Framer prototype, we send a message to Firebase that something has changed. Simultaneously, we listen for changes to the database and update our prototype accordingly.

Download the prototype here.

Example 2

In the second example, we trigger events on one prototype remotely from another prototype. We send a message to Firebase from the controller prototype when the button is pressed and listen for that message on the receiver prototype.

Download the controller prototype here.

Download the receiver prototype here.

Example 3

In the third example, we interact with a single object on two prototypes simultaneously. When we interact with the object on one of the prototypes, we also send the updated coordinates to Firebase. We listen for changes to the database on both prototypes and update the coordinates of the object accordingly.

Download the first prototype here.

Download the second prototype here.

Thank you for your time! Please let me know if you have any thoughts, questions or suggestions for improvements.