In the quest of making Framer my prototyping tool

I want to make Framer my go to prototyping tool. This is the first blog of many that will highlight the ups and downs of this journey. These posts will not be tutorials but rather recaps and useful links.

In the last few months have gone back and forth on whether or not I should invest time in learning Framer. As a designer I use Invision/Marvel for showing flows in products I am building so that they could be use for testing. For 80% of the time, it is fine these serve as artifacts that I use to prompt questions. What about the other 20% of the time? That’s where I use the line “oh, this is only a prototype, imagine that this worked like this” I know I can do better.

Why Framer?

There are many prototyping tools out there: Principle, Flinto, Origami. I am currently already using Principle. I like how easy to use Principle is. What I don’t like is how clunky it is to share prototypes. You need to get people to download a viewer or it can run on Macs if you export it out as an application. But then people need to disable security so that they can run the prototype. It is not as smooth as I would like. I am considering Framer because I think it is easier to share the final result. On devices you can download the Framer app to run the prototype. You can share the prototype via the web because it can run in browsers. Finally there is Handoff to help ease translation from prototype to code.

Why not do it in code?

I used to be a programmer so the thought of prototyping in code is not too far off. The problem is that with prototyping for the web/iOS/Android means that are a lot of platforms to master. For example I know how to make sticky headers that change size based on scroll position on the web but I don’t know how to do it in Android/iOS. I think that using Framer would be a faster way to express what I want to happen rather than trying to replicate it all in code that would get thrown out in the end. I also understand the irony that I am learning a new language to avoid programming.

I also think that if we only try to make things that code allows us to do currently would potentially limit how we design digital products.

Areas of Focus

Here are the topics I hope to cover in no particular order in the next 2 months. I’m timeboxing this to 2 months so it keeps me focused but enough time to tackle this without burnout. I am not sure if all of these things are possible with Framer or it might be wishful thinking.

  • Can I do the same things I do with Invision so that I can replace it with Framer?
  • Can I replicate Airbnb listing pages? Sticky side bar with a parallax header, you can’t do that with Invision
  • Form entry — not glamourous but it is a real life task. How can Framer make prototyping it easier? Native keyboard input in iOS and Android?
  • How good is Handoff in real life with developers?
  • How is user testing with Framer prototypes?
  • Can I make something like Snapchat using camera and dabble with augmented reality?
  • Using the accelerometer
  • Something with SVGs
  • Continuous progress bars (horizontal)
  • Maps with pinch and zoom and dynamic markers and data

Follow me if you want to see my journey in this space.