Learn framer by building multiple prototypes from scratch

Start with basics and learn everything you need to know about building prototypes with Framer

multiple-prototypes-iconCreated with Sketch.

Build multiple prototypes together from scratch

No kidding, we’ll be building 10+ prototypes from scratch.

catch-bugs-iconCreated with Sketch.

Learn to find those bugs before they eat up your time

Months of bug fixing documented and explained like you are five.

download-all-iconCreated with Sketch.

Download videos and source files and watch anywhere

Have a prototyping idea? Worry not. Just find a similar interaction and learn how its done.

Try one of the Free Courses 🎁

Learn while the course is being made

This course is in its making as of today, 13 July 2018. This is your opportunity to interact closely and get all your questions answered. Check out the trello board 👉 for real time updates.

  • Calculator
  • Animations
  • Maps
  • Circular Effects
  • Real Data
  • Voice
  • Parallax
  • Custom Modules
  • Gestures
  • Charts

What you will learn

The goal of this course is to go beyond the basics of Framer. If you have tried to prototype a concept before, you might already know that often modifying code from the documentation is going to throw you some error. This happens mostly because we either write conflicting logic that we don't notice or we use a wrong syntax which we are unsure of it being an object or an array.

In this course, we will drill down to clarity in concepts. By learning through multiple prototypes we will make sure we get exposed to all possible errors and reasoning on why we approach a problem a particular way. This learning is going to help you write your own logic by avoiding errors well and early.

Coding is fun but it can get really annoying when you get stuck at something for hours. Sometimes we need to know how our code is being executed in the background to really understand what's going on. By the end of this course, you will be comfortable building anything possible on your browser with Framer.

Who is this for

This course is made for beginners who come from no programming background. Each line of code is explained for beginners in the initial courses and as we progress we'll start seeing more advanced concepts. Each course has a "Where to go next" section that points to the next course you can take up and understand clearly.

But that said, you can feel free to break from this path once you get comfortable and pick up any prototype that either interests you or is relevant to what you are trying to build. The videos are structured in parts so you can learn at your own pace.

For advanced users reading this, you are welcome to come take a look at the source code and suggest any improvements or better practices. Just write to me at aswin@framermastery.com and I can add you as a collaborator to the repository.

Now open for pre-booking 🙀 !

Price increases 20% every week.

60% Off!

Lifetime Access

Get a lifetime access to all 10 courses ( and more ) at just a one-time cost.

$149

$89

  • Private Slack Channel
  • Download all content
  • Know course launches first

Your Instructor


Aswin Ranganathan
Aswin Ranganathan

Hey there! I'm Aswin and I'm a designer and developer from India. I've worked with some of the popular known startups here like Housing.com and Zeta. I've designed products used by a few hundred thousand users during this time. Since January 2018 I've been building and teaching Framer to other designers and helping startups understand how Framer can help in their workflow. You can follow me on twitter at @aswinckr.


Frequently Asked Questions


FramerX is coming. Why do I need Framer now?
Okay, I intentionally made this the first FAQ. Lets talk about the facts I could pull out from the discussions on the Slack group.

- FramerX is a completely new tool

- FramerX will eventually replace Framer.

- FramerX will not have coffeescript anymore

But..

- FramerX follows ES6 which is basically coffeescript transpiled. In fact, you can simply convert this online today. - Coffeescript -> Javascript ( js2.coffee ) -> ES6 ( lebab.io ) . If you look at the converted one, they look super alike! When it comes out, I'll put a course on changes from Coffeescript to ES6 right here!

- FramerX will eventually replace Framer. Which means, Framer is here for a while at least. Also, the programming fundamentals you learn here, are going to be the same if you switch over to ES6. Just React is going to be an addition, but trust me, its really simple! I'll make a course on this too :)

So I say go ahead and learn Framer. I'll assure you switching over is going to be easy as a breeze and I'm going to stick around to help you with that.
Why should I pre-book?
The course is currently in the making and I'm aiming at publishing one video every weekday ( You can check out the trello board to see the progress ). Pre-booking this course firstly allows you to purchase the course at a heavily discounted rate. Secondly being one of the first few students I will also be able help you with any queries and issues actively. This gets harder when there are too many people.
How long will it take to complete the course?
Depends on how you want to learn. I strongly recommend completing a prototype, take another day or two to build your own concept based on what you learn, share this with the community or post it on your dribbble page and then learning the next one. So ideally, 2-3 days per prototype.
I have zero knowledge in programming. Can I still follow along?
Absolutely. This course focuses on beginners who come from zero knowledge in programming. Make sure to start with the course "Getting started with Framer" where instead of boring you with theory we'll practically build a simple todo app as we learn programming.
What if its too hard for me to follow?
This course has been made keeping a total beginner in mind. If you find any of the content difficult to follow, do comment right below the video. I'll respond to you as quick as I can and add any relevant material to the course or even take out the time to help you understand what's missing.
Can I start building any prototype on Framer after this course?
Yes! You will learn all the fundamentals by building prototypes. By the end of this course you will become familiar with how to approach any concept you want to prototype. I'll also share some useful resources and show you how to find solutions to problems you may face while building.
Should I purchase Framer to follow along this course?
Not immediately! You can download the 15 day trial from the Framer website to get started. Once you get comfortable with the tool, you can pay for their monthly pricing or annual. I've taken the annual package. However, Framer library ( the code behind framer studio ) is absolutely free and open source. If you choose to simply use framer library to build prototypes you can definitely do that. I'll also be speaking more about this in the course.
What if I need some help?
You have discussions within in every video in the course. At first I would encourage you to see if someone else has posted a similar issue that has been addressed. If you don't find any you can definitely post yours and I will address them as soon as I can!
Is there a student discount?
Of course there is! Send me a copy of your valid student ID to student@framermastery.com and I'll send you a 50% discount coupon.
How else can I benefit from this course?
Each prototype we will build in the course focuses on few unique features that come together to build it. If you take those concepts and come up with a different idea, after every section you can have your own prototype that you can showcase on your portfolio. You can even take this up as challenges and create one prototype after every course to showcase on your dribbble profile or any social media. This can really help you establish yourself as a creator.
What if I am unhappy with the course?
I love to teach and I'm driven by the only goal to make things easy for you to learn. If you are unhappy with the content or you are facing any other issues, you can write to me at refunds@framermastery.com within the first 30 days and I'll refund you your entire course fee, guaranteed.
Do you provide a certificate of completion?
Yes, as of now you will receive a certification from me personally. I'll be working with more established certifying partners to make this certificate more valuable.
I have another question
Feel free to write to me at aswin@framermastery.com and i'll get back to you soon as I can.