Interactive Prototyping with Framer
When it comes to digital product prototyping, InVision seems to be unbeatable with its huge base of users and growth potential. The tool is expected to evolve even faster and stronger after securing $100 million Series E funding, many people believe it now has the ambition of taking over Sketch (might be) and Photoshop (quite hard then).
One of the reasons for InVision’s rapid growth is the ease of use. My first mobile design prototype was built in less than 1 hour and it was decent enough to help me get into the final design competition. In my current company, I still use InVision for most user testings or idea presentations. However, we recently got a new project where most of the interactions couldn’t be prototyped with InVision such as drag and drop. So I gradually lean toward Framer, an awesome tool for interactive prototyping developed by a team in Amsterdam as it gives me a bigger playground and helps me to see my design “live” before it gets developed.
Framer Classic (2016)
The only requirement to use Framer Classic is that you have to code with CoffeeScript (a programming language that transcompiles to JavaScript). I was not entirely sure about the reasons that the Framer team chose CoffeeScript until I came across this post "Why CoffeeScript is still alive" and Framer CEO Koen Bok’s explanation, probably to make it easier for designers who want to program micro-interactions.
In reality, I used the Framer Classic to prototype a web-based application for my company Hivery. There was an interaction, in which the user selected one or more products on the shelf and moved it to a different position on the same shelf or to another shelf. I remembered it took me 2-3 days but I was really proud when seeing the final result.
Framer X (2018)
When I just mastered Framer Classic, the beta version of Framer X was released (mid-2018). It now visually renders React and the users could also import prebuilt components. The problem was that I knew nothing about React.
From January – March 2019, I enrolled in Udacity’s React Nanodegree. It was expensive (equivalent to a Sydney Tokyo round-trip flight ticket), therefore I could not afford to drop the course halfway. There were three assignments: the first one was submitted one month late, the second one was submitted on time and the third one was submitted two weeks before the deadline.
It’s ironic, but as soon as I finished the React course I had no time to further explore Framer X as I chose to write a Dissertation in my last semester. The research project involved AR/VR development, therefore, I switched my focus to Unity and Vuforia instead.