FramerJS versus Principle for Mac
I am going to attempt to answer a question that I’ve seen asked a few times online, and have been asked a few times in person in regards to creating interactive prototypes
“Principle for Mac, or FramerJS, and why?”
If you are not already familiar with these two prototyping tools I will attempt a brief overview of them from the information on their own websites below;
“You need the potential to design something completely new. Prototyping shouldn’t limit you. Framer is a prototyping tool that uses code to make anything possible. Pioneer new patterns and make groundbreaking design. Find the best solution, not just the expected one”
“Principle makes it easy to create animated and interactive user interface designs. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.”
An important distinction to make between the two is that FramerJS requires you to code, and Principle for Mac does not allow you to code. There are obvious benefits to both, so I created this comparison.
I will offer some clarification on some of the points above. FramerJS uses CoffeeScript, which is a compiled version of Javascript, and while it’s a steep learning curve it is potentially not as difficult as learning most languages for development. Principle has no code, so it’s really simple to start using it.
Principle is limited in what you can achieve, such limitations include simple things like implementation of basic logic through an if statement. I was recently asked by a colleague to replicate the scroll behaviour of the Android eBay app, and this was a great example of something I personally am not able to achieve using Principle, and while it’s crude (you need to hold your mouse down as you scroll for it to work properly!) it gets the point across perfectly well to a stakeholder.
The amount of support networks that are available, and the involvement of the community members seems to be far greater for FramerJS. Such groups as Facebook FramerJS, the dedicated Slack channel, and the regular meet-ups that are put on around Europe and the US. The shining star of support for FramerJS is the ability to grab any example from the numerous websites around, download it with a tap on the ‘OPEN’ button in browser, and see / re-use the code, this is something Principle is a long way from achieving in my opinion.
Another huge benefit which FramerJS holds over Principle for Mac is the ability to hand a developer some actual code that they can read, and take instruction from. It’s handy to be able to see animation timings / delays etc, and be able to easily slow these down so you can very simply see what an animation should be doing. Here is an example of a menu button I recently created in Principle first, and how I gave instruction to one of our developers using FramerJS.
After the development began, I realised I shouldn’t have made a huge assumption — don’t expect the developers to nail an animation without giving specifics! The testflight version of the new menu button that I received was very accurate in terms of visual design (shoutout to Zeplin!) but the animation was pretty far from correct. So I jumped into FramerJS and created this, and then slowed it right down to this. The major benefit of doing this was that I could also hand the developer some code!
Conclusion
I use Principle for Mac on a daily basis to create simple interaction which involves the movement of UI objects when a user taps a button, uses a simple paging mechanism, or a simple scroll function. When I find there is a need to create something which includes any basic logic, or when I need to give a developer some very precise instruction for an interaction, I switch to FramerJS. Use both programs, because they are different! And if you are like me, you will find yourself naturally switching between them most days without even thinking about it.
