Framerjs: Innovative prototyping and design with interaction

Course Curriculum

Chapter 1: Introduction to the Course

Lecture 1: Hello and Welcome to the course!

Lecture 2: How to get the most of the course

Lecture 3: Course Resources Download

Lecture 4: What is framer and what can you do with it

Lecture 5: Framer Interface and Framer Design

Lecture 6: Framer Studio vs Framer JS

Lecture 7: This course is aways updated

Lecture 8: Code for projects with different sizes

Chapter 2: Framer Live Editing

Lecture 1: What is Framer Live Editing?

Lecture 2: The layer properties inspector

Lecture 3: The new insert menu

Lecture 4: Key Modifiers in Live Editing

Chapter 3: Getting ready to start your project

Lecture 1: Prepare your assets to be FramerJS ready

Lecture 2: Adding images to your projects

Lecture 3: Adding text to your compositions, the easy and fast way

Lecture 4: Previewing your projects

Lecture 5: Previewing your designs in an Android device

Lecture 6: Sharing your projects with your team or clients

Lecture 7: About Sketch Photoshop and Framer

Lecture 8: Sketch, Photoshop and Framer

Chapter 4: The Foundations and Components of framer

Lecture 1: Learn how to easily and quickly animate

Lecture 2: Capturing user actions

Lecture 3: Improve prototyping speed by creating predefined states

Lecture 4: Adding scroll behavior to your prototypes and how to react to it

Lecture 5: Using the Scrolling component

Lecture 6: Curves and animations, all you need to know

Lecture 7: Working with the keyboard

Lecture 8: Dragging layers and how to interact with them

Lecture 9: Creating a draggable slider using the Slider Component

Lecture 10: Learning the Range Slider Component

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

Lecture 12: Using your layers faster

Lecture 13: Using custom events in your prototypes

Lecture 14: Animating colors and transitions

Lecture 15: Get to know the Color object and utilities

Lecture 16: The Flow Component Introduction

Lecture 17: Flow Component: Creating Overlays

Lecture 18: Flow Component: Headers and Footers

Lecture 19: Correct bracket usage in Framer

Lecture 20: For i explained

Lecture 21: Changing layer properties inside a loop with the new editing

Chapter 5: Advanced events and interactions

Lecture 1: Pinch gesture, how to use the pinch gesture with images

Lecture 2: Pan gesture, use panning to create a smooth animation

Lecture 3: Swiping from the edges of the screen to go back

Lecture 4: Learn the double tap interaction the fun way

Lecture 5: Long press interaction, learn what you can do with it

Lecture 6: Force touch. iPhone > 6S, Apple Watch and Macbook

Chapter 6: Understanding your prototype

Lecture 1: Slowing down your animations to improve them

Lecture 2: The web inspector

Lecture 3: The console and how to see advanced stuff in your prototype

Lecture 4: Inspecting your layers to have everything under control

Lecture 5: Understanding errors and how to solve them

Lecture 6: Using the code highlighter to overview your code

Lecture 7: Getting all your layers

Chapter 7: Framer Modules and Libraries

Lecture 1: What is a module and how you can use it

Lecture 2: Creating a reusable module for your prototypes

Lecture 3: Creating and extending your module for your designs

Lecture 4: Importing libraries

Lecture 5: Adding inputs to your prototype

Lecture 6: Use Google Fonts in your prototypes

Lecture 7: Free framer modules to increase your productivity

Lecture 8: Animating SVG

Lecture 9: The Microsoft Framer toolkit

Lecture 10: Framer Snippets

Chapter 8: Step by step advanced complete prototypes

Lecture 1: Loading and presenting a user message

Lecture 2: Photo editor and the draggable controller

Lecture 3: Working with a login form

Lecture 4: Creating a carousel of images

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

Lecture 6: Adding interaction to a website

Chapter 9: Exercises to challenge yourself

Lecture 1: Gallery lightbox exercise proposal

Lecture 2: Gallery lightbox solution

Lecture 3: Modular sliders inside scrolling page challenge explanation

Lecture 4: Creating the sliders with page indicators

Lecture 5: Moving sliders inside a scrolling area

Lecture 6: Creating a class to make it reusable

Lecture 7: Modularizing the class to make it available in our prototypes

Lecture 8: Menu that disappears on scroll and appears back

Lecture 9: How to react to scroll events properly with a menu

Lecture 10: Create a smiley color picker challenge

Lecture 11: Smiley with color picker step by step explanation

Lecture 12: Let's create a Tabbed Interface with several pages challenge

Lecture 13: Tabbed Interface with several pages challenge explanation

Lecture 14: Tabbed Interface with scrolling pages challenge proposal

Lecture 15: Solution Tabbed Interface with scrolling pages challenge explanation

Chapter 10: Working with Virtual Reality VR

Lecture 1: Introduction to Framer and Virtual Reality

Lecture 2: Adding images to the VR environment