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

About This Class

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 will teach you step by step how to get all the power of Framer JS and the power of the latest additions. You will be prototyping and adding interaction to your designs thanks to step by step lessons and the tips I'm 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 doesn't represent your real thinking, Framer JS and Framer Studio let's your creation flow and let's you create quickly and easy designs for you mobile devices, iphone, android or windows phone and for the web.

Learn how to quickly work 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.

3 of 3 students recommendSee All

Good, basic overview of the capabilities of Framer. Very helpful.

462

Students

2

Projects

Adria Jimenez

Software Engineer, Designer

I love creating software and teaching how to be more successful.

Currently I work as a Software Engineer at Xing creating software for millions of users. I've work in other big and successful companies like Softonic, Honda or Fnac creating websites, designs and software.

I really enjoy teaching people new skills so they can improve their lives.

All my life I've been surrounded by computers. As a child, my father - who was a programmer back then - introduced me to the world of computing, that marked me forever. Years later, after hours and hours in front of computers, I am dedicated to my passion: code.

I try to do my best to achieve the best result day by day.