Connecting Two Prototypes Using Framer Studio & Firebase

I recently worked on a UX project where we prototyped a big-screen app for a UK TV channel. To provide a realistic user experience, the prototype was controlled via a TV remote (and not a mouse). Although this prototype wasn’t built using Framer Studio, it did inspire me to see if I could test my Framer prototyping skills and develop a simple, ‘connected’ prototype.

Framer Studio & Firebase

I scoured Medium, and as you would expect, a few people had tried something similar. Several articles demonstrated how you could use Firebase with Framer to bring your prototypes to life with ‘real data’.

More interestingly, you could also use it to maintain state. This was exactly what I needed to bring my prototype to life.

Prototype Functionality

My project consisted of two simple Framer prototypes. The first, a light switch and the second, the light bulb itself. The light can be toggled on/off remotely by the switch.

Prototype Video Walk-through

Framer London Meetup

Concluding Thoughts

Although this is an overly simple use case. It demonstrates how you can connect two prototypes using Framer and Firebase to maintain state. I had fun creating it and learned a little more about CoffeeScript and Framer along the way.

Feel free to download the Framer source code and reuse in your project.