I thought about learning a new skill set recently — and I decided to take my prototyping skill to the next level. I chose Framer as the tool then. Actually, I’ve kept my eyes on Framer since the auto-code feature released. But to be honest, I was quite reluctant to try because the license is quite expensive. Moreover, we need to pay the license every year to get the new updates. So, I decided to try Framer with their 8-hours-of-active-use trial. I wanted to see how I’ll be happy using it in the long term.

In 8 hours, I managed to make myself understand some basics and do a mini project. I am very satisfied with Framer. It’s quite easy to use. The auto-code feature helped me to understand the correlation between the code and design. Besides, Framer also has an immense potential to create something complex one. Take a look at what Uber did.

Below I would love to share what I have done in 8 hours with Framer. I hope you can learn something from here, especially if you want to explore Framer in 8 hours to see whether it is fit for you.

Know some basics

time spent: 90 mins

First of all, you can spend around 90 minutes to learn the basics. I won’t explain all the basics one by one here because you can find the complete guide on the official site. You don’t have to read every single thing there. To start, you can just understand the concept of layer, animate, states, and events. Even to get a better understanding of it, you may also try it out with the auto-code feature.

Follow some tutorials

time spent: 68 mins

For the next step, you can follow some basic tutorials by Jay Stakelon on Youtube. In every tutorial, he will take you step by step to recreate interactions from apps like Facebook group and iMessage. The tutorials are heavy on coding but still easy to follow, in my opinion. Though there was some part that I didn’t understand well. At last, I learned a few things which I used on my mini project.

Make a mini project

time spent: 322 mins

Now, it’s time to challenge yourself by setting up a mini project. I used to do it every time I learn something new. By making a challenge, I would feel motivated to find out deeper. But actually, I don’t expect too much by creating something cool and complex one. I would rather start combining things I’ve learned from the tutorials. I don’t want to make it complicated, especially in trial version, you only have a little time. For me, the goal is to feel the sense of accomplishment and happy to continue learning it.

Here I’d like to walk you through how I setup my first mini project for Framer.

First, we can start by imagining any interaction and transition concept by limiting to the things we’ve learned. In my project, my concept is a screen with cards that can be swiped horizontally — then if I tap on one of the cards, it will show the details of the card.

Next, let’s break down the scenario and write it down.
I simply wrote it like this,
→ 1. Start.
→ 2. Show the cards, title, navigation bar & tab.
→ 3. Cards can be swiped horizontally.
→ 4. Tap on one of the cards.
→ 5. Scale up the image.
→ 6. Show excerpts and other details.
→ 7. Close, back to cards screen.
→ 8. End.
Having a scenario will help us to stay on track with the interaction concept we want to build. Use the scenario as the framework. If there is any improvisation during the process, we should stick with the original one. Otherwise, along with the process, we will simply change the main concept, just because we think we have another better idea. You better save other ideas for later if it isn’t inline with what you are currently building.

It’s time to design the screen. You can jump to Framer and do the design there — or you can go to Sketch or Photoshop first. I suggest you make the design in Sketch or Photoshop. Because if you directly go to Framer, you will spend another hours-of-active-use trial only for creating the design. Other than that, ensure that you have read the guidelines how to import the files to Framer. If you design with Sketch, you can find it here. I’ve never tried importing files from Photoshop; maybe I will try and update this post later.

And last, it’s Framer time!
1. First, import your design to Framer. Make sure all the layers you import are in accordance with the scenario. For example, if you have different elements that you want to animate it separately, then those elements should be put in different layers.
2. Next, define the “initial state” for those layers. In my project, it has to start without anything on the screen. Then, I made all those layers hidden by giving the opacity : 0.
3. After that, you can start executing the interactions and transitions one by one based on the scenario you have created.
4. If you want to do some improvisation, please check it first whether it is possible to do it with Framer. Find out how difficult it is. You can google it or find out on Stackoverflow — or Facebook group.

In this case, I was thinking to animate a diagonal line. Luckily, I found an article by Josh Puckett, so I did a little improvisation for the initial transition by using SVG path. For the rest, I just copied all the techniques I had learned earlier to keep up with the time.

You may see my coding is not clean and effective. I was trying to get everything done in a short time.

This is pretty much how I tried Framer in 8 hours. I am glad that Framer is not that hard. Though actually, we can extend the ability to create something difficult and complicated one — we can use it accordingly to our needs.

So, I’ve bought the license — and this will be my new exciting adventure in prototyping.

If you are looking something to expand your skill set. Maybe you can try prototyping (Framer can be one of your options). In some cases, you might find fully-interactive & high-fidelity prototype is useful. It will help you to explain clearly how your design works to your clients, PMs or devs.

If you are conducting a usability testing, especially if your design has some interactions or transitions, then fully-interactive prototype would be helpful in digging deeper and precise insights.

Have any suggestions or questions? Feel free dropping it on comment section, I’d love to answer all the questions. Let’s learn together!

Thanks to:

1. Framer.js for people who think things like Framer.js are weird and hard by Sean Mateer
2. Working with SVG Paths in Framer by Josh Puckett
3. Framer publication