Fun With Framer

Having a clickable prototype as a designer can be essential. It can communicate your ideas to stakeholders, allow you to test or prove concepts quickly, it can allow you to gather feedback and iterate on your ideas. There are many tools for prototyping but recently I began to try one called Framer. Framer is a design tool as well as a prototyping tool. Using Framer as a tool for prototyping completely changes the way you can display your concepts. This tool goes beyond clickable prototypes and enables the designer to create small interactions and animations based on coffee script code which contribute to a fluid, fun, and polished prototype.

Learning framer can be daunting if you don’t have any familiarity with basic code however, there are excellent resources and documentation to help you along the way.

Here are a few lessons I’ve learned from Framer so far:

Label your design files properly:

This is useful not only for Framer but for all design software. It is important to have consistent and clean naming conventions in order to ensure you are animating or adjusting the thing you think you are changing when working in the code. If you have messy groupings and naming conventions you will struggle to debug any issues let alone build working code in Framer.

Put frames around text that you’d like to turn into a trigger:

In Framer you cannot grab text immediately as a trigger in the code. Before you can designate a piece of text as a trigger you must put a frame around the text in the design tab. By doing this you are able to grab the text (and anything else you might want included) in that frame and use it as you would any other design element.

Make sure you use states for repeated interactions.

Define states within your code for a layer you’d like to continue to be able to animate or click on. This is useful for an activated / inactivated button that can be toggled one way or the other.

Focus on animations at the right times:

With this new found super power it can be tempting to animate every little thing at every step of your prototype. In order to have the greatest impact with your interactions, only animate the interactions that provide the greatest value to your user. By doing this you are more likely to delight your user with a novel interaction and less likely to confuse them by having everything move as they navigate your design.

I hope you enjoy playing around with Framer as much as I did!