Prototyping Smart Lighting with Framer
A short tutorial on connecting a Framer prototype to LIFX lights.
Here at frog, we’ve been working on a lot of smart home products over the last few years and in particular helping bring a new smart lighting product to market.
With smart home, we don’t really have as many prototyping tools as we do for UI. As an avid Framer fan, I tried to see if I could use Framer to help with the design challenges we had. I was surprised how far you can take it.
To follow along, download Framer’s free 14 day trial.
1. Prototyping the UI
I started off by using Framer for what it’s best at: prototyping interactions such as sliders, micro-interactions and animations.
Shown here is just one of many experiments we prototyped and then did quick usability tests on.
We found coding in Framer really eases our transition when handing over to the dev team, as we’re already thinking in code.
2. Simulating a room
We often working ahead of the technology we’re design for, so we can’t always test with the real thing.
To simulate real lighting in a room, we found a fun workaround. Take 2 photos of a room, one with lights on and one with lights off, and then you can very quickly build a prototype that starts to give you quite a good idea how something might feel.
We used this method to explore various interactions. Shown below is the behaviour of the physical wall switch at different brightnesses to understand how it would feel and help us write the requirements for it.
3. Understanding system logic
A lot of smart home interaction design actually happens at the system level, but how do you communicate and understand that. Functional requirements are a common way of doing that, but often it’s hard to digest.
The UI design is the very visible part, which we’re often very comfortable with, but how do we go deeper?
Shown below are two prototypes exploring different way brightness up and brightness down commands on the remote control could be handled and remembered.
These types of prototypes were really useful to engage with the development team to start discussions to help the design team understand the logic of the system itself.
View Framer prototypes: Model A | Model B
4. Connecting to real lights
After awhile, I started to get more adventurous, and found out that with a bit of Node.js magic (and help from one of our technologists) I could get a Framer prototype talking to some LIFX lights.
Here is an overview of how it worked.
The learning curve for Node is a bit steep, so you may need a friendly Node programmer to help you get started. The core part of this is the Node server which glues it all together.
Note: As Node, framer and the LIFX library are constantly changing, here is just the high-level approach, not full code, which you will need to tailor to your particular needs.
A. Framer to Node with websockets
To handle communication between Framer and Node, we used websockets. Unfortunately, Framer Studio currently doesn’t handle web sockets, so you need to open the framer prototype in a browser.
Add code to index.html
Add the Socket IO library in the header.
<script src="/socket.io/socket.io.js"></script>// Socket code added to index.html file in Framer folder.<script type=”text/javascript”>var socket = io();socket.on(‘connect’, function () {
console.log(‘on connect’);
});function setBrightness(brightness) {
socket.emit(‘brightness’, brightness);}
</script>
Calling it from Framer
This function can then be called simply from within Framer as a normal coffeescript function.
setBrightness(50)B. Node to LIFX
Node is using the node-lifx library to talk to LIFX lights on the same Wifi network. How to use that library is documented very well.
In Node, you can receive the input like so:
io.on(‘connection’, function (socket) {socket.on(‘brightness’, function (brightness) { console.log(“Received brightness: “ + message); // do something - e.g. send to LIFX}});
Be adventurous
Framer is an amazing tool, and something I really enjoyed using. I’m constantly surprised how it helps me in new and different ways.
I hope this article inspires you to try new things out with Framer. Please let me know what you come up with.
Like this kind of thing?
Are you as excited about things like this as I am? If so, then come work with me 🐸. We’re looking for some new colleagues in our office in Munich as well as other locations.
💬 Also, if you’re in the Munich area and would like to know about this project, I’ll be giving a talk about this at the IxDA Munich in December ‘17.
