Small Planet

Blog Post

Framer 101

A quick intro to the prototyping tool.

Stephanie Casper

Stephanie Casper

Creative Director

As a Small Planet designer I create a lot of prototypes. I use them to demonstrate animated interactions and to make sure our apps have the most efficient user flows. Prototyping makes for a much easier handoff to developers and helps to deliver a more cohesive user experience.

This is something of a golden age for prototyping tools, there are so many out there to choose from. Some products, like Invision, are very simple to use and do a great job of demonstrating user flows. However, when I want to take a closer look at detailed and complex interaction design, I use Framer.

 

What is Framer?

Framer is a code-based prototyping platform that uses a simplified version of JavaScript called CoffeeScript. Framer promises designers the ability to “design everything from detailed icons to high-fidelity interactions — all in one place.”

Because the application is code-based, there’s a slightly higher learning curve than other programs. Although it helps to have some knowledge of coding beforehand, updates over the last year have made Framer much more friendly to non-coders. Once you get going, Framer provides a handy list of coding shortcuts, code autocomplete, and GUI controls for tweaking animations and basic layer properties.

One of the most exciting aspects of Framer is its almost limitless capabilities. Not only can you create fine grain adjustments on your interactive elements, you can do things like make API calls to populate your prototype with real data, or even integrate with your phone’s GPS or accelerometer.

 

Cross Platform Compatibility and Easy Updates

Cross-platform prototyping is easy with Framer. There are native apps for both iOS and Android, as well as the ability to view on your browser (no downloading necessary).

With the apps, you have the ability to view and download a prototype, as well as preview in real time while you build it.

 

Integration with Design

Sketch files are easily imported into Framer, and any changes you make to your imported Sketch file are effortless to update. Framer also supports import from Photoshop and Figma.

 

Designing in Framer

Framer recently came out with a design component which allows you to draw vector shapes, create and nest layers, add text, and edit object properties.

There are more advanced features, too, like responsive scaling, dynamic positioning of objects, and a pretty comprehensive built-in icon library. Everything you design can be accessed quickly from the code tab, where you can then turn your design into a prototype.

In its current state, however, Framer does not include the ability to create symbols, create new canvases, check spelling, or allow for additional plugins. Overall, the design tool is intuitive and comfortable to use, but it is not a Sketch replacement for me yet.

Want to Learn More?

There are step by step tutorials on Framer’s website, as well as additional links to books and online courses to get you going.

If you get stuck and need help, Framer has excellent documentation and an active online community for discussions and feedback.