Framerjs: Innovative prototyping and design with interaction Premium class

Adria Jimenez, Software Engineer, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
69 Videos (6h 44m)
    • Welcome to the course!

      1:32
    • Using Framerjs for Mac

      7:17
    • What is framer and what you can do with it

      4:28
    • This course is aways updated

      1:27
    • Prepare your assets to be Framerjs ready

      5:36
    • Adding images to your projects

      10:23
    • Adding text to your compositions, the easy and the fast way

      3:36
    • Sketch, Photoshop and Framer

      10:53
    • Sharing your projects with your team or clients

      2:31
    • Curves and animations, all you need to know

      6:47
    • Get more of Framer

      1:06
    • Learn how to easily and quickly animate

      8:14
    • The new scrolling component

      10:45
    • Previewing your projects

      5:39
    • Working with the keyboard

      5:32
    • Dragging layers and how to interact with them

      6:47
    • Creating a draggable slider using the Slider Component

      11:36
    • Using custom events in your prototypes

      6:38
    • Using your layers faster

      2:55
    • The Flow Component Introduction

      3:54
    • Flow Component: Creating Overlays

      4:34
    • Flow Component: Headers and Footers

      5:56
    • Animating colors and transitions

      3:47
    • Get to know the Color object and utilities

      6:24
    • Changing layer properties inside a loop with the new editing

      1:38
    • Slowing down your animations to improve them

      2:37
    • The web inspector

      4:07
    • The console and how to see advanced stuff in your prototype

      8:33
    • Inspecting your layers to have everything under control

      8:36
    • Understanding your errors and how to solve them

      5:10
    • Using the code highlighter to overview your code

      1:46
    • Getting all your layers

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

      5:57
    • Creating a reusable module for your prototypes

      12:22
    • Creating and extending your modules for your designs

      6:08
    • Importing Libraries

      6:52
    • Adding inputs to your prototype

      10:15
    • Animating SVG files

      7:34
    • Use Google Fonts in your prototypes

      8:14
    • Loading and presenting a user message

      8:10
    • Photo editor and the draggable controller

      9:49
    • Working with a login form

      10:24
    • Creating a carousel of images

      16:49
    • Using the page component to navigate through different sections of your app

      8:12
    • Adding interaction to a website

      6:58
    • Gallery lightbox exercise

      1:53
    • Gallery lightbox solution

      9:33
    • Thank you and questions

      1:11
    • Menu that disappears on scroll and appears back

      1:24
    • How to react to scroll events properly with a menu

      15:34
    • Setting up your machine with the required components

      5:49
    • How and where to edit yout updating prototype

      3:05
    • Adding images to your prototype

      2:32
    • Importing images from Sketch

      5:56
    • Introduction to Framer and Virtual Reality

      3:47
    • Interacting in virtual reality

      10:47
    • Adding images to the VR environment

      3:38
    • Working with VR

      9:09
    • Improving and polishing VR interactions

      4:39
    • Pinch gesture, how to use the pinch gesture with images

      6:03
    • Pan gesture, use panning to create a smooth animation

      4:50
    • Swiping from the edges of the screen to go back

      4:47
    • Learn the double tap interaction the fun way

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

      4:29
    • Force touch. iPhone 6S, Apple Watch and Macbook

      7:15
    • What is Framer Live Editing?

      2:29
    • The layer properties inspector

      7:10
    • The new insert menu

      2:17
    • Key Modifiers in Live Editing

      1:08