What’s Framer got up their sleeve?

The Prototyping Tool Wars are in full swing and I am super excited. Prototyping is a very important stage of product design. A quick fidelity prototype can help product teams gauge usability in a very brief time compared to actual development time. In some cases, designers can put together basic prototypes in just a few hours that can be shared with the team and close friends.

Tools are improving and changing constantly. Pixate. Principle. Facebook Origami. InVision Motion. Adobe XD. And my personal favorite: Framer. There has yet to emerge a prototyping tool that is widely accepted and standard. There is no Photoshop or Sketch of interaction design just yet.

When Framer first came out with Framer Studio, I jumped on and started trying to code my prototypes. I found it much easier than playing with Origami’s confusing spaghetti interface.

I had never coded before, but it was pretty straightforward and it was a good excuse to learn a little bit of how code worked. I was able to do things surprisingly quick after a short time. In many situations, I found it quicker to a make functional Framer prototype, that reacts to touch, swipe, scroll than to make an After Effects animation. I could watch on my phone as the prototype project refreshed. No downloading anything. Instant feedback every time you make a change to the project.

Best of all — the community is active. People release modules (kind of like plugins) all the time, which can really save you a lot of work. You can share that project to anybody and they can try out your creation with just a browser on any platform.

So I have a huge place in my heart for Framer. They are a team that clearly has a huge vision for the future of prototyping, they release new and exciting features and improvements often, and the community as a whole is very engaged and ready to help each other.

However — in the back of my mind, I knew that Framer would always be low on the list as long as the interface was pure code. It looks scary. It comes with a learning curve. And most designers will probably avoid it. I thought: Framer just needs to add some simple GUI interface with some shapes that can be dragged around and dropped on the canvas, and some visual options that make something draggable and scrollable. Assuming the code can be generated in the background, a new user can start in his comfort zone and just jump in, creating visually. Add the sticky bar header module or the FAB header and you can have that functionality with very little work. He or she may realize the need for flexibility and will soon begin to peak at the code. The code syntax is almost like reading a normal english sentence. After a while, he or she may hook it up to a real API and watch as his or her prototype is getting populated by real-time data. He or she want to carefully measure how fast testers scroll, and where they touch the screen and have data automatically recorded in a Google Doc.

So I have only one clue that this is what Framer is doing. Visit their website and see the hero video. The light blue square has four drag points on the corner.

I have no information other than this little blue box with white knobs. And I think we should all get excited. Framer is a small, nimble, and passionate team. They do not have to answer to an endless trail of mangers and CEO’s. So they can focus on what is best for their product and the design industry as a whole.

I guess we’ll all find out in two days. What ever it is, I’m excited.

Got any thoughts? Leave a comment. Please show some love and recommend this article.