Prototyping with Framer

I've been experimenting with Framer as a part of my prototyping toolkit lately. I've tried to teach myself how to build things in Framer multiple times over the past couple of years, but the learning curve was always a little too steep for me (and there were other tools like Principle and InVision that I could use to accomplish similar things without all the hassle of learning to code). Framer Studio has made it a lot easier to pick up the program without a ton of development knowledge, and I've really enjoyed using it.

I've built a couple of things, and I'll add more prototypes to this page as I finish them. Feel free to steal the code for your project or send me a message if you're interested in the resources I used to learn how to use Framer.


Hue Lock Screen Prototype

I've got Hue Lights that I usually turn on and off via Echo dots throughout my house. If I'm reading before I go to sleep or watching TV at night, I like to dim the lights. It's cumbersome to dim lights through the Echo's voice controls, so I usually end up opening the Hue app. A lock screen widget would make this task easier.

This is a small prototype that shows what that interaction might look like on Android.

To build this prototype, I used a screenshot from my phone as the background, and built multiple states for all of the Hue components that are triggered when a users clicks the the main button. The yellow light level slider is just another rectangle that I made draggable and constrained within the gray light level container.


IBM Virtual Practitioners Prototype

One of our IBM clients wanted to us to rethink an event experience—that we had originally built for giant 70-inch touchscreen TVs—and come up with a way to deploy the same content on the web.

To get the ideas flowing, I jumped into Framer to think through some different ideas. 

In this experience, a user selects a marketing practitioner and a question they want to ask that practitioner. Then a video plays with the practitioner answering it. On the giant touchscreen TVs the practitioners appeared life-sized for users on the conference floor. Simply scaling down the screen size wouldn't work because we originally designed this for TVs in portrait mode,  

To redesign this experience for the web, I rearranged the content to work on smaller screens and rethought the animations. This is a little flow I was roughing out. It still needs some refinement, but it was a lot of fun to build.


IBM Human Resources History Timeline Prototype

One of our IBM clients wanted to put together a timeline that displayed the history of human resources in corporate America.

I ended up prototyping an idea that explained HR's history with a light IBM touch. The goal wasn't to push a specific software solution, but instead to explain how HR had transformed over the course of time. We also wanted to show that HR was going to continue to transform in the future, as well.

This prototype leverages Framer's slider component. I built multiple states for each "HR era" and triggered a state change based on the value of the slider.