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 (136 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.
1,889 students enrolled
Instructed by Adria Jimenez Design / Design Tools
$75
Take This Course
  • Lectures 87
  • Contents Video: 8.5 hours
    Other: 2 mins
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 1/2015 English

Course Description

The last course update August 17th 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 1700 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 August new lesson added

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

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

Updated on 10th June new lessons added

Updated on 11th May new lecture added

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

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

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

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

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

Updated on 17th January new lessons added

Updated on 11th January 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

What 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.

Curriculum

Section 1: Introduction to the Course
01:32
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.
04:28
Learn here why framer is so interesting and all the things you can do with it.
07:17
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

Article

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

01:27

    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
02:29

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

07:10

    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.

02:17

    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

01:08

    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
05:36

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

10:23
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.
03:36

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

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

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

02:31

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.

Article

Check this lecture before proceeding with the next one

10:53

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
08:14

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.

06:12
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.
08:35

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.

04:29
Learn how to interact with the scroll as there are some different ways to do so.
10:45

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.

06:47
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.
05:32

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

06:47

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

11:36

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

02:55

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

06:38

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

03:47

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.

06:24

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

Article

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.

Article

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

01:38

    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
06:03

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

04:50

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

04:47

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.

05:16

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

04:29

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

07:15

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
02:37

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.

04:07

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

08:33

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

08:36

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

05:10

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

01:46

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.

01:37

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
05:57

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

12:22

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

06:08

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

06:52

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

10:15

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

08:14

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.

Article

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

07:34

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

Article

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
08:10

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.

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

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

08:12

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.

06:58

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
01:53
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!
09:33
Solution and step by step of the lightbox assignment.
01:29

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

15:08

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

08:30

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

16:36

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

15:54

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

01:24

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.

15:34

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.

00:37

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

07:53

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

01:13

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.

14:33

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

01:07

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.

06:21

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
03:47

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

03:38

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

09:09

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.

10:47

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

04:39

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

01:11
Thank you and open for questions.
Section 11: Free FramerJS
Article

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

05:49

IMPORTANT: This lesson only applies for students that are not using Framer Studio.

Learn what you need to set up your machine and be ready to start prototyping with the free version of framer

03:05

IMPORTANT: This lesson only applies for students that are not using Framer Studio.

02:32

IMPORTANT: This lesson only applies for students that are not using Framer Studio.

Learn the proper way to add images to your prototypes using the free version of framer js

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