Framerjs: Innovative prototyping and design with interaction
4.1 (275 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,509 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Framerjs: Innovative prototyping and design with interaction to your Wishlist.

Add to Wishlist

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 (275 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,509 students enrolled
Created by Adria Jimenez
Last updated 6/2017
Current price: $10 Original price: $75 Discount: 87% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 9 hours on-demand video
  • 11 Articles
  • 30 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • 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

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

Constant updates for free! Includes prototyping for Virtual Reality!

All course content is valid for the latest version of Framer

Join more than 2300 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 17th July 2017 added two new lectures with the latest Framer changes

Updated on 16th June 2017 added new lectures using the new Framer Design interface

Updated on 7th June 2017 updated two lessons to reflect the latest changes of Framer

Updated on 15th May 2017 new Microsoft UI for Framer added

Updated on 5th April 2017 updated course exercise to reflect the changes from the latest Framer update

Updated on 7th March 2017 new lectures with the new RangeSliderComponent added

Updated on 27th February 2017 a lesson was updated to match the new Framer changes

Updated on 26th January 2017 now all course resources can be easily downloaded

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

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
96 Lectures
Introduction to the Course
7 Lectures 20:39
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.
Preview 01:32

Learn how to get the most of this course

Preview 00:34

Grab all course resources easily from here

Course Resources Download

Learn here why framer is so interesting and all the things you can do with it.
What is framer and what can you do with it

Framer added a new design tab on their application which allows you to design directly from Framer. In this lecture we are going to cover some of the aspects of Framer design and we are going to also review the Framer interface

Framer Interface and Framer Design

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

Reviewing Framer
5 questions

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

Framer Studio vs 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

This course is aways updated
Framer Live Editing
4 Lectures 13:04

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

What is Framer Live Editing?

    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.

The layer properties inspector

    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

The new insert menu

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

Key Modifiers in Live Editing
Getting ready to start your project
8 Lectures 39:08

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

Prepare your assets to be FramerJS ready

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.
Adding images to your projects

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

Preview 03:36

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

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

Previewing your designs in an Android device

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.

Sharing your projects with your team or clients

Check this lecture before proceeding with the next one

About Sketch Photoshop and Framer

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.

Sketch, Photoshop and Framer

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

Check the steps to continue with your project
5 questions
The Foundations and Components of framer
21 Lectures 02:01:07

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.

Learn how to easily and quickly animate

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.
Capturing user actions

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.

Improve prototyping speed by creating predefined states

Learn how to interact with the scroll as there are some different ways to do so.
Adding scroll behavior to your prototypes and how to react to it

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.

The new Scrolling component

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.
Curves and animations, all you need to know

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

Working with the keyboard

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

Dragging layers and how to interact with them

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

Creating a draggable slider using the Slider Component

Learn the new Range Slider Component which allows you to easily create range sliders within Framer so you can add them in your prototypes.

Learning the Range Slider Component

Learn the new Range Slider Component by using it. In this lecture we are going to add some interaction to it so you can properly learn how to use it in your future prototypes.

Learning Range Slider Component and it's events with an example

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

Using your layers faster

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

Using custom events in your prototypes

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.

Animating colors and transitions

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

Get to know the Color object and utilities

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.

The Flow Component Introduction

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.

Flow Component: Creating Overlays

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.

Flow Component: Headers and Footers

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.

Correct bracket usage in Framer

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

For i explained

    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

Changing layer properties inside a loop with the new editing

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

Test your knowledge
6 questions
Advanced events and interactions
6 Lectures 32:40

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

Pinch gesture, how to use the pinch gesture with images

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

Preview 04:50

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.

Swiping from the edges of the screen to go back

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

Learn the double tap interaction the fun way

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

Long press interaction, learn what you can do with it

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

Force touch. iPhone 6S, Apple Watch and Macbook
Understanding your prototype
7 Lectures 32:26

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.

Slowing down your animations to improve them

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

The web inspector

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

The console and how to see advanced stuff in your prototype

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

Inspecting your layers to have everything under control

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

Understanding errors 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.

Using the code highlighter to overview your code

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

Getting all your layers
Framer Modules and Libraries
10 Lectures 58:47

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

Preview 05:57

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

Creating a reusable module for your prototypes

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

Creating and extending your module for your designs

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

Importing libraries

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

Adding inputs to your prototype

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.

Use Google Fonts in your prototypes

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

Free framer modules to increase your productivity

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

Animating SVG

Microsoft has a toolkit for Framer prototypes which can be found in this lesson

The Microsoft Framer toolkit

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

Framer Snippets
Step by step advanced complete prototypes
6 Lectures 01:00:22

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.

Loading and presenting a user message

Starting with the basics you will create your first simple prototype! Something really simple but enough to start warming up.
Photo editor and the draggable controller

A little exercise playing with a button.
Working with a login form

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

Creating a carousel of images

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.

Using the page component to navigate through different sections of your app

With Framer is also possible to add interaction to websites.

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

Adding interaction to a website
Exercises to challenge yourself
15 Lectures 01:57:45
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!
Gallery lightbox exercise proposal

Solution and step by step of the lightbox assignment.
Gallery lightbox solution

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

Modular sliders inside scrolling page challenge explanation

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

Creating the sliders with page indicators

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

Moving sliders inside a scrolling area

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

Creating a class to make it reusable

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

Modularizing the class to make it available in 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.

Menu that disappears on scroll and appears back

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.

How to react to scroll events properly with a menu

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

Create a smiley color picker challenge

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

Smiley with color picker step by step explanation

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.

Let's create a Tabbed Interface with several pages challenge

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 :)

Tabbed Interface with several pages challenge explanation

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.

Preview 01:07

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 :)

Solution Tabbed Interface with scrolling pages challenge explanation
Working with Virtual Reality VR
5 Lectures 32:00

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

Introduction to Framer and Virtual Reality

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

Adding images to the VR environment

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.

Working with VR

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

Interacting in virtual reality

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

Improving and polishing VR interactions
2 More Sections
About the Instructor
Adria Jimenez
4.1 Average rating
896 Reviews
13,119 Students
11 Courses
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, which 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.