Framer Course Outline


  • Introduction to the course
    • Welcome to the course
    • What is framer and what can you do with it
    • Framer interface and Framer Design
    • Framer Studio vs Framer JS
    • Remember, this course is aways updated
  • Framer Live Editing
    • What is Framer Live Editing?
    • The layer properties inspector
    • The new insert menu
    • Key Modifiers in Live Editing
  • Getting ready to start your project
    • Prepare your assets to be FramerJS ready
    • Adding images to your projects
    • Adding text to your compositions, the easy and fast way
    • Previewing your projects
    • Previewing your designs in an Android device
    • Sharing your projects with your team or clients
    • Sketch, Photoshop and Framer
  • The Foundations and Components of Framer
    • Learn how to easily and quickly animate
    • Capturing user actions
    • Improve prototyping speed by creating predefined states
    • Adding scroll behaviour to your prototype and how to react to it
    • The new scrolling component
    • Curves and animations, all you need to know
    • Working with the keyboard
    • Dragging layers and how to interact with them
    • Creating a draggable slider using the Slider Component
    • The Range Slider Component
    • Learning Range Slider Component and it's events with an example
    • Using your layers faster
    • Using custom events in your prototypes
    • Animating colors and transitions
    • Get to know the Color object and utilities
    • The Flow Component Introduction
    • Flow Component: Creating Overlays
    • Flow Component: Headers and Footers
    • Correct bracket usage in Framer
    • "For i" explained
    • Changing layer properties inside a loop with the new editing tool
  • Advanced events and interactions
    • Pinch gesture, how to use the pinch gesture with images
    • Pan gesture, use panning to create a smooth animation
    • Swiping from the edges of the screen to go back
    • Learn the double tap interaction the fun way
    • Long press interaction, learn what you can do with it
    • Force touch. the new iPhone, Apple Watch and Macbook
  • Understanding your prototypes
    • Slowing down your animations to improve them
    • The Web Inspector
    • The console and how to see advanced stuff in your prototype
    • Inspecting your layers to have everything under control
    • Understanding errors and how to solve them
    • Using the code highlighter to overview your code
    • Getting all your layers
  • Framer Modules and Libraries
    • What is a module and how you can use it
    • Creating a reusable module for your prototypes
    • Creating and extending your module for your designs
    • Importing libraries
    • Adding inputs to your prototypes
    • Free Framer modules to increase your productivity
    • Animating SVG
  • Step by step advanced complete prototypes
    • Loading and presenting a user message
    • Photo editor and the draggable controller
    • Working with a login form
    • Creating a carousel of images
    • Using the page component to navigate through different sections of your app
    • Adding interaction to a website
  • Exercises to challenge yourself
    • Gallery lightbox exercise proposal
    • Gallery lightbox solution
    • Modular sliders inside scrolling page challenge explanation
    • Creating the sliders with page indicators
    • Moving sliders inside a scrolling area
    • Creating a class to make it reusable
    • Modularizing the class to make it available in our prototypes
    • Menu that disappears on scroll and appears back
    • How to react to scroll events properly with a menu
    • Create a smiley color picker challenge
    • Smiley with color picker step by step explanation
  • Working with Virtual Reality VR
    • Introduction to Framer and Virtual Reality
    • Adding images to the VR environment
    • Working with VR
    • Interacting in Virtual Reality with Framer
    • Improving and polishing VR interactions
    • Thank you and questions
  • The Free version of Framer (aka FramerJS)
    • When to use the free Framer JS library
    • Setting up your machine with the required components
    • How and where to edit your prototype
    • Adding images to your prototype
    • Importing images from Sketch using the free FramerJS library

PROTOTYPING WITH FRAMER

All content 89$


TAKE ME TO THE COURSE