Introduction to the Course
- Hello and Welcome to the course!
- How to get the most of the course
- Course Resources Download
- What is framer and what can you do with it
- Framer Interface and Framer Design
- Reviewing Framer
- Framer Studio vs Framer JS
- This course is aways updated
- Code for projects with different sizes
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
- About Sketch Photoshop and Framer
- Sketch, Photoshop and Framer
- Check the steps to continue with your project
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 behavior to your prototypes and how to react to it
- Using the 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
- Learning 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
- Test your knowledge
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. iPhone > 6S, Apple Watch and Macbook
Understanding your prototype
- 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 prototype
- Use Google Fonts in your prototypes
- Free framer modules to increase your productivity
- Animating SVG
- The Microsoft Framer toolkit
- Framer Snippets
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
- Let's create a Tabbed Interface with several pages challenge
- Tabbed Interface with several pages challenge explanation
- Tabbed Interface with scrolling pages challenge proposal
- Solution Tabbed Interface with scrolling pages challenge explanation
Working with Virtual Reality VR
- Introduction to Framer and Virtual Reality
- Adding images to the VR environment
