Framerjs: Innovative prototyping and design with interaction

Invent, design and experiment with interaction using your Photoshop or Sketch 3 designs. Learn how to use framer js
4.1 (199 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
2,136 students enrolled
Instructed by Adria Jimenez Design / Design Tools
80% off
Take This Course
  • Lectures 92
  • Length 9 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 English

Course Description

The last course update January 24th 2017 go to the end of the course details to see all the updates!

Constant updates for free! Includes prototyping for Virtual Reality!

Join more than 2100 students and learn how to use Framer JS with your Sketch 3 or Photoshop designs to create innovative prototypes, design animation and add interaction to your mobile and web designs and prototypes.

This course teaches step by step how to get all the power of Framer JS and the power of the latest additions. You will prototype and add interaction to your designs thanks to the step by step lessons and the tips I am giving.

If you ever wanted to use Framer but didn't know how or where to start this course is for you as it covers from the basics to the advance step by step and with a progressive learning curve.

Forget about static prototypes as that does not represent your real thinking, Framer JS, and Framer Studio lets your creation flow and allows you to create quickly and easy designs for your mobile devices, iPhone, android or windows phone and for the web.

Learn how to work quickly with the app following my method and be ready to create designs fast and in a very easy way.

The course includes all you need to know to start designing. Even if you are a novice or an expert, you will be able to do this course.

This course is targeted for designers, UX, freelancers, developers or all kind of people that will like to design in an easy and up to date way.

Course updates:

Updated on 24th January 2017 added new examples in some of the lectures

Updated on 11th January 2017 updated links for course resources

Updated on 9th December 2016 new bonus lecture added

Updated on 1st December 2016 new lessons added for learning to use the FlowComponent

Updated on 17th November 2016 added some demo code to a lesson which was missing it

Updated on 8th November 2016 fixed a lesson code which was not working properly

Updated on 17th August 2016 new lesson added

Updated on 20th July 2016 4 new lessons added with 2 new challenges and explanations to improve your Framer expertise

Updated on 17th July 2016 added a collection of snippets that will increase the speed of how you create your animated prototypes

Updated on 10th June 2016 new lessons added

Updated on 11th May 2016 new lecture added

Updated on 22nd April 2016 some lessons were updated to show latest code changes

Updated on 13th April 2016 new lessons added to cover the latest update of Framer released yesterday

Updated on 21st March 2016 new lesson added to the course to slow down all your animations to properly debug them

Updated on 24th February 2016 new lesson added to get all layers and manipulate them easily

Updated on 8th February 2016 7 new lessons added that will teach you how to use advanced interactions in Framer

Updated on 17th January 2016 new lessons added

Updated on 11th January 2016 added new lesson that shows how to use the for i loop in Framer

Updated on 17th December new lesson to learn how to use Google Fonts in your prototypes

Updated on 10th December added Color challenge to practice the new Color class

Updated on 9th December new lessons about Color component

Updated on 2nd December new lesson added

Updated on 20th November new whole section about virtual reality and Framer

Updated on 18th November new lesson to create micro-interactions in websites

Updated on 16th November animate SVG files with the lesson that shows you how to do so.

Updated on 19th October learn how to use the new code highlighter to see easily your prototypes

Updated on 29th September new lecture showing how to use properly parenthesis, brackets and curly brackets in Framer

Updated on 22nd September quizzes updated to reflect latest Framer changes

Updated on 16th September new challenge added to learn how to play with scroll and events

Updated on 25th July two lessons updated to reflect latest Framer changes

What are the requirements?

  • A mac computer is suggested. The course will teach you how to do it with any kind of computer but using a Mac is suggested
  • A basic knowledge in any programming language is recommended or at least on how programming languages are written (if then else, while, etc..) just basic knowledge

What am I going to get from this course?

  • Quickly prototype mobile applications
  • Animate and add interaction to the prototypes
  • Create a quick overview of an app
  • Prototype small interactions
  • Create user tests
  • Create modules to share functionality across designs

Who is the target audience?

  • Students who has an app idea in mind and want to start to create something or to test with users
  • Students who have a design that want to animate
  • Students who wants to learn how to add interaction and animation to their applications
  • If you never programmed before this course may be a bit hard for you

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction to the Course
I’ll go over the broad topics we’ll cover in the course. I’ll also touch on why the course will help students, and what they’ll get out of it once they’ve completed it.

Learn how to get the most of this course

Learn here why framer is so interesting and all the things you can do with it.
This lesson will teach how to use framerjs for Mac, the basics needed to start with the course.
5 questions

Before you go ahead make sure you know how to work with Framer be testing your knowledge


Learn in this lesson the benefits of using Framer Studio vs using free Framer JS


    Check this lesson to know more about how the course stays always up to date and why you may see some differences in the videos

Section 2: Framer Live Editing

    What is Framer Live Editing exactly? And why you should also learn to do stuff by code


    This new version of Framer comes with an amazing properties inspector that will let you edit your layers without even writing a line of code.


    From the insert menu you will be able to quickly insert things to your prototype without even writing a piece of code. This is really useful and here we will do a sneak peak of the features. Later in next lessons we will see how we can take benefit of all the actions


    When using live editing there are some key modifiers that will make the behavior change. Learn those keys in this lesson.

Section 3: Getting ready to start your project

Framer accepts all kind of images but you should know how you should slice them in order to get the best performance possible.

Having the images in the project is really important so in this lesson you will see how you can add them in an easy and effective way.

Text can be manipulated in framer in different ways. This lesson shows you one of those that offers full control over your text.

See your projects live on your phone. There are several ways that will be covered in this lesson.

Check this lesson to see how you can easily apply the same as for the iPhone but for your Android phone.


One of the most important things to do when you are done with your work is to show it to your clients or share it in your team.

This lessons shows you exactly how to achieve that.


Check this lecture before proceeding with the next one


Luckily for us, Framer has the option to import and work with Sketch and Photoshop files.

This lesson will teach you how to easily work with them.

5 questions

Make sure you know all the steps and how to achieve them so you can start prototyping and animating your designs

Section 4: The Foundations and Components of framer

Animating is one of the things you will be all time doing so you need to learn it well. Keep an eye on this lesson that shows how to do it properly.

One of the most important parts of an interactive prototype is to let it be interactable, so getting the user touch is the crucial part.

When you need to use the same animations over and over again, there is a quick way to store those values so you can benefit of speed, readability and other benefits. Learn in this lesson how to achieve that.

Learn how to interact with the scroll as there are some different ways to do so.

Recently a new scrolling component was added to Framer making it really easy to make layers scrollable.

This lesson will teach you how to use this component in an easy way.

Mastering the animations is what makes the courses stand out. In this lesson we will view all the available curves and animations, how you can apply them and how you can tweak them to work for you.

Showing and hiding the keyboard needs to be done manually in framer. Learn how to do so in this lesson.


Dragging is something that can be really complex. This lesson shows you how you can achieve draggable prototypes.


Learn how to use the draggable slider component new in the recent versions of Framer Studio


This tip will teach you how you can easily use your imported layers in your prototypes with less typing


Custom events provide you a great way to stay under control of your modules. Learn in this lesson how to use them.


Recently Framer added the ability to transition between colors. This lesson will show you how you can do that and which are the different ways to do it.


The new Color object comes with a lot of stuff for your prototypes. Learn in this lesson all the stuff that you can do.


In this lecture you are going to learn about the new Flow Component for Framer. What can you do with the FlowComponent and why is better than what we had before.


In this lecture you are going to learn about the new Flow Component for Framer. Now we are going to see how easy is to create overlays in your prototypes or wireframes.


In this lecture you are going to learn how to use the Flow Component for Framer Studio. Specially a feature that allows us to easily create sticky footers and headers without effort.


Sometimes can be quite confusing to know when to use parenthesis, when brackets and when curly brackets. This lesson will show you when to use each one.


Check the following example to learn how to use the i variable inside a for


    With the new layer editing we can benefit of the loops and we can edit more than one layer at once. Check this lesson to learn how

6 questions

In this quiz you will be challenged with questions regarding framer foundations. Test yourself!

Section 5: Advanced events and interactions

This lesson will show you how to use the pinch gesture with your layers so you’ll be able to easily pinch them and react based on different event types


In this lesson you’ll see how you can use the panning gesture. The best of all is that we will do a discard example using the panning gesture


Swiping from screen edges is usually used for going back gestures but you can use that gesture for other advanced interactions. In this lesson you’ll see how easy it is to do so.


Double tap can be used for several things, like adding extra interactions or zooming pictures for example. Learn in this lesson how to do double tap interaction with Framer


The long press interaction can give you a lot of options to show what your app can do. Mastering it is the key to use it. This lesson will show you how to use long press in Framer


Learn in this section how you can use the latest Force Touch technology in your prototypes and see the endless possibilities it opens

Section 6: Understanding your prototype

This tiny little tip will show you how you can easily slow down your animations so they appear slower and you can improve them to work like you want them to work.


Learn how to use the web inspector to better understand your prototype and successfully better work with it.


This lesson will show you how to work with the console to see advanced properties of different objects of your prototype.


Learn how to see all the layers properties so you can know exactly whats happening under the hood.


Errors happens sometimes so its important to know what is happening and how to solve them.


The recently introduced feature of code highlighting offers a quick overview of your code and helps you visualize and match the layers with the code you are writing.


There is an easy way to get all the layers in your Framer project. Check here how to easily do that.

Section 7: Framer Modules and Libraries

Learn what is a module, what's the benefit you can get from it and how you can use it.


In this lesson you will create a module from scratch that will be reusable across all of your projects


Learn in this lesson how to extend your modules to make them usable in all your prototypes.


Do you want to use any existing library? This lesson will teach you step by step how you can do it.


Thanks to the input module you can easily add inputs to your prototypes. Learn in this lesson how you can do it.


Google offers hundreds of fonts for free, and what’s better than being able to use them? This lesson will show you how you can use them in your prototypes.


Get here free modules that are already available to download and use in your projects and start improving your productivity


Working with SVG can be quite frustrating and hard, but luckily there is a Framer module that helps to do that work.


Snippets will make your prototyping speed increase, find in this lesson a collection of snippets ready to land in your library.

Section 8: Step by step advanced complete prototypes

This lessons covers how to approach a user error and how to show it. The animation that we'll use combines user typing with loading and showing the error. A very nice combination of effects.

Starting with the basics you will create your first simple prototype! Something really simple but enough to start warming up.
A little exercise playing with a button.

Learn in this lesson how you can create a carousel of images with Framer


The page component was introduced recently and in this lesson we will cover how to use it and how to create a pagination in a very straight forward and easy way.


With Framer is also possible to add interaction to websites.

This lesson will show you step by step how you can do that.

Section 9: Exercises to challenge yourself
It’s your time now, see the assignment and try to do it by yourself. After you tried hard, go to the next step to see the solution!
Solution and step by step of the lightbox assignment.

This lesson will challenge you to create modular reusable sliders inside a scrolling page.


Let's start by creating our sliders with page indicators to know always where we are currently.


Combining sliders and scroll can be achieved, this lesson will show you how so you can continue with the challenge.


First step to make it modular is to create a class out of it. This lesson will show you how.


Now that we have our class created it's time to move it outside Framer and make it available to all our prototypes.


This test will challenge you to do a menu that will show and hide depending on the current scroll position. You'll learn how to react properly to different events and also a very common pattern used in the iOS world.


Learn the solution to the challenge, step by step so you can do it if you weren't able to do it alone.

This lesson will teach you about events in Framer.


Combine the power of colors plus the slider component to create a smiley that can be customized to your personal color choice


Did you manage to create it by yourself? Great! Otherwise check this lesson to learn how to do it.


A tab interface is something really common, specially on Android devices. Let's try to make one. Check the challenge and try to do it by yourself. If you don't manage to do it, check the next lecture for the solution.


This is the explanation of the previous challenge. Please first try to make it yourself, that's why it's a challenge. After that you can check the instructions :)


A tab interface is something really common, specially on Android devices. Let's get our previous challenge and let's add scrolling content. Check the challenge and try to do it by yourself. If you don't manage to do it, check the next lecture for the solution.


This is the explanation of the previous challenge. Please first try to make it yourself, that's why it's a challenge. After that you can check the instructions :)

Section 10: Working with Virtual Reality VR

Get to know what you can do with Framer and a virtual reality environment


You learnt about the environment, now let's see how you can add your custom images


Whenever you are working in a VR environment, you have to know how this environment behaves and how you can work with the elements inside. Learn how in this lesson.


Adding interaction in a VR environment is possible thanks to Framer. This lesson will show how you can do it.


Learn in this lecture how you can improve VR interactions easily.

Section 11: Free FramerJS

Learn when you should and when you shouldn't use the free and open source version of the framer js library

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Adria Jimenez, Software Engineer, Designer

I love creating software and teaching how to be more successful.

Currently I work at Xing creating software for millions of people. I've worked in other big and successful companies like Softonic, Honda or Fnac creating websites, apps, designs and software.

I really enjoy teaching people new skills so they can improve their lives.

All my life I've been surrounded by computers. As a child, my father - who was a programmer back then - introduced me to the world of computing, that marked me forever. Years later, after hours and hours in front of computers, I am dedicated to my passion: code.

I try to do my best to achieve the best result day by day.

Ready to start learning?
Take This Course