Introduction

So far, there have been several prototyping tools that I have come across that could help me express my ideas during the UX process. Out of many great tools out there, Framer caught my interest and through time, it helped me to not only create interactive prototypes, but also to boost my ability to understand and write code.

While reading through many Framer-related articles, I discovered that there weren’t many written from the perspective of students who are just beginning to learn about UX and about prototyping. So, I thought writing one that explains the benefits of using Framer could capture the interest of students in UX.

Why Framer might be the right tool for you

What Framer looks like — and it’s the new look!

With my own experience of collaborating and communicating with other students and professionals in this field, I’ve discovered that Framer is in fact, one of the most commonly used prototyping tools in the industry. For the students, getting to know any of the trendy tools in UX is often very important and often necessary.

Below, I’m going to list some of the reasons why I think Framer is awesome for YOU!

#1. Framer allows you to familiarize yourself with code

Out of many other great prototyping tools out there, Framer is very unique that it inspires you to do some coding. Yes, there are some controversies as to why UXers (mostly designers) need to know how to code but I personally believe in power of being familiar with code for these reasons:

• Effectively and efficiently communicating your ideas to others (ex. developers) and handing off the details

• Unleashing your uncovered creativity through code (ex. writing codes for micro-interactions, animations and in-depth user experiences)
• Developing logical thinking skills (ex. how each steps work and why)

In Framer, the code you write is directly applied and can be viewed for a demo (unless your code is broken!). When I first tried out Framer, I was amazed at how I could write simple lines of code and view the result in real-time, simultaneously. Gradually, with countless back and forth on the documentation and help from online resources, I became more and more confident about conveying my ideas through code. It has been a great experience for me to apply my immature coding skills and still be able to make something interactive.

Framer is like a waypoint for any students (who are not developers) to become familiar with coding

*Personal Note: Getting familiar with code doesn’t mean that you need to write clean and effective code but rather, conveying your unique idea across is more important for a prototype. So, don’t be afraid to start writing some code!

#2. Directly import layers from Photoshop, Sketch and Figma

Typically for school projects (and in the industry), prototyping starts as some of the design parts are being finalized or at least developed to some degree. And due to the iterative nature of UX, design and prototypes generally bounce back and forth in order to create a better user experience for the product. Therefore, importing fluid design assets into a prototype is much less time and effort.

Easy import process from several design softwares to Framer

What’s neat about Framer is that it allows you to import the design files created in other design software, like Sketch or Photoshop (which are two commonly used ones). As long as the design software is open, Framer takes the currently opened file and imports every asset that is grouped correctly.

*It’s also possible to import each separate design (image) files into Framer

Instead of exporting every images from the design tools, Framer can directly import whatever you need to make the prototype.

How to import assets in design tools to Framer:

#3. Enhance your knowledge by downloading other people’s work

In Framer, when the prototypes are developed, there’s an option to share it with other people through Framer Cloud. Given the URL, anyone can play around with the prototype. What’s cool about Framer is that it also gives you the option to download Framer files onto your computer to dissect and analyze other people’s work. Therefore, it’s possible to glance at the code and possibly reuse some of their knowledge (design, interaction etc.)to help out with your own projects.

Download button in Framer Cloud

You can also upload your work to share with other people for feedback. This is especially helpful when you’re stuck on something or when you just need some advice.

#4. Existing modules that help you save time

Along with the option to download other people’s work and reuse parts of their strategy (code), there are a lot of existing modules online that can help shorten your initial setup process.

How some designers used extended modules to build creative things:

A few places to download existing modules:

How to develop a Framer Module:

#5. Extremely active and helpful community

Framer has a very lively and active online community on Facebook. I personally received a lot of help by simply posting a question when I was stuck. It normally takes only a few minutes for at least one person to help you out with whatever question you have during your process.

What Framer Facebook group looks like

For me, there are three main reasons I love this online community:

• Regardless of what level your coding skills are and how fancy your prototypes are, you can always ask for help when you’re stuck and get some valuable feedback along the way.
• View other people’s work, try them out and download them for inspiration and to reuse or tweak their code to make your prototype better.
• Meet new people and sign up for any offline events or online streams.

Currently, there are over 20,000 members from all over the world who are passionate about creating a better user experience from all angles.

#6. Proving your ability to potential employers

Being able to create a prototype is not magic. However, it could be beneficial as a student to know how to use at least one prototyping tool when applying for internships or full-time jobs. For me, by learning Framer and creating several prototypes with it, I was confident enough to list this fabulous tool on my resume in addition to my portfolio website.

Reflecting back on when I was conducting my internship interviews, I recall some of the interviewers asking me about creating prototypes . When I guided them through my experience of using Framer to create prototypes for my portfolio projects, they were not only convinced that I knew the tool but also told me that their company uses Framer. Therefore, it was a moment where I was able to shine and feel assured that learning Framer was definitely worthwhile.

Let your potential employers know that you are able to write and understand code and that you can develop prototypes to express your ideas.

#7. Useful for showcasing your project

You’ve probably taken a glance at other people’s portfolio websites for inspirations. During my own exploration, I discovered that embedding the link to letting the visitors try out the prototype could be very powerful and informative for showcasing purposes. Also, I thought it was a smart way to explain the functional aspect of your hard work and your thorough process.

Example of embedding Framer prototype into a portfolio website

How to embed your Framer prototype using iframe:

#8. Abundance of resources online

Lastly, I would like to introduce a compilation articles that I’ve personally came across about Framer. These articles are all worth a read and I guarantee that they will ignite your interest and experience in Framer.

The story of a designer conquering mathematics by Jinju Jang

Writing Better (and Worse) Code In Framer by Steve Ruiz

Framer for Dummies by Monica Quinn

Framer Cheat Sheet by Tess Gadd (This is a series so check them all out here)

Deliveroo x Framer by Jonny Burch

Conclusion

These are my own thoughts about why I use Framer. Honestly, I’ve gained a lot of confidence in writing code, in addition to creating prototypes which is considered a valuable skill to have, going into the field of UX. I hope this article helps other students who are trying to find the right prototyping tool, but Framer is definitely worth the time and you can always play around with a free trial. There are a lot of great resources on Framer website also that you should take a look a!

Thank you for reading and happy prototyping!

More articles written by me:

• “My Facebook Product Design Internship Interview”
• “How to Structure Your First UX Design Portfolio”
• “How to Prepare for Your First UX Interview”
• “Having a Psychology background is already a huge step towards User Experience (UX)”

And find me here:

LinkedIn / Dribbble / Medium

Please press ❤️ if you liked reading this!