UX + Design

Motion Design using Framer

Motion Design using Framer

Movement and interactivity improves user experience, making sites and apps more engaging and memorable. 

Currently I'm using Sketch to create mockups, and presenting them to clients and developers via Invision. Both of these tools work seamlessly together and are great at presenting ideas clearly. However, animation is still to be introduced on those apps. I decided to try out Framer which happens to work well with sketch. 

Framer is an application that allows a user to enter Javascript to create interactive prototypes, and by entering the code yourself, it allows for a lot of flexibility. Many other apps have drag-and-drop functions which are great, however, being able to sharpen your Javascript skills while creating detailed interactions on your prototype is the best way to design. 

Framer interface
via: https://goo.gl/zRC85C

It can be a little daunting to add another layer to your design process, especially when learning a whole new tool. Much to my surprise, Framer makes it pretty easy to get started with lots of documentation and tutorials.

Framer uses CoffeeScript, which is like SASS for CSS. It's simpler then JavaScript because it gets rid of a lot of the complicated code that JavaScript uses. 

For example, here’s how you can make a circle with CSS:

A circle in CSS

.circle { width: 200px; height: 200px; border-radius: 100px; background-color: red; }

Here’s how you can make one in CoffeeScript with Framer:

A circle in CoffeeScript with Framer

circle = new Layer width: 200 height: 200 borderRadius: 100 backgroundColor: “red”

You don’t need to have mastered JavaScript before trying out Framer, but a basic understanding of CSS is necessary. Framer did a great job a supporting it's users with great documentation. You get a free trial, so why not give it a go. 

Sketch app and Framer:

It’s pretty easy to import a file into Framer from Sketch. There is a import button that automatically selects your open sketch project. 

Image showing how to import document.
via: https://goo.gl/zRC85C

There are a few things to note when creating your mockup on Sketch.

Consider the actions of each section of your design. Each section should be organized, grouped, and labeled properly. It's very useful to go through at least a couple of the tutorials offered on Framer's site. This way you get to see how the Sketch file is formatted. 

Sketch and Framer interfaces side by side
via: http://framerjs.com/learn/import/

I did find it a bit odd that you couldn’t just choose the project you want to import from a list, or something like Sketch, that you can import whole projects into Invision with InvisionSync.

Is there value in using Framer?

Designers being able to test interactions before sending it to developers is invaluable. Also, communicating very clearly on what the expected final result, is an excellent way to keep your project on track. 


Up Next

Ready To Get Started?

Schedule a complimentary 30-minute strategy consultation with one of our Drupal experts as early as today. We promise...they don't bite!