What you'll 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
Explore related topics
Course content
- Hello and Welcome to the course!1:32
I’ll go over the 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.
- How to get the most of the course0:33
Learn how to get the most of this course
- Course Resources Download0:08
Grab all course resources easily from here
- What is framer and what can you do with it4:28Learn here why framer is so interesting and all the things you can do with it.
- Framer Interface and Framer Design11:59
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
- Reviewing Framer
- Framer Studio vs Framer JS0:30
Learn in this lesson the benefits of using Framer Studio vs using free Framer JS
- This course is aways updated1: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
- Code for projects with different sizes0:14
Some of the projects in the course might have different sizes than the ones that can be seen in the preview window. Check this lesson to see how to fix this.
- What is Framer Live Editing?2:29
What is Framer Live Editing exactly? And why you should also learn to do stuff by code
- The layer properties inspector7: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.
- The new insert menu2: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
- Key Modifiers in Live Editing1:08
When using live editing there are some key modifiers that will make the behavior change. Learn those keys in this lesson.
- Prepare your assets to be FramerJS ready5:36
Framer accepts all kind of images but you should know how you should slice them in order to get the best performance possible.
- Adding images to your projects10:23Having 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 text to your compositions, the easy and fast way3:36
Text can be manipulated in framer in different ways. This lesson shows you one of those that offers full control over your text.
- Previewing your projects5:39See your projects live on your phone. There are several ways that will be covered in this lesson.
- Previewing your designs in an Android device0:14
Check this lesson to see how you can easily apply the same as for the iPhone but for your Android phone.
- Sharing your projects with your team or clients2: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.
- About Sketch Photoshop and Framer0:15
Check this lecture before proceeding with the next one
- Sketch, Photoshop and Framer10: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.
- Check the steps to continue with your project
- Learn how to easily and quickly animate8: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.
- Capturing user actions6:12One of the most important parts of an interactive prototype is to let it be interactable, so getting the user touch is the crucial part.
- Improve prototyping speed by creating predefined states8: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.
- Adding scroll behavior to your prototypes and how to react to it4:29Learn how to interact with the scroll as there are some different ways to do so.
- Using the Scrolling component10: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.
- Curves and animations, all you need to know6:47Mastering 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.
- Working with the keyboard5:32
Showing and hiding the keyboard needs to be done manually in framer. Learn how to do so in this lesson.
- Dragging layers and how to interact with them6:47
Dragging is something that can be really complex. This lesson shows you how you can achieve draggable prototypes.
- Creating a draggable slider using the Slider Component11:36
Learn how to use the draggable slider component new in the recent versions of Framer Studio
- Learning the Range Slider Component5:54
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 Range Slider Component and it's events with an example10:12
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.
- Using your layers faster2:55
This tip will teach you how you can easily use your imported layers in your prototypes with less typing
- Using custom events in your prototypes6:38
Custom events provide you a great way to stay under control of your modules. Learn in this lesson how to use them.
- Animating colors and transitions3: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.
- Get to know the Color object and utilities6:24
The Color object comes with a lot of stuff for your prototypes. Learn in this lesson all the stuff that you can do.
- The Flow Component Introduction3:54
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.
- Flow Component: Creating Overlays4:34
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: Headers and Footers5:56
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.
- Correct bracket usage in Framer0:08
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.
- For i explained0:08
Check the following example to learn how to use the i variable inside a for
- Changing layer properties inside a loop with the new editing1: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
- Test your knowledge
- Pinch gesture, how to use the pinch gesture with images6: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
- Pan gesture, use panning to create a smooth animation4: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
- Swiping from the edges of the screen to go back4: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.
- Learn the double tap interaction the fun way5: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
- Long press interaction, learn what you can do with it4: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
- Force touch. iPhone > 6S, Apple Watch and Macbook7:15
Learn in this section how you can use the latest Force Touch technology in your prototypes and see the endless possibilities it opens
- Slowing down your animations to improve them2: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.
- The web inspector4:07
Learn how to use the web inspector to better understand your prototype and successfully better work with it.
- The console and how to see advanced stuff in your prototype8:33
This lesson will show you how to work with the console to see advanced properties of different objects of your prototype.
- Inspecting your layers to have everything under control8:36
Learn how to see all the layers properties so you can know exactly whats happening under the hood.
- Understanding errors and how to solve them5:10
Errors happens sometimes so its important to know what is happening and how to solve them.
- Using the code highlighter to overview your code1: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.
- Getting all your layers1:37
There is an easy way to get all the layers in your Framer project. Check here how to easily do that.
- What is a module and how you can use it5:57
Learn what is a module, what's the benefit you can get from it and how you can use it.
- Creating a reusable module for your prototypes12:22
In this lesson you will create a module from scratch that will be reusable across all of your projects
- Creating and extending your module for your designs6:08
Learn in this lesson how to extend your modules to make them usable in all your prototypes.
- Importing libraries6:52
Do you want to use any existing library? This lesson will teach you step by step how you can do it.
- Adding inputs to your prototype10:15
Thanks to the input module you can easily add inputs to your prototypes. Learn in this lesson how you can do it.
- Use Google Fonts in your prototypes8: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.
- Free framer modules to increase your productivity0:28
Get here free modules that are already available to download and use in your projects and start improving your productivity
- Animating SVG7:34
Working with SVG can be quite frustrating and hard, but luckily there is a Framer module that helps to do that work.
- The Microsoft Framer toolkit0:28
Microsoft has a toolkit for Framer prototypes which can be found in this lesson
- Framer Snippets0:08
Snippets will make your prototyping speed increase, find in this lesson a collection of snippets ready to land in your library.
- Loading and presenting a user message8: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.
- Photo editor and the draggable controller9:49Starting with the basics you will create your first simple prototype! Something really simple but enough to start warming up.
- Working with a login form10:24A little exercise playing with a button.
- Creating a carousel of images16:49
Learn in this lesson how you can create a carousel of images with Framer
- Using the page component to navigate through different sections of your app8: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.
- Adding interaction to a website6:58
With Framer is also possible to add interaction to websites.
This lesson will show you step by step how you can do that.
- Gallery lightbox exercise proposal1:53It’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 solution9:33Solution and step by step of the lightbox assignment.
- Modular sliders inside scrolling page challenge explanation1:29
This lesson will challenge you to create modular reusable sliders inside a scrolling page.
- Creating the sliders with page indicators15:08
Let's start by creating our sliders with page indicators to know always where we are currently.
- Moving sliders inside a scrolling area8:30
Combining sliders and scroll can be achieved, this lesson will show you how so you can continue with the challenge.
- Creating a class to make it reusable16:36
First step to make it modular is to create a class out of it. This lesson will show you how.
- Modularizing the class to make it available in our prototypes15:54
Now that we have our class created it's time to move it outside Framer and make it available to all our prototypes.
- Menu that disappears on scroll and appears back1: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.
- How to react to scroll events properly with a menu15: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.
- Create a smiley color picker challenge0:37
Combine the power of colors plus the slider component to create a smiley that can be customized to your personal color choice
- Smiley with color picker step by step explanation7:53
Did you manage to create it by yourself? Great! Otherwise check this lesson to learn how to do it.
- Let's create a Tabbed Interface with several pages challenge1: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.
- Tabbed Interface with several pages challenge explanation14: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 :)
- Tabbed Interface with scrolling pages challenge proposal1: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.
- Solution Tabbed Interface with scrolling pages challenge explanation6: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 :)
- Introduction to Framer and Virtual Reality3:47
Get to know what you can do with Framer and a virtual reality environment
- Adding images to the VR environment3:38
You learnt about the environment, now let's see how you can add your custom images
- Working with VR9: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.
- Interacting in virtual reality10:47
Adding interaction in a VR environment is possible thanks to Framer. This lesson will show how you can do it.
- Improving and polishing VR interactions4:39
Learn in this lecture how you can improve VR interactions easily.
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
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
Who this course is for:
- 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
