Skip to content
#3 in Interaction DesignUdemyInteraction DesignPaid courseAll LevelsCertificate

Framerjs: Innovative prototyping and design with interaction (Udemy.com)

Invent, design and experiment with interaction using your Photoshop or Sketch 3 designs. Learn how to use framer js

Created by: Adria Jimenez

Last updated August 2018

Our take

Based on the ratings of 357 students, a sample of their written reviews and the syllabus, as the course stood in August 2018. No course pays to be reviewed.

This is a nine hour walkthrough of Framer JS, the code driven prototyping tool, taught by Adria Jimenez across 97 lectures and 12 sections. It works from Sketch or Photoshop designs, moves through Framer's components and events, then into modules, a set of complete prototypes and a section on VR. It is aimed at designers who want real interaction in their prototypes, but the requirements say you should already know what an if statement is, and reviewers agree that matters.

Students like Jimenez's clear explanations of the everyday features and say the early sections are easy to follow. One reviewer praises how often he updated the material as Framer changed, and another says they keep coming back to it as a reference. The complaints are consistent. The pace jumps once arrays, classes and modules arrive, and a few felt the instructor assumed too much coding knowledge. Others found the delivery improvised, with long pauses and mistakes left in, and one wanted more structured projects rather than a tour of features. Some examples do not work, and one reviewer found the accent hard to follow at times and asked for subtitles.

The bigger issue is age. The last update on record is August 2018, and one reviewer was already calling parts of it outdated in early 2017. The course's own update log shows how often Framer changed, so treat this as a course on the classic, code based Framer rather than whatever the tool is now. Its draw, next to the Principle and Flinto courses it sits with, is that it teaches prototyping through code. Worth it if that is what you want; otherwise pick a neighbour.

Best forDesigners with a little coding under their belt who want animated, testable prototypes built from Sketch or Photoshop files.
Skip it ifYou have never written code, or you want the current Framer rather than the classic JS version taught here.

Pros

  • Clear, easy to follow explanations of the everyday Framer features in the early sections
  • Frequent updates through 2018 as Framer changed, which one reviewer singled out for praise
  • Goes beyond basics into modules, shareable libraries and complete step by step prototypes
  • A 15 lecture exercise section and a VR chapter give you things to build, not just watch

Cons

  • Pace speeds up sharply at arrays, classes and modules; non-coders get lost
  • Last updated August 2018, and Framer has moved on a long way since then
  • Unscripted delivery with pauses and mistakes; some examples do not work
Adria explains most of the commonly used features clearly. Most of the time it's easy to follow. However, when it comes to more advanced stuff like array, class and modules, the pace is rather fast.
Wei-Hung Hsieh, a student

Listed as all levels, but the requirements ask for basic programming and reviewers say beginners struggle past the midpoint.

icon
What you will 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

Course content

12 sections · 97 lectures · 9.1 hours of video 3 quizzes, 12 articles

  1. 1Introduction to the Course 2 free previews8 lectures · 1 quiz · 21 min
  2. 2Framer Live Editing4 lectures · 13 min
  3. 3Getting ready to start your project 1 free preview8 lectures · 1 quiz · 39 min
  4. 4The Foundations and Components of framer21 lectures · 1 quiz · 2 hours
  5. 5Advanced events and interactions 1 free preview6 lectures · 33 min
  6. 6Understanding your prototype7 lectures · 32 min
  7. 7Framer Modules and Libraries 1 free preview10 lectures · 58 min
  8. 8Step by step advanced complete prototypes6 lectures · 1 hour
  9. 9Exercises to challenge yourself 1 free preview15 lectures · 2 hours
  10. 10Working with Virtual Reality VR5 lectures · 32 min

Who it is for

The instructor says it suits

  • 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 need before you start

  • 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

icon
Course Description

The last course update March 21st 2019 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 2900 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 21st March 2019 updated two lessons to reflect latest changes

Updated on 3rd August 2018 some lessons updated to match the last Framer version

Updated on 6th April 2018 new lesson added

Updated on 8th January 2018 updated lessons to match latest Framer version

Updated on 16th October 2017 new lesson added

Updated on 13th September 2017 all course resources have been updated to work with latest Framer update

Updated on 7th September 2017 fix for some lessons not being displayed properly on latest Framer version

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

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Adria Jimenez

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.

icon
More courses by Adria Jimenez

$54.99

icon
More Interaction Design courses

$54.99

$19.99

$49.99

$59.99

$19.99

Free

icon
Reviews

4.1

357 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Wei-Hung Hsieh on 9/10/2017

Adria explains most of the commonly used features clearly. Most of the time it's easy to follow. However, when it comes to more advanced stuff like array, class and modules, the pace is rather fast. So it's better if you have some very basic understanding or experience of programming before you take this course. Generally, for people who are not complete beginners to programming, I recommend this course.

By Shawn Baek on 5/2/2017

Hi I'm a UX engineer, iOS, and Web Developer. Framer is really useful for me. Framer really helped me before when I started making a UI with native iOS code. I highly recommend this course for anyone who is looking to learn the FramerJS library. This course lets you know how to make prototypes from your ideas step by step. You can easily understand how it works. After this course, You can make your own prototypes very easily and you can also make your own framerJS libraries. And You know what? He also gives you a discount coupon. :D

By Wei-Hsun Chen on 3/3/2017

In overall it's a great course. It includes step by step of how to use Framer (Although a bit outdated since Framer now has more functionality) It covers most of the stuff for people who are interested in using Framer, but I'd say for complete beginners it'd be a bit challenging to catch up. Sometimes there's some concept I don't understand and the instructor seems pretty experienced at coding so didn't slow down and re-explain the logic behind it. Keep up the good work!

By Diggy on 1/24/2017

i haven't finished the course yet but so far the content is great and I'm enjoying learning with Adria, he provides enough exercises and videos for you to learn at your own peace the part that I would improve is sometimes where after the middle of the course he goes a bit fast assuming that you have practiced everything but unfortunately I don't have enough time to learn and practice so I guess it's my fault

By Richard Picot on 12/19/2016

The lessons are far to loose and don't follow much structure. I'd much rather code a long to a number of projects than watch the lecturer just basically talk through features in the documentation.

By Jesse Kuntz on 10/28/2016

Too improvised. I like when the narratives are scripted, i.e. Mosh's Angular 2 course. When they are scripted they are more straightforward, take less time, which means it's easier to learn. When it's not scripted it's just some dude mucking around, making tons of mistakes. I suppose that has value as well though. With that being said, I've learned new things from this course. Good job.

By C. Vincent Plummer on 6/16/2016

It's clear the instructor is very knowledgeable about the subject matter. Unfortunately, I don't feel like this course is remedial enough for beginner students that don't possess a good understanding of coffee script. I was hoping for more beginner level explanation and Sketch design combinations. I started getting lost around Section 4,5,6. Perhaps there is an opportunity to create a new course with a more in depth look at the basics.

By Jen Son on 12/23/2015

I work in a medium sized company and I was looking for a course like this one. And I have to say it's one of the best courses I saw in a lot of time, totally worth it. The teacher explains everything with a lot of detail so it's very easy to follow and understand. Teacher does a lot of practice and exercises so you can increase your level easy and fast. The quality of the course is great, the lessons are very well created and recorded so after turning on the hd feature in the viewer you can see every tiny detail of the teacher's screen. I started with some basic knowledge about framer and now I can easily go alone and create my own prototypes

By Ehren Miller on 7/17/2015

Really good course to take your from beginner to intermediate at Framer.js. The lessons are really clear and interesting and you make some fun stuff. Only con is that the last project (three part lesson) skipped way ahead into advanced and breezed past techniques that hadn't been explained yet (classes? arrays?). That, combined with Adria's tendency to say something, then correct himself and then re-correct himself made it really difficult to follow along. That said, I still recommend the course as a great way to get you started with a really cool and flexible tool for interaction design.

By Dexter W on 2/28/2015

I learned FramerJS myself, but not being a coder by day, much of the resources available are too advanced for me to use so I was getting tired of it. Adria's course helped a lot because he went through the basics and showed simpler programs that I can logically understand. I'm comfortable on my own a lot more. He also responds extremely fast and even helped show different solutions. Overall, I think something like FramerJS needs a lot of practice, and for that reason, I look forward to more examples like he's done so far.

Showing all 10 reviews on CourseDuck

Read all 357 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 82 / 100